要素全体にリンクする

ブロックエディタで要素全体にリンクする方法を探すとリンクタグのみを入れて要素全体に適用する感じのものが多いです。

ブロックエディタの標準的な使い方では、こういう処理が出来ないので少し工夫します。

カスタムHTMLブロックを使う

カスタムHTMLを使ってリンクのHTMLを記述します。

サンプル

このブロックの設定とリストビューはこちらです。

カラム全体に高度な設定の追加CSSクラスに linkbox を指定します。カスタムHTMLには、サンプルとして google.co.jp へリンクを入れています。

CSSの設定

上記Code Penからそのまま流用します。

/*div要素全体にリンクをつけるために必要な要素*/
.linkbox {
    position: relative;
}
.linkbox a {
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
}

/* 以下見た目をわかりやすくするための設定*/
.linkbox {
    border: solid 2px #000000;
}
.linkbox a:hover{/* マウスオーバー時に色変更*/
    opacity: 0.1;
    background-color: ##e7e7e7;
}

この手法は都度リンクするので、記事一覧などのクエリーの中では使えません。

クエリーループで使う方法

クエリーループで使う場合を考えてみます。クエリーループの場合は出力されるブロックが決っているので、以下のような方法を考えてみました。

クエリーループの例

クエリーループからのリストビューです。

• カラム
• 横並び
  • 日付
  • タイトル
  • 続きを読む

続きを読むが表示されてしまうので、そのまま表示させた場合はこちらの画像の様になります。

「続きを読む」が表示されてしまった形になったので、次にタイポグラフィでサイズカスタムで0pxに設定します。

クエリーループの設定まとめ

• カラムに linkbox を指定する。
• クエリーループの投稿テンプレートの「タイトルをリンクにする」のチェックを外す。
• 「続きを読む」のフォントサイズを０にする。

クエリーループの完成サンプル

という事で、クエリーループの中でもブロック全体でリンクを行う事が出来ました。