ワードプレス内のイラストにリンクをつける方法

ワードプレス初心者です。
ワードプレスの固定ページにページ内リンクのついたイラストを投稿したいのですが手順を教えてください。

HTML Imagemap Generatorでイラストのリンク範囲は取得しましたが、その情報をどこに入力すればよいのかわからないです。稚拙な質問で申し訳ございませんが、ご回答宜しくお願い致します。

HTML
1<img src="gofukumap.png" usemap="#ImageMap" alt="" />
2<map name="ImageMap">
3  <area shape="poly" coords="491,0,382,279,762,413,896,92,648,7,629,2" href="#" alt="" />
4  <area shape="poly" coords="359,306,170,799,540,927,761,434,761,434" href="#" alt="" />
5  <area shape="poly" coords="193,844,348,1314,543,943,543,943" href="#" alt="" />
6  <area shape="poly" coords="970,74,938,162,1764,426,1791,329,1791,329" href="#" alt="" />
7  <area shape="poly" coords="909,198,821,414,1082,508,1189,274,1189,274" href="#" alt="" />
8  <area shape="poly" coords="802,447,696,678,958,769,1074,529,1074,529" href="#" alt="" />
9  <area shape="poly" coords="683,705,587,926,850,1023,957,791,957,790" href="#" alt="" />
10  <area shape="poly" coords="569,954,434,1297,420,1302,481,1307,1341,1195,1341,1195" href="#" alt="" />
11  <area shape="poly" coords="1208,282,1118,506,1373,587,1480,368,1480,368" href="#" alt="" />
12  <area shape="poly" coords="1130,562,1031,789,1261,868,1372,642,1404,639" href="#" alt="" />
13  <area shape="poly" coords="1005,808,909,1035,1154,1123,1251,883,1261,875" href="#" alt="" />
14  <area shape="poly" coords="1502,376,1414,598,1690,682,1805,467,1808,464" href="#" alt="" />
15  <area shape="poly" coords="1401,650,1306,874,1573,962,1679,736,1679,736" href="#" alt="" />
16  <area shape="poly" coords="1283,896,1202,1122,1458,1227,1562,982,1562,982" href="#" alt="" />
17</map>

K_3578

2021/05/25 06:05

とりあえず今書いてるコードを提示してください。

AlsaKolpiiya

2021/05/25 06:15

画像に追加したいコードを追加しました。これでよろしいでしょうか？ちなみにlionMediaのテーマを使用してます。ずっと表示させたい画像なので固定ページでよいですよね？何も分かっておらず申し訳ございません。

行動規範の内容に同意します

回答1件

自己解決

自己解決できました。

①表示させたい画像をメディアにアップロードする。
②固定ページ「新規追加」でタイトルを任意で記入。「メディアを追加」クリック。
③①でアップした画像を選択し「固定ページに挿入」をクリック
④新規追加画面に自動で戻る。（ClasicEditorをプラグインしていれば）HTMLテキストの編集が可能なので「テキスト」タブをクリック
⑤選択した画像のHTMLコードが1行既に書き込まれていることを確認する。

⑥HTML　Imagemap　Generatot（HIG）をブラウザで開き、アップロードした画像と同一の画像をHIGにドラック＆ドロップ
⑦HTMLコードが表示されるのでコピー

⑧⑤のページに戻り1行のHTMLコードの下に⑦でコピーした内容を貼り付ける。
⑨ここで一回保存

⑨メディアに行き、①でアップロードした画像のURL情報をコピー
⑩⑧で貼り付けたコードのsrc="*****"の****の部分を⑨でコピーした情報を上書きする。

⑪

最後に上のコードをコピーしてテキストの一番下に貼付けて保存

全体のコードを下に記します。

HTML
1<img src="https://gofuk.jp/wp-content/uploads/2021/06/gohukumap0609.jpg" alt="" usemap="#ImageMap" />
2
3<map name="ImageMap"> <area alt="" coords="195,1,155,118,310,177,363,39,263,1,263,3" shape="poly" href="#" /> <area alt="" coords="145,126,72,339,219,399,308,184,308,184" shape="poly" href="#" /> <area alt="" coords="77,359,133,560,145,561,222,403,222,403" shape="poly" href="#" /> <area alt="" coords="393,24,377,65,716,180,727,142,728,142" shape="poly" href="#" /> <area alt="" coords="370,79,329,178,438,219,483,117,483,117" shape="poly" href="#" /> <area alt="" coords="321,187,279,291,392,331,434,225,434,225" shape="poly" href="#" /> <area alt="" coords="278,301,237,398,347,439,389,338,389,338" shape="poly" href="#" /> <area alt="" coords="490,120,450,215,563,254,599,156,599,156" shape="poly" href="#" /> <area alt="" coords="472,242,451,248,410,335,514,372,556,271,556,271" shape="poly" href="#" /> <area alt="" coords="409,344,365,443,469,478,509,379,509,379" shape="poly" href="#" /> <area alt="" coords="611,156,574,253,689,295,734,200,734,200" shape="poly" href="#" /> <area alt="" coords="568,275,526,375,637,411,681,313,681,313" shape="poly" href="#" /> <area alt="" coords="522,383,486,482,557,513,608,503,634,420,634,420" shape="poly" href="#" /> <area alt="" coords="174,556,201,558,524,509,229,407,229,407" shape="poly" href="#" /> </map>
4
5<script src="https://cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.10/js/imageMapResizer.min.js"></script>
6<script>
7  imageMapResize();
8</script>