[Blogger] リンクに下線(アンダーライン)を追加する方法

2025/05/02

Blogger HTML/CSS


Bloggerの初期状態だとリンクに下線(アンダーライン)がなく、本文中でリンクが分かりにくいかと思います。

本記事ではCSSの追加でリンクに下線が入るようにする方法を解説します。



CSSの追加方法

左のメインメニューから【テーマ】を選択し、【カスタマイズ】をクリックします。

そこから【詳細設定】の【CSSを追加】を選択します。



【カスタムCSSを追加】にCSSを入力できます。

後述のCSSを入力したら保存をして、反映されているか実際にブログを確認しましょう。



リンクに下線を追加するCSS

記事内だけ

記事内のリンクにだけ下線を追加するには、以下のCSSを追加します。


.entry-content a:link {
text-decoration: underline;
}
.entry-content a:visited {
text-decoration: underline;
}


記事内だけの方がオススメです。


ブログ全体

ブログ全体のリンクに下線を追加するには、以下のCSSを追加します。


a:link {
text-decoration: underline;
}
a:visited {
text-decoration: underline;
}


ブログタイトルやサイドバーにも下線が入ります。



リンクに下線が入った!

CSSの追加だけで簡単にリンクに下線を入れることが出来たのではないでしょうか。



もし上手くいかなかった場合は、自分が参考にした以下のブログも参照ください。


参考ブログ様

実践プリズナートレーニング始めました【[Blogger]の記事内リンクのみに下線を付ける方法】

すたすた式【Blogger リンクの色の変更と下線追加】


また、マウスホバー(マウスをのせる)で下線が表示される方法もあります。

マウスホバーでリンクに下線(アンダーライン)を表示する方法で解説していますので、興味のある方は見てみてください。



にほんブログ村 ブログブログ ブログサービスへ にほんブログ村 ブログブログ ブログノウハウへ ブログノウハウランキング

このブログを検索

まとめ記事

現在の使用テーマ

EmporioからQooQ list版に変更しました。(2025年11月)

お問い合わせ

名前

メール *

メッセージ *




QooQ