Blogger「Tokyo」「QooQ」でリンクに下線をつける方法

Bloggerの日本語テンプレート「Tokyo」と「QooQ」で、ブログ記事のリンクに下線（アンダーライン）をつける方法です。

標準では、リンクの部分の文字色が変わるだけで、下線はついていません。

なので、せっかくのリンクに気付かれないこともあるかと思います。

リンクだということをより分かりやすくするために、下線を入れてみます。

CSSを追加

Bloggerの管理画面で「テーマ」をクリック後、「カスタマイズ」をクリックします。

テーマデザイナーの画面が開いたら、「上級者向け」→「CSSを追加」をクリックします。

次のコードをコピーして貼り付けてください。

Tokyoの場合

/*リンクに下線あり*/
 a:link {
text-decoration: underline;
}

/*タイトルの下線なし*/
h3 a:link{
text-decoration: none;
}

/*ナビゲーションバーの下線なし*/
#navigation a:link{
text-decoration: none;
}

/*ラベルの下線なし*/
.mycategory  a:link{
text-decoration: none;
}

/*サイドバーのリンク下線なし*/
#sub-content a:link{
text-decoration: none;
}

/*SNSボタンの下線なし*/
#share-icon a:link{
text-decoration: none;
}

/*関連記事下線なし*/
#mrp-content a:link{
text-decoration: none;
}

※↑サイドバーとSNSボタンのコードを追加しました。（2019/11/27)
※関連記事のコードを追加しました。（2019/11/28)

QooQの場合

/*リンクに下線あり*/
a:link {
text-decoration: underline;
}

/*記事タイトルの下線なし*/
h3 a:link{
text-decoration: none;
}

/*ブログタイトルの下線なし（トップページ）*/
h1 a:link{
text-decoration: none;
}

/*ブログタイトルの下線なし(個別記事）*/
#header-title a:link{
text-decoration: none;
}

/*ラベルの下線なし（トップページ）*/
.list-item-category  a:link{
text-decoration: none;
}

/*ラベルの下線なし(個別記事）*/
#single-header-category a:link{
text-decoration: none;
}

/*ナビゲーションバーの下線なし*/
#navigation a:link{
text-decoration: none;
}


/*サイドバーのリンク下線なし*/
#sub-content a:link{
text-decoration: none;

/*ヘッダーSNSボタンの下線なし*/
#single-header .single-share a:link{
text-decoration: none;
}

/*フッターSNSボタンの下線なし*/
#single-footer .single-share a:link{
text-decoration: none;
}

※↑サイドバーとSNSボタンのコードを追加しました。（2019/11/27)

コードを貼り付けたら右上の「ブログに適用」ボタンを押してください。

これでブログ記事のリンク（タイトルやラベル以外）に下線がついていると思います。

これは、一番上のコードですべてのリンクに下線をつけて、それ以降のコードで余分な下線を取り除くという方法です。（まだ一部残っている所があります）

他にもっといい方法があるのかもしれませんが、今の所この方法が一番うまくいっているのでご紹介しました。

※「Tokyo」「QooQ」以外のテーマにはこのコードでは適用されないと思いますので、予めご了承ください。

▼こちらもおすすめ♪
→ホームへ戻る