[ 解決済 ] リンクのホバー色について

[leafletweb]

■ WordPress のバージョン
Version 7.1

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

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

■ テーマのバージョン
15.37.1

■ Pro Unit のバージョン
0.31.0

■ スキンの種類
Evergreen

■ スキンのバージョン
0.2.7

■ 期待する動作
リンク文字色（hover）を設定しマウスオーバー時に希望の色に変化するようにしたい

■ 自分で試した事
外観→カスタマイズ→色
のところでリンク文字色（標準）とリンク文字色（hover）を設定

■ 症状が発生するブラウザ
Chrome、edge、opera

■ 実際の症状
外観→カスタマイズ→色
のところでリンク文字色（標準）とリンク文字色（hover）を設定したところ
リンク文字色（標準）は設定したとおりの色になりますが
リンク文字色（hover）は何色に変更してもリンク文字色（標準）と同じ色で変化しません。

■ その他特記事項
今まで何歳とか作成していますがいずれも同様の症状が出ておりましたが、今までは特に問題は無かったのでそのままにしておりました。
この度はどうしてもマウスオーバーで文字色が変わるようにしたいためあちこち見てもわからず質問させて頂きました。
どうぞ宜しくお願い致します。

[Y.INABA]

leafletweb 様

ご質問いただいているところ恐れ入りますが、リンク色の変更をご検討いただいているのはどの箇所になりますでしょうか？
Lightningはデフォルトでテーマ独自のCSSを多く取り入れているため、改善希望の場所によってアドバイスは異なるかと思います。

該当箇所のスクリーンショットやHTMLソース等でお知らせいただけますと幸いです。

[leafletweb]

Y.INABA 様
ありがとうございます。

画像付きのボタンを使いたくてちょっと複雑なことをしてしまっています。
リストビューのスクリーンショットを添付しました。

HTMLは添付画像の赤枠の中の「カラム」のところしか「HTMLとして編集」が出てこなかったので
そこのソースは以下の通りです
<p style=”font-size:1.2rem”>リンク文字</p>

最終的に行いたいことを申し上げますと
ボタンのテキスト左側に写真画像を配置して
マウスオーバーした時に文字または背景色が変わるようにしたいと思っております。

しかしながらパターンライブラリーにある
「ボタン_hover時カスタムCSS」これを利用するのもありかなとも思っておりますが
画像を入れてみたりをまだ試しておりません。

すみませんがどうぞ宜しくお願い致します。

Attachments:

You must be logged in to view attached files.

[石川＠Vektor,Inc.]

弊社製品のご利用ありがとうございます。株式会社ベクトルの石川と申します。

外観 > カスタマイズ > 色 の リンク文字色（標準）/ リンク文字色（hover） については私の環境では確認する限り問題なく動作いたしました。

> ボタンのテキスト左側に写真画像を配置して
> マウスオーバーした時に文字または背景色が変わるようにしたい

テキストについては問題なく動作するので、
「ボタンブロック」の話であれば対処がかわってきます。

カラムブロックで１つのカラムに画像、１つのカラムにテキスト という話なら通常のテキストリンクなら効くはずです。
効かないなら配置しているエリア（フッターとかサイドバー？）の問題だったり、
背景の色を変えるなら カスタマイズ の指定色はあくまで文字なので効かないのでCSSを書く必要があります。

実際の該当ページのURLと箇所を指定いただくか、
該当部分のコードと、それをどやってどこに配置しているかを記載いただくと回答がしやすいです。

[Y.INABA]

leafletweb 様

ご教示いただきありがとうございます。
意図としては、カラムの外側にあるOuterブロックにリンクを設定し、ホバー時に文字色や背景色を変更するということでよろしいでしょうか？

そうであるならば、リンクを設定したOuterブロックに以下のようなカスタムCSSを挿入いただければ解決するかと思います（色は一例です）。
お試しいただけますと幸いです。

selector:hover {
  background-color: #000;
  color: #fff;
}

※Outerに関しては背景設定と競合しますので、必要に応じてCSSの追記や該当設定のご変更のほどよろしくお願いします。
※「グループ」ブロックについてもそうなのですが、リンク時のブロックの構造上、どうしてもカスタマイザーの「ホバー時の文字色」が効かない場合というのはございます。そういったときに活かしていただけますと幸いです。

Attachments:

You must be logged in to view attached files.

[leafletweb]

石川＠Vektor,Inc.様、Y.INABA 様
ありがとうございます。本文のテキストはうまく行っていましたが
サイドバーやフッター、ボタンブロックでもなく固定ページコンテンツエリア内で
グリッドカラム→Outerブロック→カラムとなっていて何階層にもしてしまったのが良くないのか？
不明ですが
その後のY.INABA 様の方法でうまくいきました。
大変助かりました。ありがとうございました。

[Y.INABA]

leafletweb 様

解決いただいたようで何よりです。

補足ですが、「Outer」ブロックや「グループ」ブロックなど、ブロックごとリンクを設定する場合、擬似的にブロック全体にリンクが設定されるようになっております。
ブロック内のコンテンツ・テキストに直接リンクが設定されるわけではなく、実際のリンク（aタグ）はブロック内とは別の箇所に記載されています。
ホバー色が反映されない「ように見える」のはそのためです。

もちろん、ブロック内のテキストに直接リンクが設定されている場合は別です。
以下の「リンク文字」に直接リンクを設定いただいた上で、「リンク文字」の箇所に直接ポインタを当てると、カスタマイザー内「ホバー色」がきちんと反映されるかと思います。

<p style=”font-size:1.2rem”>リンク文字</p>

[投稿者]

投稿