このパターンではテーマ「Lightning ( G3 / theme.json )」「X-T9」「Twenty Twenty-Three」での使用を想定しています。他のテーマでは崩れる可能性がありますのでご注意ください。
このパターンではプラグイン「VK Blocks Pro (有料)」と、独自にカスタマイズしたCSSを使用しています。
設定のコツ
- まず、「気軽に / 人気! / おトク」の段落をそれぞれ横並びグループで囲み、このグループに[高度な設定] – [追加 CSS クラス]より、
vkp_tips
を追加しておきます。 - 次に、上記グループ (
vkp_tips
) で、テキスト色と背景色、枠線と角丸を設定します。 - 上記グループ (
vkp_tips
) をさらに横並びグループで囲むことで、上下左右のセンタリングができます。 - グリッドカラムカードのカスタムCSSで、丸 (
vkp_tips
) に対して位置とサイズを指定しています。