[ 質問者返信待ち ] マウスを当てた時にリンクに下線を表示する

[SUGI]

■ WordPress のバージョン
6.8.2

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

■ テーマの種類
X-T9

■ テーマのバージョン
1.34.5

■ 期待する動作
X-T9 WordPress Themeの設定ガイドサイト［https://x-t9.vektor-inc.co.jp/docs］でリンク先がある文章において、普段は下線が表示されていないのに、マウスを当てると下線が表示されるのはどのように設定しているのでしょうか？

■ 自分で試した事
タイポグラフィの設定を見ましたが、そのような設定方法はありませんでした。

■ 症状が発生するブラウザ
Microsoft Edge（バージョン 140.0.3485.54 ）

■ 実際の症状
デフォルト設定ではリンクについて、装飾を「無し」にするか、「下線」もしくは「打消し線」のみしかなく、御社のサイトのように、マウスを当てると下線になりません。

[うなこ]

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

まずは、設定ガイドページは、VK ExUnit Blocks の 「子ページ一覧」ブロックを使用しています。
このブロックには以下のCSSがデフォルトで含まれており、リンクhover時に下線が表示されます。

.veu_childPage_list .childPage_list_body:hover{
    text-decoration: underline;
}

一方、X-T9 のサイト全体でリンクhover時に下線を表示したい場合は、「追加CSS」に以下のCSSを書いていただきますと実装できると思います。

/* リンクの下線設定 */
a:where(:not(.wp-element-button)){
text-decoration: none;
}
a:not(.wp-element-button):hover {
text-decoration: underline !important;
}

追加 CSS を追加する場所につきましては、以下のページの「ブロックテーマの場合」をご確認ください。

追加 CSS を追加する場所

[SUGI]

ありがとうございます。ご教授いただいたとおりに操作・設定して、すぐ出来ました。ありがとうございました。
ひょっとして設定画面からの操作ではなく、CSSかもと思っていたのですが、聞いて良かったです。

[うなこ]

SUGIさま

ご返答ありがとうございます。解決されたとのことで安心いたしました。

すみません、今気づいたのですが、先ほどご提案したCSSでは !important を付けておりまして、
!important は「ほかの指定よりも強制的に優先させる」という意味がありまして、意図せず他のブロックにも下線が出てしまう場合があるため、こちらを外して以下のCSSに変更いただくと安心です。

/* リンクの下線設定 */
a {
  text-decoration: none;
}
a:not(.wp-element-button):not(.wp-block-pages-list__item__link):hover {
  text-decoration: underline;
}

どうぞよろしくお願いいたします

[SUGI]

!importantを外す旨、了解致しました。先のご返答と後のご返答でどのように画面が変わるか確かめてはいませんが、とりあえず、無難な方の後者に修正します。わざわざありがとうございました。

[投稿者]

投稿