こんにちは！松本です！！
管理しているサイト「テイクアウトいわきウェブ版」のリニューアルをしたので、備忘録。
https://takeout-iwaki.com/やったことは主に2つ。
①クリッカブルマップを作ってメインに
②カテゴリーとタグの総入れ替え
クリッカブルマップのレスポンシブ化に苦労したので、自分のために記録しておきます。
クリッカブルマップを作ろう
クリッカブルマップって何かというと、クリックやタップするとリンク先に行ける地図のことです。地図じゃなくても画像の一部分から他のページにリンクをかけてあるやつです。
詳しくはこのページを見てください。笑
トップページにあるいわき市のエリアマップがクリッカブルマップになっています。
https://takeout-iwaki.com①まずは画像を作成
まず画像を作成。
今回はIllustratorでサクッと。しようとしたけど地区を3列に配置するのにちょっと悩みました。
できたのがこちら。
テイクアウトいわきで分けている地区と「移動販売」までいい感じに配置した地図の画像ができました！
できた画像はダッシュボードからメディアにアップロードしておきましょう。
※実際にウェブサイトで使う大きさで画像を作ること！画像のサイズ変更は、Windowsなら「ペイント」で簡単にできます。
②クリッカブルマップ用のHTMLコードを作る
難しくないです。なぜなら無料でクリッカブルマップのHTMLコードを作れるサイトがあるからです。
こちら。
https://www.image-map.net/クリッカブルマップのHTMLコードを作る手順を動画にしました。音声ないです！
プルダウンのRectは四角形、Polyは多角形、Circleは丸ですね。
Rectは作りたい四角の対角線の端を2回クリックでできます。Polyは角をポチポチしていくだけ。けっこう複雑な図形も作れることが動画から分かると思います。
③コードをカスタムHTMLブロックで記載
クリッカブルマップを掲載したいページの編集画面で、カスタムHTMLブロックを使用し、さっき作ったHTMLコードを貼り付けます。
その時に、コード上部の画像のソース img src=”画像名”のところを、メディアにアップロードした画像のURLに書き換えましょう。
詳しくは動画で！音声ないです。
これでクリッカブルマップはできました！
でも、レスポンシブ対応していない！スマホで見ると地図とタップできる領域がずれています。
ではレスポンシブ対応！！
④jQueryのプラグインのダウンロード・サーバーへのアップロード
めちゃくちゃググったのですが、こちらのサイト様の説明がとても分かりやすかったです。ありがとうございました。
基本的にはこちらの説明通りやればできるかと思います。
https://matatabi-travel.net/wp-cocoon-cmap/こちらにアクセス。さっきから英語のサイトにアクセスしているけど大丈夫です。
エンジニアが集まるSNSみたいな感じです。
https://github.com/stowball/jQuery-rwdImageMaps動画のように進んでjQueryのプラグインをダウンロードし、該当のファイル（jquery.rwdImageMaps.min.js）をサーバーにアップロードします。
今回は、サーバーのファイル管理から、ドメイン→public_html→wp-content→uploadsと進み、uploadsの中にアップロードしました。
⑤JavaScriptのコードをテーマに記載
最後！
ダッシュボード→外観→テーマエディターと進んで、子テーマ（今回はCocoon Child）のtmp-user→footer-insert.phpの中に、こちらのコードを記載します。
④でダウンロードしたjQueryのプラグインのアップロード先が私と同じであれば、このコードで行けるはずです。
<script type="text/javascript" src="/wp-content/uploads/jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>キャッシュをクリアし、レスポンシブなマップになっているか確認してみましょう！
※子テーマ（今回はCocoon Child）のtmp-user→footer-insert.phpの中にコードを記載するのですが、似た名前のファイル（amp-footer-insert.php）に書かないように注意。
ググればググるほどみんないろんなこと言ってて大混乱しましたが、この方法で行けるはずです。
一応、うまくいった環境を…
サーバー：エックスサーバー
テーマ：Cocoon バージョン: 2.2.8.8・Cocoon Child バージョン: 0.0.3
WordPressバージョン：5.7.1
PHPバージョン：7.4.13
さあ、これでメインにしたかったクリッカブルマップは完成です！
ドヤ顔でトップページのメインに配置しますw
カテゴリとタグを入れ替えた理由
次。地味な黙々作業。
カテゴリー（お店のジャンル）と、タグ（地区）をすべて入れ替えました。
新しく、カテゴリーは地区を表すものになり、タグは料理のジャンルを表すものになりました。
その結果、一つのお店に「和食」「海鮮」などの2つ以上のタグを付け、より分かりやすいサイトにすることができました！
立ち上げるときは「大変なことになった、早く作らないと！！」という一心で、カテゴリーとタグの使い分けまで気が回らなかった…。未熟でした。
始まってから困りました。
甘味を売ってるお店が唐揚げのテイクアウトをやったり、ラーメン屋さんが丼もののテイクアウトをやったり。
沖縄料理、海鮮、とんかつなど、和食でくくってしまっていいのか迷うことも何度もありました。
早々に、カテゴリとタグは逆だったと後悔しました…。
でも一年前は立ち止まって直す余裕がなく、「テイクアウトブームも数か月だろう」なんて思う気持ちもあったのです。
しかし、コロナ禍は当初思っていたよりも長く長く続き、今も続いています。
「テイクアウトいわきウェブ版」へのアクセスも、想像していたよりっもずっと多いのです。
これは、飲食店のためにも見に来て下さる人のためにも、分かりやすく作り直さなければ、と思いました。
これが、今回思い切ってリニューアルした理由です。
GWに間に合わず、GW中に見に来て下さった方には、中がごちゃごちゃのサイトをお見せしてしまいすみませんでした。
まとめ
そんなこんなで、ほかにも小さなたくさんの作業を経て、テイクアウトいわきウェブ版は今回リニューアルしたのでした！
テイクアウトいわきウェブ版は私のボランティア作業ですが、やっぱりサイトが形になるとすごく嬉しい。
読んでくれてありがとう！
今日はここまで！