レスポンシブ対応を考えて、クリッカブルマップではなく、イラストレーターの地図をSVGで書きだして、ホバーの設定をしてみる
「地図をクリックしたら~」というものを制作したい場合
以前はクリッカブルマップを使っていました。
それだとスマホ対応が難しいので
イラストレーターからSVGで書きだすのが良いかなと。
ただし、あんまり地図が細かくなると、タップしづらくなるので
そういう場合はリストでのボタンにしたほうがいいと思います。
↓ 参考 こちらの地図の細かさではスマホで見た時はタップしづらいです(笑)
» SVGで地図。こんな感じ(別画面で開きます)
手順は以下の通り
① イラストレーターで地図を作成
② SVG書き出し用に、ボタンになる部分ごとにレイヤー分けをして、
レイヤーの名前がHTML上の「id」になるので、名前は英数半角文字にします。
③ ファイル → 書き出し → スクリーン用に書き出し
④「書き出されるファイルの種類の詳細設定です」のところに行きます。
⑤ SVG の縮小のチェックを外して、設定を保存
⑥ どこに保存先にされるのかを見てから、SVGでアートボードを書き出し。
⑦ 書き出されたデータはダブルクリックするとブラウザが開いてしまいます。
コーディング用のテキストエディターで開いてください。
⑧ コードまるごと、任意のHTMLファイルにコピペします。
CSSは通常のCSSと同じように扱えますので、CSSファイルに移動させます。
CSSを移動させたあと残った<defs><style></style></defs>は消して大丈夫です。
⑨ <g>から</g>までがひとかたまりなので、リンクなどを付け加えます。
※ここでリンクは「 a href=”ファイルパス” 」ではなく「 a xlink:href=”ファイルパス” 」とするのが良いそうです。
⑩ CSSを記述します。
CSSはSVG独自のものがあるので
それを使用します。
塗りつぶし | |
---|---|
fill | 塗りつぶしの色 例)fill: #ffffff; |
fill-opacity | 塗りつぶしの透過度。0~1 例)stroke-width: 0.3; |
線 | |
stroke | 線の色 例) stroke: #000000; |
stroke-width | 線の幅。px は不要。小数点OK 例)stroke-width: 3 |
参考サイト:HTMLとCSSでSVGを使うためのメモ