Bloggerのトップページ（記事一覧）を整えていると、「サムネイル画像にマウスを乗せた（ホバーした）時に、連動して記事タイトルにも下線がつけばいいのに…」と思ったことはありませんか？
この記事では、Bloggerの記事一覧カードにおいて、「画像にホバーした時」にも「タイトルに下線」が付くようにするCSSカスタマイズ方法を、初心者にもわかりやすく解説します。
この方法を使えば、「カテゴリ名」にマウスを乗せた時には下線を出さない（除外する）ことができるため、読者の誤クリックを防ぎ、Google AdSenseの「ナビゲーション誤認」のリスクも低く抑えられます。コピペで簡単に実装できるので、ぜひ試してみてください！
- タイトル上にホバー → タイトルに下線が付く
- 画像上にホバー → タイトルに下線が付く（今回実現したいこと）
- カテゴリ上にホバー → 下線は付かない（誤操作の防止）
※クリックできる場所が直感的に伝わるため、読者の操作性（UI/UX）が劇的に向上します。
手順①：自分のブログの「HTML構造」を確認する
CSSを追加する前に、まずはご自身のBloggerテーマ（QooQやVaster2など）の記事一覧部分が、次のような標準的なHTML構造になっているかを確認してください。
<article class="list-item">
<!-- ①画像のリンク -->
<a href="記事URL">
<img class="list-item-img" src="..." />
</a>
<!-- ②タイトルとカテゴリのブロック -->
<div class="list-item-inner">
<h3 class="list-item-title">
<a href="記事URL">記事タイトル</a>
</h3>
<p class="list-item-category">カテゴリリンク</p>
</div>
</article>
【重要ポイント】
「画像のリンク（先頭の <a>タグ）」の直後に、タイトルを囲む <div class="list-item-inner"> が来ている順序であることが絶対条件です。この「隣り合っている構造」を利用することで、CSSの隣接セレクタ（+）を使って「画像ホバー時にタイトルを操作する」ことが可能になります。
手順②：CSSを追加する場所を開く
Bloggerの管理画面から、以下の手順でCSSの追加画面を開きます。
- 左側メニューの「テーマ」をクリック
- 「カスタマイズ」ボタンをクリックして「テーマデザイナー」を開く
- 左側メニューの下の方にある「詳細設定」を開く
- 一番下にある「CSSを追加」をクリック
※HTML編集画面（<b:skin>の中）に直接書くと、Blogger独自のパーサー（文法チェック）によって保存エラーになることがあるため、この「テーマデザイナーから追加する手順」が最も安全です。
手順③：コピペでOK！追加するCSSコード
先ほど開いた「CSSを追加」の入力欄に、以下のコードをすべてコピペして、右下の「保存（フロッピーアイコン）」をクリックしてください。
CSS
/* ▼ ①記事一覧：タイトル通常時は下線なし */
.list-item-title a {
text-decoration: none;
color: inherit;
}
/* ▼ ②タイトル自体にホバーした時に下線 */
.list-item-title a:hover,
.list-item-title a:focus {
text-decoration: underline;
}
/* ▼ ③【重要】画像にホバーした時、直後のタイトルへ下線を出す魔法のコード */
.list-item > a:hover + .list-item-inner .list-item-title a {
text-decoration: underline;
}
/* ▼ ④お好みで：下線の見え方をオシャレに微調整（対応ブラウザのみ） */
.list-item-title a {
text-underline-offset: 3px; /* 文字と下線の間隔を少し空ける */
text-decoration-thickness: 2px; /* 下線を少し太くする */
}
この指定では、意図的に「カテゴリ部分（.list-item-category）」への指示を外しています。そのため、カテゴリ名にマウスを置いても下線は出ず、読者が間違えてカテゴリをクリックしてしまう誤誘導を完全に防ぐことができます。
BloggerのCSSカスタマイズに関するよくある質問（FAQ）
- Q. テンプレート保存時に「エラー」が出てしまいます。
- A. HTML編集画面（
<b:skin>内）に直接貼り付けていませんか？Bloggerは「>（大なり記号）」などをエラーとして弾くことがあります。必ず「テーマデザイナー → 詳細設定 → CSSを追加」の欄に入力して保存してください。 - Q. CSSを入れたのに、画像にホバーしても下線が付きません。
- A. ご利用のテーマのHTML構造が、本記事の前提と異なっている可能性があります。「先頭の画像リンク」の直後に「タイトルの入ったdiv（
.list-item-inner）」が来ていないと+（隣接セレクタ）の指定が効きません。間に別の要素（日付など）が挟まっていないか、クラス名が合っているか（例：.list-itemなのか.cardなのか等）を確認し、ご自身のテーマに合わせてコードのクラス名を書き換えてください。 - Q. AdSenseの「ナビゲーション誤認」によるペナルティにはなりませんか？
- A. 大丈夫です。本手法は「カード全体を無理やり巨大なリンク化」するのではなく、あくまで「画像かタイトルに触れた時に、見た目（下線）だけを変化させる」安全なCSSの手法です。実際のクリック領域を過度に広げているわけではないため、AdSenseのポリシー違反（誤クリック誘発）のリスクは非常に低いです。
当ブログで紹介しているBloggerの必須カスタマイズをひとつの記事にまとめました！デザインの最適化から収益化の基盤作りまで、コピペでできる厳選テクニック8選を完全網羅しています。ブログをさらにパワーアップさせたい方はぜひご覧ください！
まとめ：安全なCSSでクリック率（CTR）を高めよう
画像にホバーした時にもタイトルに下線が付くようにするには、「HTMLの順序（画像リンク → 直後にタイトル）」を活かしたCSSの『＋（隣接セレクタ）』を使うのが最もスマートで安全な方法です。
この一手間を加えるだけで、PCから閲覧した読者が「あ、ここクリックできるんだな」と直感的に気づきやすくなり、ブログ全体の回遊率アップに繋がります。カテゴリを除外して誤誘導を避けつつ、読者にとって分かりやすい親切なブログデザインに整えましょう！
