お久しぶりです。

WEB制作チームのウサナミです。

本日はWEBサイト内の画像にリンクを設定する方法です。

ちなみにただ設定するのではなく、画像内で複数ボタンがあってもそれらにリンクを設定出来るという便利な方法です。

今回紹介する方法と似たような方法でイメージマップを使った方法がありますがそれは今回紹介するやり方とはまったく違うやり方です。

ちなみに余談にはなりますが、イメージマップを使ったリンクの付け方とは画像にx軸、y軸を指定してリンクを設定する方法です。

このやり方でも一応複数リンクを1枚の画像に対して設定することはできます。

SVGにリンクをつけたい！でも対応バージョンは？

一応伝えておきますが、今回の方法は最新のやり方というわけではなく、一応昔から出来た方法です。

ただ、私は対応バージョンなどの理由でこのやり方を敬遠していました。

ですが、IEのサポート終了時に対応バージョンがどんなものか調べてみたところ意外とほとんどの主要ブラウザの最新バージョンであれば問題なく動くということがわかりました。

ちなみに主要ブラウザで動かないものがあるとすればオペラぐらいでした。

SVGでリンクをつけるメリット

大まかなSVGでリンクを付けるメリットは下のようになります。

• ・SVGのパスデータを使うので拡大・縮小しても画像が荒れない。
• ・ユーザーマップトリミングと違いリンクをつけたい部分にピンポイントでリンクをつけられる。
• ・レスポンシブサイトにもCSSの調整のみで簡単に対応できる。
• ・ユーザーマップトリミングと違い座標の設定が不要。
• ・普通の画像リンクであれば画像１枚につきリンク1つだが、SVGなら複数つけられる。
• ・Hover時にリンク部分のみCSSを設定等の凝ったことも出来る。

やはり、画像が綺麗な所とピンポイントでリンクをつけたい所につけられるのがこの設定方法の大きな目玉だと言えるでしょう。

これによりWEB制作において大分リンクの自由度が増すはずです。

リンクの設定方法と注意事項

リンクのつけ方は簡単です。

まず下の画像のようにSVGファイルをイラレなどのソフトで生成します。

この時にリンクをつけたいパーツをグループ化しておくと後の作業がスムーズになります。

参考までに画像生成時の私のイラレの設定も載せておきます。

その後、生成したSVGファイルをコーディングソフトで開きます。

下の画像で使っているソフトはVSコードというソフトですが、なければ別のソフトでも問題はありません。

開いたら全てのコードをコピーして、HTMLファイルのリンク画像を設置したい箇所に貼り付けます。

貼り付け終わったらSVGのコード内でリンクをつけたい箇所を探してaタグで囲います。

リンクをつけたい箇所が分かりづらい、もしくは分からない場合はリンクをつけたい箇所をデベロッパーツールの”検証”を使い、どこからどこまでがそのパーツの範囲なのか確認しながらリンク付けするとわかりやすいと思います。

慣れれば割と難しくないですが、私はそこまで器用なほうではないので、最初の設定は割と苦労しました。

下のSVG画像が実際にリンクをつけたものになります。試しにカーソルをあわせたりクリックしたりしてみてください。

SVGでリンクをつけるときの注意点

ちゃんと全てのパスにリンクがついているか設置後に確認しておく事をお勧めします。

この手間を少しでも無くすため、書き出し前にリンクを付けたい箇所をグループするように先程説明していました。

合わせてブラウザ毎に表示がうまく出来ているかの確認もしておいたほうがいいでしょう。

設定方法を間違えていたりすると複雑な画像の場合、画像の表示が崩れていたりするので要注意です。

最後に

これで設定は以上になります。

今回の設定がIEと関係あるかはわかりませんが、IEのサポート終了により今まで足枷になっていたものが無くなり、

WEBサイト作成の自由度が増したような気がします。

今後もいろいろな技術を取り入れられるよう精進していきます。