はじめに

WordPressのクエリーループや投稿一覧では、通常、クリックできるのは投稿タイトルの文字部分だけです。

たとえば、次のような投稿一覧がある場合です。

<li class="wp-block-post">
  <div class="wp-block-group">
    <h3 class="wp-block-post-title">
      <a href="https://example.com/post-url/">投稿タイトル</a>
    </h3>    <div class="wp-block-post-date">
      <time>
        <a href="https://example.com/post-url/">2026年4月27日</a>
      </time>
    </div>
  </div>
</li>

この場合、クリックできるのは基本的に「投稿タイトル」や「日付リンク」の部分だけです。

しかし、ユーザー目線で考えると、投稿一覧の1行全体、つまりli全体をクリックできた方が操作しやすくなります。

この記事では、WordPressの投稿一覧でli全体をリンク化する方法を、CSSだけで実現する方法と、Code Snippetsで使えるPHP版に分けて解説します。

やりたいこと

今回やりたいことは、投稿一覧のこの部分です。

<li class="wp-block-post">
  投稿タイトルや日付が入っている部分
</li>

このli全体をクリックできるようにすることです。

つまり、タイトルの文字だけではなく、投稿一覧の1行全体にマウスを乗せてクリックできる状態にします。

liタグをaタグで囲まない方がよい理由

最初に考えがちなのは、liタグ全体をaタグで囲む方法です。

<a href="投稿URL">
  <li>投稿内容</li>
</a>

しかし、この方法はあまりおすすめしません。

理由は、WordPressのブロックエディターやクエリーループのHTML構造を崩す可能性があるためです。

また、すでに投稿タイトルや投稿日にaタグが入っている場合、さらに外側をaタグで囲むと、リンクの中にリンクが入るような構造になってしまいます。

HTMLとして不自然になり、クリックできない、レイアウトが崩れる、ブラウザによって挙動が変わる、といった問題が起きる可能性があります。

そのため、今回はHTMLを変更せず、CSSだけでクリック範囲を広げる方法を使います。

結論：タイトルリンクをli全体に広げる

今回使う方法は、投稿タイトルにある既存のaタグを利用します。

具体的には、タイトルリンクの疑似要素である

a::after

を使って、クリックできる範囲をli全体に広げます。

HTMLはそのままで、CSSだけを追加します。

追加するCSS

まずは、以下のCSSを追加します。

.wp-block-query .wp-block-post-template > li.wp-block-post {
  position: relative;
  cursor: pointer;
}.wp-block-query .wp-block-post-template > li.wp-block-post .wp-block-post-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
}.wp-block-query .wp-block-post-template > li.wp-block-post:hover {
  background: #f7f7f7;
}.wp-block-query .wp-block-post-template > li.wp-block-post:hover .wp-block-post-title a {
  text-decoration: underline;
}

このCSSを追加すると、クエリーループ内の投稿一覧で、li全体がクリック対象になります。

CSSを追加する場所

CSSは、以下のいずれかに追加します。

方法1：追加CSSに入れる

WordPress管理画面から設定する場合は、以下の場所に入れます。

外観 → カスタマイズ → 追加CSS

または、ブロックテーマの場合は次の場所です。

外観 → エディター → スタイル → 追加CSS

テーマやWordPressのバージョンによって表示場所が少し異なる場合があります。

方法2：テーマのstyle.cssに入れる

子テーマを使っている場合は、子テーマのstyle.cssに追加しても問題ありません。

ただし、親テーマのstyle.cssを直接編集すると、テーマ更新時に消える可能性があります。

そのため、直接テーマを編集する場合は、子テーマ側に追加するのがおすすめです。

Code Snippetsで追加する場合

CSSだけではなく、Code Snippetsにまとめて入れたい場合は、PHPスニペットとして追加できます。

Code Snippetsで新規スニペットを作成し、以下を追加します。

add_action('wp_head', function () {
    ?>
    <style>
    .wp-block-query .wp-block-post-template > li.wp-block-post {
      position: relative;
      cursor: pointer;
    }    .wp-block-query .wp-block-post-template > li.wp-block-post .wp-block-post-title a::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 10;
    }    .wp-block-query .wp-block-post-template > li.wp-block-post:hover {
      background: #f7f7f7;
    }    .wp-block-query .wp-block-post-template > li.wp-block-post:hover .wp-block-post-title a {
      text-decoration: underline;
    }
    </style>
    <?php
});

この方法なら、テーマファイルを直接編集せずにCSSを追加できます。

CSSの意味を解説

liにposition: relativeを指定する

.wp-block-query .wp-block-post-template > li.wp-block-post {
  position: relative;
  cursor: pointer;
}

ここでは、投稿一覧のliに対して

position: relative;

を指定しています。

これは、あとで使う

position: absolute;

の基準をliにするためです。

この指定がないと、クリック範囲が意図しない場所まで広がる可能性があります。

また、

cursor: pointer;

を指定することで、マウスを乗せたときにクリックできる見た目になります。

タイトルリンクの疑似要素を広げる

.wp-block-query .wp-block-post-template > li.wp-block-post .wp-block-post-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
}

ここが一番重要です。

タイトルリンクの

a::after

を使って、透明なクリック領域を作っています。

content: "";

で疑似要素を作成し、

position: absolute;

で自由に配置できるようにします。

