【Bloggerカスタマイズ】記事一覧の記事リンク選択範囲を拡大する方法

Bloggerテンプレート「QooQ」を適用して、記事一覧のページを作ることができました。

　関連記事：Bloggerのテンプレートをデフォルトから「QooQ」に変更しました


そこで、さっそく記事一覧から個別ページへ飛ぼうとすると、サムネイルか記事タイトルをクリックしなければ、個別ページへ飛べないことに気が付きました。

（オレンジで塗りつぶした部分がリンク範囲）






しかし！

大雑把な私は、そこまで細かいマウスさばきが出来ません。

そこで、以下のようにリンクの有効範囲を拡大することにしました。







ただし、カテゴリのリンクボックス（上記画像の”Blogger”、”Bloggerカスタマイズ”）は、個別記事へのリンク範囲から外す必要があります。

これに気を付けて、実装していきたいと思います。

リンク選択範囲を拡大するコード

そして、作成したdivタグの中に、個別記事へのリンク<a expr:href='data:post.url'/>を追加します。

<div class='list-item-link'> <!--新規追加-->
  <article class='list-item'> <!--既存-->
    <!--省略-->
  </article>
  <a expr:href='data:post.url'/> <!--新規追加-->
</div>

記事一覧のスタイルが記載されている箇所に、新規のスタイルを追加していきます。

「QooQ」では、

というコメントの下が、記事一覧のスタイル記載箇所になっています。

なお、今回追加するスタイルは、@media ( max-width : 480px ) {}の直前に記載します。

ここでは、リンク範囲の適用と、カーソルを当てた際の色（透明度）を設定していきます。

CSSコード①

.list-item-link{  /*新規追加*/
 position: relative;
 z-index: 1;
}
.list-item-link >a{  /*新規追加*/
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.list-item-link >a:Hover{  /*新規追加*/
  background: #efefef;
  opacity:  0.2;
}
@media ( max-width : 480px ) {  /*既存*/
  /*省略*/
}

次に、既存の.list-item-category-itemセレクタの中に、z-index: 3;を追加します。
これにより、カテゴリへのリンクが優先されます。

CSSコード②

.list-item-category-item{  /*既存*/
  /*省略*/
  z-index: 3;  /*新規追加*/
}

まとめ

こんな感じで、今後もちまちまとカスタマイズしていきたいと思います。