このパターンではテーマ「Twenty Twenty-Four」「Lightning ( G3 / theme.json )」「X-T9」での使用を想定しています。他のテーマでは崩れる可能性がありますのでご注意ください。
このパターンではプラグイン「VK Blocks Pro (有料)」と、独自にカスタマイズしたCSSを使用しています。
設定のコツ
- カバーブロックにVK Blocks Pro の「カスタム CSS」で、通常時は背景色と wp-block-cover__inner-container の中身が透明になり、hover時に背景色が半透明、 wp-block-cover__inner-container の中身が表示されるようなCSSを書いています。
テキスト色や背景色の色を変えたい場合は、カバーブロックの設定画面の【スタイル】 >「色」>「テキスト」・「オーバーレイ」の色からお好みで変えてください。
背景色の不透明度は「カスタム CSS」にopacity:0.5書いてありますので、そちらからお好みで変えてください。
中の要素はご自由に増やしたり変えたりしてください。
注意点
- スマホやタブレットのタッチデバイスには「ホバー」という概念がないため、ユーザーが要素をタップしたときにスタイルが変化します。あくまで補助的な内容を入れるようにしましょう。
