B Bootstrap 5.3 / HTML + CSS

画像なのに、
そこだけ
クリックできる！

Bootstrap 5.3で透明リンクを設定してみた

画像の中のURLに、透明なリンクを重ねる。
スマホでも位置が合う、小さな実装Tips。

実装コードを見る

画像に書かれたURLの上に透明なリンク領域が浮かび、カーソルが重なるイメージ。 — 画像の上に、クリックできる場所をひとつ。

この記事でできること01　画像の一部をリンクに02　%指定でサイズに追従03　赤枠で位置を確認

01 / HOW IT WORKS

画像全体ではなく、
URLのところだけ。

Bootstrap 5.3で作成したホームページのトップ画像に、URLが書かれています。「ここをクリックすると、そのホームページに飛べるようにしたい」。今回は、そんな場面で使える方法です。

昔からある「クリッカブルマップ（イメージマップ）」でも画像の一部をリンクにできます。ただ、画面幅に応じて画像が縮小される場合は、リンクの座標も追従させる工夫が必要です。

今回の方法

画像のURL部分の上に、透明なリンク領域を重ねます。

四角い範囲なら、HTMLとCSSでシンプルに設定できます。

画像を囲む要素

`position: relative;`

画像を囲む箱を、リンクの位置を決める基準にします。

透明なリンク

`position: absolute;`

基準の箱の中で、URLに合わせて位置と大きさを指定します。

02 / HTML & CSS

画像のあとに、リンクをひとつ。

まず、画像と同じ箱の中に <a> タグを追加します。下のコードは、幅667px・高さ283pxのトップ画像を使う場合の例です。画像のパス、サイズ、説明文、リンク先は実際の内容に置き換えてください。

HTML 画像とリンクを同じ箱に

<div class="header py-2 mb-4">
  <div class="container text-center">
    <div class="header-image">
      <img src="images/logo-1.png"
           class="img-fluid"
           width="667" height="283"
           alt="イベントのトップ画像。主催者：○○○○">

      <a href="https://example.com/"
         class="header-url-link"
         target="_blank"
         rel="noopener noreferrer"
         aria-label="主催者ホームページ（新しいタブで開く）"></a>
    </div>
  </div>
</div>

ページの見出しは別に置けるよう、画像を囲む要素を div にしています。画像がページの主見出しを兼ねる場合は、適切な代替テキストを付けた h1 でも構いません。

位置と大きさは、%で指定する

left・top・width・height をpxではなく%で指定するのがポイント。画像の縦横比を保ったまま縮小すれば、リンクの位置と大きさも追従します。

CSS 数値は画像に合わせて調整

.header-image {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.header-image img {
  display: block; /* 画像下の余分な隙間をなくす */
}

.header-url-link {
  position: absolute;
  left: 55%;
  top: 78%;
  width: 35%;
  height: 10%;
  display: block;
  box-sizing: border-box;
}

.header-url-link:focus-visible {
  outline: 3px solid #0b57d0;
  outline-offset: 2px;
}

いずれも、画像を囲む箱に対する割合です。
指定	決まること	例
`left`	左端からの位置	55%
`top`	上端からの位置	78%
`width`	リンク領域の幅	35%
`height`	リンク領域の高さ	10%

上記の数値は汎用の設定ではありません。以下の添付画像は説明文まで含むため、デモには画像全体に合わせた別の座標を使っています。

03 / FINE TUNING

最初は、赤枠を出してみる。

透明なままでは位置がわからないので、調整中だけ border: 2px solid red; を追加します。赤い枠を見ながら、4つの数値をURL部分に合わせましょう。

CSS 調整中だけ追加する指定

.header-url-link {
  border: 2px solid red;
}

URLが書かれている場所に合わせて、リンク領域を赤い実線の枠で示した図 — 赤枠の位置が決まったら、調整用のborder指定を削除します。赤枠付き画像を保存 ↓

LIVE DEMO

リンクの範囲を確かめる

赤枠を表示

下の画像のURL部分を押すと、サンプルのリンク先が新しいタブで開きます。

トップ画像の説明図。主催者は○○○○、URLはhttps://〜。青い点線は画像に描かれた説明用の目印です。

赤枠はCSSで切り替わります。青い点線と注釈は元画像の一部なので、切り替えても残ります。

この画像の座標：left 57.3% / top 59.2% / width 37% / height 7.1%

サンプルの主催者ホームページを開く ↗

FINISH / 最後のひと手間

枠を消して、
クリックできれば完成。

位置が決まったら、調整用の border: 2px solid red; を削除します。画像の見た目を保ったまま、URL部分だけをリンクにできます。

パソコンとスマホの両方で、リンク位置を確認する。
Tabキーでもリンクを選べるよう、フォーカス枠は残す。
スマホで押しにくいときは、画像の下にもテキストリンクを置く。

画像の切り抜きや縦横比の変更、スマホ用の別画像への差し替えを行う場合は、座標を見直してください。透明リンクはBootstrap専用機能ではなく、通常のCSSを img-fluid と組み合わせた方法です。

画像はそのまま。必要なところに、リンクを。 画像に書かれたURLの上に透明なリンク領域が浮かび、カーソルが重なるイメージ。

画像なのに、そこだけクリックできる！

画像全体ではなく、URLのところだけ。

position: relative;

position: absolute;