このパターンではテーマ「Twenty Twenty-Four」「Lightning ( G3 / theme.json )」「X-T9」「Twenty Twenty-Three」での使用を想定しています。他のテーマでは崩れる可能性がありますのでご注意ください。

このパターンではプラグイン「VK Blocks Pro (有料)」と、独自にカスタマイズしたCSSを使用しています。

設定のコツ
  • 4半期ごとのカラムブロックからできています
    すべてのカラムブロックで [モバイルでは縦に並べる] をOFFにしておきます
  • イベントを囲ったグループにカスタムCSSを記述することで、イベント名がアイコン(●)の下中央にくるよう配置しています
    アイコンからつながる縦線は疑似要素 ::before を利用してカスタムCSSを設定しています
  • 内容のないカラムがモバイルで非表示にならないように、イベントがない欄にスペーサーを入れています
関連するパターン

ベクトルパスポートがあればすべてのパターンが使えます