そして、

inset: 0;

によって、上下左右すべてを0にします。

これは、次の指定と同じ意味です。

top: 0;
right: 0;
bottom: 0;
left: 0;

つまり、li全体に透明なリンク領域を広げているということです。

z-indexでクリック範囲を前面に出す

z-index: 10;

を指定することで、透明なリンク領域を前面に出しています。

これにより、liの余白部分をクリックしても、タイトルリンクが反応するようになります。

ホバー時の見た目を付ける

.wp-block-query .wp-block-post-template > li.wp-block-post:hover {
  background: #f7f7f7;
}

この指定により、投稿一覧にマウスを乗せたとき、背景色が薄く変わります。

これがあると、ユーザーに「ここはクリックできる」と伝わりやすくなります。

背景色はサイトのデザインに合わせて変更して問題ありません。

background: #f7f7f7;

たとえば、もう少し薄くしたい場合は次のようにできます。

background: #fafafa;

タイトルに下線を付ける

.wp-block-query .wp-block-post-template > li.wp-block-post:hover .wp-block-post-title a {
  text-decoration: underline;
}

投稿一覧にマウスを乗せたとき、タイトルに下線を表示します。

これも必須ではありませんが、リンクであることが分かりやすくなるため、入れておくと親切です。

下線が不要な場合は、この部分を削除しても大丈夫です。

この投稿一覧だけに適用したい場合

先ほどのCSSは、

.wp-block-query

に対して指定しているため、サイト内のクエリーループ全体に影響する可能性があります。

特定の投稿一覧だけに適用したい場合は、ブロックに追加CSSクラスを付ける方法がおすすめです。

たとえば、対象のクエリーブロックや親グループに、以下の追加CSSクラスを設定します。

full-post-link-list

その場合のCSSはこちらです。

.full-post-link-list .wp-block-post-template > li.wp-block-post {
  position: relative;
  cursor: pointer;
}.full-post-link-list .wp-block-post-template > li.wp-block-post .wp-block-post-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
}.full-post-link-list .wp-block-post-template > li.wp-block-post:hover {
  background: #f7f7f7;
}.full-post-link-list .wp-block-post-template > li.wp-block-post:hover .wp-block-post-title a {
  text-decoration: underline;
}

この方法なら、指定した投稿一覧だけに全面クリック化を適用できます。

サイト全体に影響させたくない場合は、この方法が安全です。

クリックできない場合の確認ポイント

CSSを追加してもクリック範囲が広がらない場合は、以下を確認してください。

投稿タイトルにリンクがあるか

今回の方法は、投稿タイトルのaタグを利用しています。

そのため、タイトル部分にリンクがない場合は動きません。

次のように、投稿タイトルの中にaタグがある必要があります。

<h3 class="wp-block-post-title">
  <a href="投稿URL">投稿タイトル</a>
</h3>

liにposition: relativeが効いているか

以下の指定が効いていないと、クリック範囲がずれることがあります。

position: relative;

ブラウザの検証ツールで、対象のliにこのCSSが当たっているか確認してください。

他の要素が前面にかぶっていないか

テーマやブロックの設定によっては、別の要素が前面に重なっている場合があります。

その場合は、z-indexの数値を少し上げます。

z-index: 20;

ただし、むやみに大きな数値にすると、他のメニューや固定ヘッダーなどに干渉する可能性があります。

まずは10から試し、必要な場合だけ調整します。

日付リンクがある場合の注意点

今回のHTMLでは、投稿日にもリンクがあります。

<div class="wp-block-post-date">
  <time>
    <a href="投稿URL">2026年4月27日</a>
  </time>
</div>

タイトルリンクと投稿日リンクが同じURLであれば、基本的には問題ありません。

ただし、投稿日リンクを別のアーカイブページに飛ばしている場合は注意が必要です。

今回の方法では、タイトルリンクをli全体に広げるため、投稿日部分をクリックしてもタイトルリンク側のURLが優先される可能性があります。

投稿一覧全体を投稿詳細ページへのリンクにしたい場合は、この挙動で問題ありません。

おすすめの完成コード

最終的には、以下のCSSがおすすめです。

.wp-block-query .wp-block-post-template > li.wp-block-post {
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}.wp-block-query .wp-block-post-template > li.wp-block-post .wp-block-post-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
}.wp-block-query .wp-block-post-template > li.wp-block-post:hover {
  background: #f7f7f7;
}.wp-block-query .wp-block-post-template > li.wp-block-post:hover .wp-block-post-title a {
  text-decoration: underline;
}

背景色の変化を少しなめらかにしたいので、

transition: background 0.2s ease;

も追加しています。

まとめ

WordPressの投稿一覧でli全体をリンクにしたい場合、HTMLを無理に変更する必要はありません。

おすすめは、既存の投稿タイトルリンクをCSSの疑似要素で広げる方法です。

ポイントは以下です。

1. liにposition: relativeを指定する
2. 投稿タイトルのa::afterをabsoluteで広げる
3. inset: 0でli全体をクリック範囲にする
4. hover時の背景色を付けて、クリックできることを分かりやすくする

この方法なら、WordPressのクエリーループの構造を壊さずに、投稿一覧をカード全体クリックのようにできます。

投稿一覧の使いやすさを上げたい場合に、かなり実用的なカスタマイズです。