[ 解決済 ] リンク文字のマウスホバーの下線

VWSとは フォーラム Lightning [ 解決済 ] リンク文字のマウスホバーの下線

[ 解決済 ] リンク文字のマウスホバーの下線

  • このトピックには6件の返信、2人の参加者があり、最後にpoohdai515により1年、 4ヶ月前に更新されました。
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #49975

    poohdai515
    参加者

    ■ 利用テーマとバージョン :
    Lightning Proバージョン: 8.9.1
    Lightning Skin Pale バージョン 8.1.2

    ◼︎質問
    テキストのリンク箇所にマウスホバーすると下線がつくエリア、つかないエリアがあるのは何か設定の違いでしょうか?
    ウィジェットエリアには下線が付く、
    固定ページのコンテンツエリアは付かない?

    グローバルメニュー以外は全てリンクにはホバーで下線が入るエフェクトにしたい思いご質問させていただきました。

    #49991

    以下の CSS で、マウスホバーすると下線がつくようになります。

    .****** a:hover{
    text-decoration: underline;
    }

    ****** はクラス名です。
    該当箇所のクラス名はデベロッパーツールで確認してください。

    場所によってはクラス名を複数指定しないと CSS が効かないことがあるかもしれません。

    #49993

    poohdai515
    参加者

    対馬さま

    いつもありがとうございます。
    固定ページのコンテナエリア内だと
    <p class=”******(クラス名)”>でも<span class=”******(クラス名)”>でもアンダーライン表示しませんでした。
    該当ページの追加CSSに!importantをつけても反映されないんでしょうかね・・・

    いつも初歩質問ばかりで本当にすみません

    #49996

    Pale のデモページ https://demo.dev3.biz/pale/guidance/dental/ を例に
    図解しますので、添付画像を見て①~⑦の手順通りにやってみてください。

    該当ページの追加CSSに!importantをつけても反映されないんでしょうかね・・・

    !important はできるだけ使わない方がよいです。

    上記の図解の通りやっても下線がつかない場合は、underline の後ろに半角スペースを空けて
    !important を追加してもよいと思います。

    • この返信は1年、 4ヶ月前に対馬 俊彦が編集しました。
    • この返信は1年、 4ヶ月前に対馬 俊彦が編集しました。
    Attachments:
    You must be logged in to view attached files.
    #50008

    poohdai515
    参加者

    対馬さま

    図解とてもわかりやすいです。本当にありがとうございます。
    固定ページの通常段落だと<p> のclassになるという事ですよね?

    .p a:hover{
    text-decoration: underline;
    }

    これを該当ページの追加CSSに入れても該当せず・・・
    ——

    そして私の質問の仕方がまずかったのですが、
    リンク文字に「マウスオン」した際に、アンダーラインが
    出る場所と、出ない場所があるのを統一したいな・・・と思ったのがそもそもの質問でした。

    同じhtmlを固定ページのコンテナと、ウィジェットに入れても
    アンダーラインの表示方法は違う

    これは、もう仕方ないんですかね・・・

    もしかしたら根本を勘違いしているズレた質問でしたら申し訳ありません・・・

    #50009
    .p a:hover{
    text-decoration: underline;
    }

    は間違いで、正解は

    p a:hover{
    text-decoration: underline;
    }

    です。

    段落の p はクラス名でないので . をつけません。

    <p class="******"> の ****** がクラス名です。

    ただし、上記の正解 CSS を追加してもたぶん反映されないと思います。
    理由は以下のページの「3.4. CSSの指定の強さ」を読んでください。

    できる!WordPressカスタマイズ #01 簡単なデザイン(CSS)カスタマイズ方法徹底解説

    指定が強い CSS がすでに存在するときは、それ以上の指定の強さが必要です。

    アンダーラインが出る場所と、出ない場所があるのを統一したいな・・・

    たぶん、以下の CSS を追加すれば、グローバルメニューも含めて
    すべてのテキストリンクにホバー時の下線をつけることができます。

    a:hover {
    text-decoration: underline !important;
    }

    今回の poohdai515 さんの場合、
    上記の CSS に加えてグローバルメニューのテキストリンクに
    クラス指定をつけて text-decoration: none !important; を指定するやり方もありますが、
    !important!important で上書きするのは変なかんじです。

    !important は他にやり方がない場合の最終手段ですので。

    該当箇所のクラス指定を調べて、個々に CSS を上書きしてやるのが
    正統な、破綻が起きないやり方だと思います。

    同じhtmlを固定ページのコンテナと、ウィジェットに入れても
    アンダーラインの表示方法は違う

    これは、もう仕方ないんですかね・・・

    はい、仕方ないです。
    テーマ制作者がそのように意図して作ったものなので。

    • この返信は1年、 4ヶ月前に対馬 俊彦が編集しました。
    • この返信は1年、 4ヶ月前に対馬 俊彦が編集しました。
    #50013

    poohdai515
    参加者

    対馬さま

    ご返信ありがとうございます!
    本当に勉強になります。

    制作者の意図なんだという箇所はそれに従う事にしました。
    しかし先ほどの図解、ディベロッパーのご説明でかなりの箇所をスムーズにカスタマイズできるようになりました。
    感謝です!!

7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • このトピックに返信するにはログインが必要です。