[ 解決済 ] コピーしたパターンを修正したい

[翼佐藤]

■ WordPress のバージョン
6.6.2

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
0.6.0

■ Pro Unit のバージョン
0.28.0

■ スキンの種類
Origin III

■ 期待する動作
カバーブロックにリンクを設定し、ホバー時に背景画像を拡大する効果を使いたく、VKパターンライブラリの工務店のバナー通りにしたい。

■ 自分で試した事
`selector:hover {
background: #f5f5f5; /* 背景色の変更 */
color: #333; /* テキストの色の変更 */
border: 2px solid #ccc; /* ボーダーの追加 */
transform: scale(1.05); /* 少し拡大 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影を追加 */
transition: all 0.3s ease-in-out; /* なめらかなトランジション */
}
以上をカスタムcssに入力しました。

■ 症状が発生するブラウザ
Google Chrome

■ 実際の症状
パターンライブラリからコピーして使っていましたが、中央のテキストより上の範囲がリンクから外れる（ホバーして拡大はするがクリックできない）症状が出てしまいました。
カスタムcssでは、カバーブロック自体が拡大され、影が薄くなる効果も消えてしまいました。

[うなこ]

お世話になっております、パターンライブラリのご利用ありがとうございます。

カスタムcssでは、カバーブロック自体が拡大され、影が薄くなる効果も消えてしまいました。

cssを拝見しました。

selector:hover　この書き方ですと、カバーブロック全体を対象としているので、カバーブロック自体が拡大します。
（この辺りは、ブラウザの検証ツールなどを使用してクラス名を確認して、背景画像の部分に対してcssを書くとうまくいくのではないかなと思います。）

パターンライブラリからコピーして使っていましたが、中央のテキストより上の範囲がリンクから外れる（ホバーして拡大はするがクリックできない）症状が出てしまいました。

おそらくですが、カバーブロックの中にグループブロックがあり、グループブロックの方にリンクを設置しているのではないかと思います。

VK パターンライブラリに、hover時に背景画像が拡大して背景画像が薄くなり影がつくような、ご希望に近いバナーを作成しました。
こちらからコピーして、微調整していただくと良いかもしれませんがいかがでしょうか。

求人バナー_カバーに全体リンク_hover時エフェクト

ご検討よろしくお願いいたします。

[翼佐藤]

お世話になっております。
ご回答ありがとうございます。

伺った内容をもとに調査致しました。

現在カバーの中に背景画像は入れておらず色指定だけしています。
→背景画像を入れたところ、imgタグ確認できたのでそのクラスを入れると画像のみ拡大されることが確認できました。
ただ今回は背景画像を入れずに単色のみを使用し、カバー全体をhover時に拡大することにしましたので、現状のままで解決としました。

パターンライブラリの構造では、hover時に薄いフィルターのように白っぽくなる効果があったと思いますが、こちらが機能しておりません。

今回工務店のパターンライブラリの、会社案内から役立ちブログまでの箇所を流用しておりますが、hover時に色が変わる効果はカスタムCSSに書かれていなかったと思うのですが、こちらはカスタムCSSを利用せず標準の機能で実装可能なのでしょうか？

ご回答にあったカバーブロック内の構造ですが、カバーブロック直下にボタンブロックがあるだけで、特にグループブロックは使用しておりません。

Attachments:

You must be logged in to view attached files.

[うなこ]

お世話になっております。

内容を確認しまして、元々の工務店で使用しているバナーですが、少し複雑な構成をしていましたので、新たにご要望に近いパターンをVK パターンライブラリに登録しました、
工務店で使用しているバナーはカバーブロックやボタンブロックを使用していますが、今回は背景画像を使用しないとのことでしたので、グリッドカラムカードブロックで実装してあります。

横並びバナー_グリッドカラムアイテムに全体リンク_hover時エフェクト

イメージと違う場合は以下で説明させていただきましたので、ご確認ください。

ーーー

今回工務店のパターンライブラリの、会社案内から役立ちブログまでの箇所を流用しておりますが、hover時に色が変わる効果はカスタムCSSに書かれていなかったと思うのですが、こちらはカスタムCSSを利用せず標準の機能で実装可能なのでしょうか？

こちらのパターンはカバーブロックのリンク機能を実装する前に作成したパターンになるため、「VK Block Patterns」プラグインを使用して、カバーブロックとボタンブロックで、ボタンブロックのリンクをカバー全体に広がるようなcssをプラグイン側で書いております。

hover時に色が薄くなる効果は、opacityで半透明にして実装しています。
::before要素で半透明の黒色を全体にいれており、hover時に透明になるようにしています。

selector .vk_button:not(.vkp_button-through-arrow)::before{/*背景スライドボタンは除外しないとおかしくなる*/
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  background: #000;
  opacity:0.4;
  transition: all 0.5s ease-out;
  z-index:-1;
}
selector .vk_button:hover::before {
  opacity: 0;
  transition: all 0.5s ease-out;
}

ご回答にあったカバーブロック内の構造ですが、カバーブロック直下にボタンブロックがあるだけで、特にグループブロックは使用しておりません。

画面キャプチャを確認しましたところ、カバーブロックの上に「グリッド」が入っておりますが、このグリッドは必要なのでしょうか。もしかすると、リンクの範囲がおかしくなる原因かもしれないと思いお聞きしました。

ご確認、よろしくお願い致します。

[翼佐藤]

パターンまで作成いただきましてありがとうございました。
こちらのパターンを用いて希望の動きが実装できました。

[投稿者]

投稿