以前、リンクに下線（アンダーライン）を追加する方法を解説しました。
記事のリンクに下線を追加してリンクは分かりやすくなったのですが、段々サイドやトップページのリンクも分かりやすくしたいと思うようになりました。
でも、全部のリンクに下線が入っていると邪魔かも？
そこでマウスをのせる動作でリンクの下線が変化する方法に変更してみました。
本記事ではマウスホバー（マウスオーバー）でリンクに下線が表示される方法と、それに合わせてスマホなどのマウスホバー不可なものへの対策などについて解説します。
CSSの追加方法
左のメインメニューから【テーマ】を選択し【カスタマイズ】をクリックします。
そこから【詳細設定】の【CSSを追加】を選択します。
【カスタムCSSを追加】にCSSを入力できます。
後述のCSSを入力したら保存をして、反映されているか実際にブログを確認しましょう。
マウスホバーでリンクに下線を表示するCSS
以下のCSSを追加してください。
全体以外にも記事本文だけやサイドバーだけのCSSもあるので、好みに合わせて選んでみてください。
全体
text-decoration: underline;
}
記事本文だけ
text-decoration: underline;
}
サイドバーだけ
text-decoration: underline;
}
モバイル表示だけリンクの下線を常時表示させるCSS
マウスホバーできるのはパソコンだけです。
スマホなどではリンクに下線が表示されず、分かりにくいままになってしまいます。
その対策として、スマホなどのモバイル表示だけリンクに下線を常時表示させることも可能です。
上記のCSSに加え、以下のCSSも追加してください。
こちらも全体以外にも記事本文だけやサイドバーだけのCSSもあるので、好みに合わせて選んでみてください。
全体
記事本文だけ
サイドバーだけ
リンクに下線を追加するCSSの削除方法
当ブログのリンクに下線（アンダーライン）を追加する方法や他の方法で既にリンクに下線を追加している場合、そちらのCSSを削除する必要があります。
CSSの削除はHTMLの編集で行います。
HTMLの編集手順
左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックして【バックアップ】をしましょう。
それが終わったら、同じ画面の【HTMLを編集】をクリックして編集画面を開きます。
HTMLの編集画面では、Ctrlキー+FキーでSearch: という検索欄を表示させることで検索ができます。
HTMLの編集が終わったらプレビュー画面で確認して、保存をします。
リンクに下線を追加するCSSの削除
HTMLの編集で、追加したCSSを検索します。
追加したものが思い出せない場合、text-decoration: underlineで検索して該当のCSSを探してみてください。
追加したCSSを丸ごと削除すればOKです。
不安なら以下のようなコメントアウトで無効にしてください。
/*無効にするコード*/
例えば当ブログの記事内だけリンクに下線を追加していた場合は、以下のようになります。
これで、先に追加したコードを無効にできます！
当ブログの下線のCSS（2025年8月更新）
何度か変更して、2025年8月時点では以下のようなCSSを採用しています。
a:hover {
text-decoration: underline;
}
.entry-content a{
text-decoration: underline;
}
.entry-content a:hover {
text-decoration: none;
}
上から順に解説すると
- 全体に対し、マウスホバーでリンクに下線あり
- 記事部分だけリンクに下線あり
- 記事部分だけマウスホバーでリンクの下線消去
となります。
下線を消すCSSはtext-decoration: noneです。
記事本文だけリンクに下線を表示させ、マウスホバーでリンク下線が消えるようにしました。
また気になったら適宜変更しようと思います。
リンクに下線を表示する方法は色々！
以前に解説した常時リンクに下線（アンダーライン）を追加する方法もあれば、本記事のようにマウスホバーで下線を表示させる方法もあります。
スマホなどのモバイル表示だけ常時表示させたりと、色々な組み合わせも可能です。
是非、自分好みのリンクにしてみてくださいね！
