グリッドカラム_カバーブロックの背景の高さを揃えてボタン下付け

Lightning

【はじめて利用する方へ（ユーザー登録していない方）】

ユーザー登録をしなくても、無料パターンはコピーしてそのままご利用いただけます

お気に入り機能やプレミアムパターンのコピーなど、追加機能をご利用いただくには、「Vektor Passport」(もしくはLightning G3 Pro Pack) のライセンスが有効である必要があります。

ライセンスを購入する場合はこちら⇒１年・３年・５年

VK Pattern Library のユーザー登録は VWS のマイアカウントからのみとなります。

VK Pattern Library のユーザー登録の流れはこちらをご覧ください。

【VK Patterns Library のユーザー登録がお済みの方へ】

以下の機能はログイン時のみご利用いただけます。ご利用の際は ログイン してください。

ただし、Vektor Passport (もしくはLightning G3 Pro Pack) のライセンスが無効な場合は、これらの機能はご利用いただけません。

ライセンスを購入する場合はこちら⇒１年・３年・５年

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

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

グリッドカラムアイテム内に設置したカバーブロックの中の内容量に応じて背景画像の高さが伸びてボタンは下部配置になるバナーです。
VK Blocks Proの「カスタムCSS」で実装しています。
- カバーの背景が中身の内容量の高さに伸びるようにカバーに高さを指定し、ボタンが下部配置になるように、カバーのインナー要素に高さを指定してdisplay:flex;にし、VK ボタンはmargin-top:auto;で下に配置されるようにしています。

背景色だけの場合は、VK Blocks Pro の「グリッドカラムカード」ブロックでCSSを書かずにボタンの位置が下部になります。CSSを書かなくて良いので大変便利です。

グリッドカラムアイテム内に設置したカバーブロックの中の内容量に応じて背景画像の高さが伸びてボタンは下部配置になるバナーです。
VK Blocks Proの「カスタムCSS」で実装しています。
- カバーの背景が中身の内容量の高さに伸びるようにカバーに高さを指定し、ボタンが下部配置になるように、カバーのインナー要素に高さを指定してdisplay:flex;にし、VK ボタンはmargin-top:auto;で下に配置されるようにしています。