この記事ではBloggerのブログ記事内に出てくるリンク部分だけに下線を追加するカスタマイズをご紹介します。
一般的なリンク下線の追加方法
Bloggerは標準仕様ではリンクは青色文字で示されるだけで、よくWebサイトで見かけるようなリンクに下線が付いて目立つ仕様にはなっておりません。そこでCSSをカスタマイズすることで、Bloggerブログ内のリンクに下線を追加する方法があります。
よく見かける一般的なカスタマイズは下記です。
テーマ画面
↓
↓
ブログで使用中の下のカスタマイズボタン
↓
↓
Blogger テーマデザイナー
↓
↓
左上の項目（上級者向け）
↓
↓
CSSを追加
↓
カスタムCSSを追加 という白枠の中に以下のコードを貼り付けます。
a:link {
text-decoration: underline;
}
a:visited {
text-decoration: underline;
}
このような感じです。
これでリンクに下線が付く設定となるのですが、この設定のままだと、Blogger内の全てのリンクに下線が付いてしまうスタイルとなってしまいます。
つまり、ブログタイトルにも、ラベルにも、リンクの貼られたすべての個所に下線が付いてしまうのです。
これですと、ブログ記事内のリンクだけに下線を付けたいと 考えていた人の場合、ちょっと意図が違ってしまいますよね。
ブログ記事内のリンクだけに下線を追加する方法
そこで、追加するCSSを「ブログ記事内だけに指定する」ような形とすれば、意図通りの表示になります。
#single-content a:link {
text-decoration: underline;
}
#single-content a:visited {
text-decoration: underline;
}
text-decoration: underline;
}
#single-content a:visited {
text-decoration: underline;
}
#single-content という指定を追加するだけでブログ記事内のリンクだけに下線をつけることができます。
