このパターンではテーマ「X-T9」「Lightning ( G3 / theme.json )」での使用を想定しています。他のテーマでは崩れる可能性がありますのでご注意ください。
このパターンではプラグイン「VK Blocks Pro (有料)」と、独自にカスタマイズしたCSSを使用しています。
設定のコツ
- グリッドカラムアイテム内に設置したカバーブロックの中の内容量に応じて背景画像の高さが伸びてボタンは下部配置になるバナーです。
VK Blocks Proの「カスタムCSS」で実装しています。- カバーの背景が中身の内容量の高さに伸びるようにカバーに高さを指定し、ボタンが下部配置になるように、カバーのインナー要素に高さを指定して
display:flex;にし、VK ボタンはmargin-top:auto;で下に配置されるようにしています。
- カバーの背景が中身の内容量の高さに伸びるようにカバーに高さを指定し、ボタンが下部配置になるように、カバーのインナー要素に高さを指定して
背景色だけで実装する場合
背景色だけの場合は、VK Blocks Pro の「グリッドカラムカード」ブロックが大変便利です。
