クリックしやすくなる！複数の要素を含んだカラム全体をリンクにする設定方法

こんにちは、デザイナーのオモトです。
私がノーコードCMS「BiNDup」を使う上で活用している、実用的なカスタマイズ・テクニック第4弾です。
今回は、「複数の要素を含んだカラム全体をリンクにする設定方法」について解説します。

設定できなかった方にはBiNDupのサイトデータを用意しているのでご安心を！
カラム全体を背景にするメリットや背景画像ごとリンクにする方法は、以下の記事で解説していますので併せてご覧ください。
クリックしやすくなる！複数の要素を含んだカラム全体をリンクにする設定方法

→デザインカスタマイズも自由にできるノーコードCMS「BiNDup」を30日間無料体験

BiNDUpの機能を使った基本のやり方

開始タグと終了タグ使うだけでかんたんにそれっぽいものができます！

サンプルを見る

開始タグ・終了タグとは？

BiNDupのリンクパーツの一つです。開始タグにリンクを指定することで、開始〜終了までの間の要素すべてに同じリンクを付与することができます。
複数の要素に同じリンク先を指定する手間が省けるので便利です。
※ただし要素の間に余白があると、いったんリンクが途切れてしまうので注意。

ブロックエディタの設定方法

ブロックエディタを開き、「リンクパーツ」ボタン→「リンクを範囲で指定」から「開始タグを挿入」または「終了タグを挿入」で開始タグ・終了タグを挿入します。

リンクにしたい範囲を画像の例のように開始タグと終了タグで囲みます。
開始タグをクリックし、リンク先を指定すれば完成です。

→デザインカスタマイズも自由にできるノーコードCMS「BiNDup」を30日間無料体験

ブロックDressを使ってカラム全体をリンクにする方法

マウスオーバーすると、要素の間の余白を含めたカラム全体がリンクになっているので、クリックしやすく、UXやユーザービリティを意識するサイトでよく使われているイメージです。

サンプルを見る

ブロックエディタの設定方法

リンクにしたい範囲のはじめに、リンクパーツを挿入します。リンクパーツをクリックし、リンクの役割が「テキストリンク」になっているのを確認したら、テキスト内の文字を削除、リンク先を指定します。
※この場合は、分割線までのコンテンツがリンクになるため、終了タグは不要です。

Dressの設定方法

①「プレーンブロック：カラム」の設定

サンプルではプレーンブロックを使っているので、プレーンブロックのカラムに対して指定します。
使用しているブロックに併せて設定場所を変えてください。

余白の内余白：10px
配置方法：相対配置（position:relative） ※この範囲内に限定するよという指示のイメージ

②「リンク」の設定

幅：100%
高さ：100%
配置方法：絶対配置（position:absolute）
位置：左0px、上0px

「リンク：マウスオーバー」の設定

背景色：rgb(0,0,0,0.1)

※必ずブロックDressに記載してください。position:absoluteを使っているので、サイト全体のDressに指定するとサイトのレイアウトが崩れる可能性があります。

→デザインカスタマイズも自由にできるノーコードCMS「BiNDup」を30日間無料体験

【応用編】ニュース一覧の記事全体をリンクにする方法

同じやり方で、ニュース一覧にも応用することが可能です。

サンプルを見る

ブロックエディタの設定方法

リンクにしたい範囲のはじめに、リンクパーツを挿入します。リンクパーツをクリックし、リンクの役割が「テキストリンク」になっているのを確認したら、テキスト内の文字を削除、リンク先を指定します。

Dressの設定方法

①「ニュース：テーブル行

」の設定

配置方法：相対配置（position:relative）

②「リンク」の設定

幅：100%
高さ：100%
配置方法：絶対配置（position:absolute）
位置：左0px、上0px

「リンク：マウスオーバー」の設定

背景色：rgb(0,0,0,0.1)

※必ずブロックDressに記載してください。position:absoluteを使っているので、サイト全体のDressに指定するとサイトのレイアウトが崩れる可能性があります。

まとめ

いかがでしたでしょうか？アイデア次第で色々使えるので、ぜひ応用して使ってみてくださいね！
BiNDupをまずは無料で使ってみる

今回作成したサンプルサイトのダウンロード

自分では設定ができなそう・・と不安な方は
今回のサンプルサイトのサイトデータを用意しましたので、以下よりログインしてダウンロードしてみてください。
（BiND10以降、BiNDup対応）