「新着情報」のアイテム全体をリンクにする方法

はじめに

「新着情報」はリスト形式で新着記事を表示します。そのため、タイトル部分のみがリンクとして設定されており、アイテム全体をクリックしても遷移しません。

そこで、アイテム全体をリンク化し、どこをクリックしても記事に遷移できるようにします。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下のコードをstyle.cssに追加します。

.info-list-item {
  position: relative;

  .info-list-item-content-link::after {
    content: "";
    inset: 0;
    position: absolute;
    z-index: 1;
  }
}

さいごに

今回紹介した方法を使えば、「新着情報」のリストアイテム全体をリンク化でき、クリックしやすくなります。
特にスマートフォンでは、タイトル部分だけがリンクになっているとタップしにくいことがあるため、このカスタマイズを適用するとユーザビリティが向上します。