今回紹介するのは、はてなブログで一つの画像に対して複数の記事リンクを作成する方法です！
前回紹介した
と比較すると、手順が多くなって多少めんどくさいですが、興味のある方は試してみてください！
実際の動作を確かめてみる！
まずは実際に作成できる画像を確認してみます！
上の画像は、右半分と左半分の2つの画像を合成したものになります。
右半分のペンギンの画像部分をクリックすると上野動物園に関する記事に、右半分のポケモンGOの画像部分をクリックすると上野公園のポケモンGOの記事にジャンプします！
ペンギンの方が幅が大きいですが、きっちりペンギンの画像部分をクリックした場合は上野動物園の記事にジャンプすると思います！
これは、スマホで見た場合も同じようにジャンプするようになっています。
画像に2つの記事リンクを設定する方法！
1つの画像に2つのリンクを設定する方法を説明していきます！
ちょっと作業量が多いですが、手順通りに実行するだけで設定できます！
画像のサイズ(容量のサイズではなく横×縦のサイズです)はペイント等で編集してから整えてから張り付けてください。(ここ大事です！)
画像を用意して座標を確認する！
最初にやることは、貼り付ける画像の座標を調べることです！
今回は一般的なWindowsのパソコンでの作業を考えて、標準ソフトであるペイントを利用して調べてみます！
ペイントで画像を開いて画像の上にカーソルを持っていくと上の画像の赤枠部分(画像の左下)に座標が表示されます。
これで、座標を調べることができます！
もちろん、他の画像編集ソフトでもっと分かりやすいソフトもありますが、頻繁に使う方以外はペイントで充分だと思います！
今回は、座標の範囲を指定するのでもっと簡単にできる方法を下で紹介しているので興味がある方は見てください！
画像を貼り付けて範囲を指定する！
まずは、単純に画像を貼り付けます！
(上の画像はただ貼り付けただけです)
画像を貼り付けると、HTMLのコード上では
のようになっています。
複数のリンクを貼り付けるために、今回はareaタグを使用します。
使い方は少しめんどくさいですが説明してみます！
完成は上の画像のようなコードになります！
areaの部分で、座標とリンク先を指定しています。
areaタグの使い方について
まずは、imgタグの部分に
usemap="#〇〇"
という一文を追加します。
そして、class="hatena-fotolife"の部分を削除します。
更に、
<p><map name="〇〇">
ここにareaを追加していく
</map></p>
という文を追加します。
〇〇の部分は2つとも同じ文字列を入力してください。
mapタグの中にareaタグの記述を行います。
areaタグの説明
alt="別名"(好きな名前つけてください)
coords="x始点,y始点,x終点,y終点" (下に簡単に指定する方法も書いてあります。)
shape="react" (reactは四角形の範囲指定になります。他の図形で範囲指定した場合は、areaのリファレンスを参考にしてください。)
href="URL"
<area alt="別名" coords="x始点,y始点,x終点,y終点" shape="rect" href="URL" />
を設定します。
座標をもっと簡単に指定する方法！！
上のURLのサイトでは範囲指定が簡単に行えるようになります。
サイトを開くと、画像をドラッグしてくださいとなっているので、座標の範囲を指定したい画像をドラッグします。
上の画像の赤枠部分で指定する範囲の形を選択して、範囲選択します。
すると、HTMLとして青枠の部分に追記されるので全部の範囲を選択後このHTMLをコピーして貼り付けるだけで簡単に範囲指定が行えます。
(範囲以外の設定は各自で追記ください！)
areaは何個でも設定できるので、必要な分だけ設定してください！
これまでの設定を反映したのが下の画像になります。
あれ？？って思った方もいると思います！
今のままでは、画像の表示サイズが変わった際に上手く動作しなくなってしまいます。
(環境によっては普通に動作する場合もあります。)
レスポンシブル対応もする
上で紹介された通りにやったのに上手くいかない！！
そうです、先ほどの座標を登録しただけでは上手くいきません。
理由は簡単で、レスポンシブルに表示するために画像の表示サイズが変わるからです！
分かりやすい例で言うと、スマホとパソコンと表示した場合には画像の大きさは異なりますよね。
画像の大きさが変わるので、座標を指定しても変わってしまうのです！！
パソコンの画面の大きさによっても画像の大きさ変わってしまいます。
これを解決するためには座標による絶対的な指定を相対的な指定にする必要があります。
areaタグでは相対的な指定を行うことができないので、今回はjQueryのライブラリーを用いて行います！
jQueryを読み込む！
絶対的な指定を相対的な指定に変換してくれるライブラリーを入れていきます！
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>
を デザイン->カスタマイズ->フッタ に追加します。
上の画像の赤枠の部分に追加します！
そして、同じところに
<script>
$('img[usemap]').rwdImageMaps();
</script>
これだけでは、設定が反映されません。
CSS側にも追加する必要があります。
.〇〇 {
width: 100%;
}
.〇〇というclassに対する処理を追加します。
.〇〇の部分は紐付けの名前なので、好きな名前を付けてください！
追加する場所は
デザイン->カスタマイズ->CSSデザインになります
最後の仕上げにjQueryを反映させる設定を行います。
imgタグに class="〇〇"(CSSに書き込んだ文字列を設定)を追加してください。
これで、表示される画像のサイズ変わっても相対的に判断してくれるので、思った通りに動作してくれると思います。
上手くいかない場合は
・classやusemap等の名前が一致していない
・はてなブログ上で画像サイズを変更してズレが生じている
等々が考えられますので、見直してみください。
何か不明点があれば、お気軽にコメント欄にてご質問ください。
ここまで
最後までお読みいただきありがとうございました！