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

こんにちは、デザイナーのオモトです。
私がノーコードCMS「BiNDup」を使う上で活用している、実用的なカスタマイズ・テクニック第4弾です。
今回は、「複数の要素を含んだカラム全体をリンクにする設定方法」について解説します。
あわせて、最近ブランドサイトでよく見る「カルーセルブロックの片側だけをブラウザ幅まで突き抜けさせる設定方法」も紹介します。

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

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

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

サンプルを見る

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

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

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

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

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

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

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

サンプルを見る

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

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

Dressの設定方法

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

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

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

②「リンク」の設定

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

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

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

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

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

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

サンプルを見る

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

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

Dressの設定方法

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

」の設定

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

②「リンク」の設定

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

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

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

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

【応用編】カルーセルブロックの片側だけをブラウザ幅まで突き抜けさせる方法

最近のブランドサイトでよく見る、片側だけがブラウザの端まで広がるレイアウトも、カルーセルブロックとブロックDressの組み合わせで作れます。スライドが画面の外まで続いて見えるので、横にまだ続きがあることが自然に伝わります。
カラム全体をリンクにしたカードをカルーセルに並べれば、クリックしやすく今っぽい導線に仕上がりますよ。

基本の考え方

カルーセルブロックの外側（スライドエリア）は、初期状態ではウィンドウ幅100%で作られており、コンテンツ幅（ここでは1200px）からはみ出た部分は非表示（overflow:hidden）になっています。
そこで、まずoverflowを解除して、ブラウザ幅いっぱいまでスライドが表示される状態に戻します。
そのうえでbefore要素で長方形を作り、突き抜けさせない側を覆い隠します。こうすると、片側だけが突き抜けているように見えます。
※カルーセル以外のブロックで同じ見た目にするにはコードを直接書く必要があるため、ここではカルーセルブロックでの設定方法のみ紹介します。
※一般的なCSSでは、子要素にmargin-right: calc(50% - 50vw);やmargin-left: calc((100vw - 1200px) / 2);を指定する方法がよく使われます（1200pxは親要素のコンテンツ幅）。

右側を突き抜ける設定方法

サンプルを見る

ブロックDressで、次の3か所を設定します。

①「カルーセルブロック＞スライドエリア（外側）」の設定

はみ出し処理：はみ出し部分を表示（overflow:visible）

②「カルーセルブロック＞スライドエリア（外側）＞before要素」の設定

幅：50%
高さ：100%
表示形式（display）：PC：ブロック、スマホ：表示しない
内容（content）：””
配置方法：絶対配置
位置：左-570px、上0px
重なり順（z-index）：1

※「位置：左」には、「コンテンツ幅の半分 − ブロック設定の左余白」の数値を入れてください。サンプルではコンテンツ幅を1200pxにしているので、600px − 30px = 570pxです。

③「カルーセルブロック」の設定

はみ出し処理：はみ出し部分を非表示（overflow:hidden）

コンテンツ幅は、ページ設定＞ページレイアウトの「ブロック内コンテンツ」、またはブロック設定＞ブロック背景と余白の「コンテンツ幅」で確認できます。

左側を突き抜ける設定方法

サンプルを見る

右側と同じ設定のまま、②before要素の位置だけを次のように変更します。
位置：右-570px、上0px

※「位置：右」には、「コンテンツ幅の半分 − ブロック設定の右余白」の数値を入れてください。サンプルではコンテンツ幅を1200pxにしているので、600px − 30px = 570pxです。

まとめ

いかがでしたでしょうか？アイデア次第で色々使えるので、ぜひ応用して使ってみてくださいね！
カラム全体のリンクとカルーセルの突き抜けデザインを組み合わせると、より魅力的な導線を作ることができます。

ホームページ作成サービスのBiNDupでは、複雑なCSSやJavaScriptの記述なしで、オリジナルデザインのサイトを作成できます。
今回のようなデザインアレンジを取り入れたテンプレートも多数あるので、まだお使いになっていない方はぜひ試してみてください。

BiNDupのテンプレートPADDLE inc.｜テンプレートのカルーセルも自由にアレンジ可能

BiNDupで作られたサイトは制作事例でもご覧いただけます。

BiNDupをまずは無料で使ってみる

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

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

カラム全体をリンクにするサンプル

ダウンロードする

カルーセルの片側を突き抜けるサンプル

ダウンロードする

※このダウンロードデータには複数のサイトデータが含まれています。一度解凍してご利用ください。日付zipファイル内のsiteから始まるzipファイル（site_text.zip／site_textbig.zip／site_thin.zip）がサイトデータです。
※サイトデータのインポート方法は、こちらのサポートページの2番「取り込み先の環境でサイトデータをインポートする」をご参照ください。
※ブログの内容についてはサポート対象外なので要注意！