Blogger記事一覧をカスタマイズ｜画像ホバーでタイトルに下線を付ける方法と追加CSS手順

この記事では、Bloggerの「記事一覧カード」で画像にホバーしてもタイトルに下線が付くようにする方法を、初心者にもわかりやすく1つずつ解説します。カテゴリ部分は除外するので誤クリックを誘導せず、AdSenseのナビゲーション誤認リスクも低く抑えられます。

完成イメージ

• タイトル上にホバー → タイトルに下線
• 画像上にホバー → タイトルに下線
• カテゴリ上にホバー → 下線は付かない（除外）

クリックできる場所が直感的に伝わるため、読者の操作性が向上します。

手順①：CSSを追加する場所

レイアウト → テーマデザイナー → 詳細設定 → CSSを追加 に、以下のコードを貼り付けて保存します。テンプレートの <b:skin> 内に直接書くとBloggerのパーサーで保存エラーになることがあるため、この手順が安全です。

手順②：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>）」の直後に .list-item-inner がある順序であること。これによりCSSだけで「画像ホバー → タイトル下線」を実現できます。

手順③：コピペでOKの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-inner 内のタイトルへ下線 */
.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; /* 下線の太さ */
}

この指定ではカテゴリには作用しません。カテゴリにマウスを置いても下線は出ないため、誤誘導を避けられます。

よくある質問（FAQ）

Q1. テンプレート保存時にエラーが出ます。

A. 「テーマデザイナー → 詳細設定 → CSSを追加」に入れてください。<b:skin> 内はBloggerのパーサーが厳しく、疑似クラス等でエラーになりやすいです。今回のコードは追加CSSに入れる前提で作っています。

Q2. 画像にホバーしても下線が付きません。

A. HTML順序を見直してください。先頭の画像リンクの直後に .list-item-inner が来ていないと + .list-item-inner の指定が効きません。間に別要素が挟まっていないか確認を。

Q3. カテゴリ上にホバーした時だけ下線を消したい。

A. 本記事のCSSは最初からカテゴリを「対象外」にしています（カード全体hoverは使っていません）。過去に入れた .list-item:hover .list-item-title a{...} のような指定が残っていれば削除してください。

Q4. スマホでは効果が分かりにくいのですが？

A. スマホは「hover」の視覚変化が出にくい環境です。本カスタマイズは主にPCでの見やすさ改善が狙いです。スマホではタップ領域（画像・タイトル）が近すぎないかの確認を優先しましょう。

Q5. アクセシビリティは大丈夫？

A. キーボード操作でタイトルリンクにフォーカスが当たると下線が出ます（:focus）。必要なら :focus-visible を追加できますが、Blogger保存エラーの原因になることがあるため、まずは現状での運用がおすすめです。

Q6. AdSenseの「ナビゲーション誤認」に引っかかりませんか？

A. 本手法はカード全体を巨大リンク化せず、あくまで「画像orタイトルに触れたときにタイトルに下線」を出すだけです。クリック領域を過度に拡張しないため、ナビゲーション誤認のリスクを抑えられます。

まとめ

画像にホバーしてもタイトルに下線が付くようにするには、HTMLの順序（画像リンク→直後に .list-item-inner）を活かしたCSSを「レイアウト → テーマデザイナー → 詳細設定 → CSSを追加」に入れるのが最もシンプルで安全です。カテゴリを除外して誤誘導を避けつつ、読者にとって分かりやすい記事一覧に整えましょう。