このパターンではテーマ「X-T9」「Lightning ( G3 / theme.json )」での使用を想定しています。他のテーマでは崩れる可能性がありますのでご注意ください。
このパターンではプラグイン「VK Blocks Pro (有料)」を使用しています。
設定のコツ
- グリッドカラムのレイアウトについて
- 全体のレイアウトは VK Blocks Pro の「グリッドカラムカード」ブロックを使用しています。最小サイズが設定できますので大変便利です。
- カラムの幅設定は「%」の単位にして、以下のように設定しています。
- カラムの最小サイズ(PC / 任意)「20%」
- カラムの最小サイズ(タブレット / 任意)「40%」
- カラムの最小サイズ(モバイル)「100%」
- メニュー名と料金部分について
- メニュー名と料金は「横並び」ブロックで、【レイアウト】> 【配置】を「項目の間隔」にして左右に並べています。
- 料金部分は改行させたくないので、段落ちしないように VK Blocks の機能 改行禁止指定の「Nowrap」にしています。
- 『円(税込)』の部分は文字を小さくしたいので、VK Blocks の機能 「インライン文字サイズ」でテキストの一部を小さく指定しています。