Warning: Constant POST_PLUGIN_LIBRARY already defined in /home/pasora/pasona-sp.com/public_html/wp-content/plugins/similar-posts/similar-posts.php on line 27
1枚の画像に複数リンク!その2 イメージマップの作り方手順 | 思いだし にっき
サイトアイコン 思いだし にっき

1枚の画像に複数リンク!その2 イメージマップの作り方手順

<p><img class&equals;"aligncenter size-full wp-image-12158" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;01&sol;2329597&lowbar;s&period;jpg" alt&equals;"" width&equals;"384" height&equals;"271" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;2023&period;html">前回<&sol;a>の続きです。<&sol;p>&NewLine;<p>イメージマップの元になる画像を用意し、名前をつけました。<&sol;p>&NewLine;<p>画像の座標もメモして準備が整ったところまででした。<&sol;p>&NewLine;<p>今回はイメージマップを作り、リンクを設定する方法です。<&sol;p>&NewLine;<p><&excl;--more--><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2><strong>イメージマップの名前の指定<&sol;strong><&sol;h2>&NewLine;<p>マップの名前&lpar;例では&OpenCurlyDoubleQuote;&num;umap”&rpar;を決めたら<br &sol;>&NewLine;イメージマップ用のマップを作成するために「name属性」を使ってマップ名を指定します。<&sol;p>&NewLine;<p>次のように記述します。<&sol;p>&NewLine;<p>&lt&semi;map name&equals;”umap” &gt&semi;<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2><strong>イメージマップの作成(個別リンクを作る)<&sol;strong><&sol;h2>&NewLine;<p>※WordPressの投稿画面の「テキスト」モードで記述していきます。<&sol;p>&NewLine;<p>マップに使用する画像を読み込みます。<br &sol;>&NewLine;画像の下などに次のように記述してみましょう。<&sol;p>&NewLine;<p>基本的に次のように記述したら間に好きなだけリンクする要素を入れていきます。<&sol;p>&NewLine;<p>&lt&semi;map name&equals;”umap” &gt&semi; ←マップの名前を指定<&sol;p>&NewLine;<p>            ↑<&sol;p>&NewLine;<p>この間(マップ名を指定してからマップ終了のタグの間に)に座標でクリックする範囲の形を指定してリンクを設定します。<&sol;p>&NewLine;<p>            ↓<br &sol;>&NewLine;&lt&semi;&sol;map &gt&semi; ←マップ終了のタグ<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;&NewLine;<&excl;-- WP QUADS v&period; 2&period;0&period;92 Shortcode Ad -->&NewLine;<div class&equals;"quads-location quads-ad" id&equals;"quads-ad" style&equals;"">&NewLine;<&sol;div>&NewLine;&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h3><span style&equals;"font-size&colon; 14pt&semi;"><strong>間にいれる要素<&sol;strong><&sol;span><&sol;h3>&NewLine;<p><span style&equals;"color&colon; &num;0000ff&semi; font-size&colon; 14pt&semi;"><strong>要素の意味<&sol;strong><&sol;span><&sol;p>&NewLine;<p>area shape&equals;”形状”<&sol;p>&NewLine;<p>coords&equals;”座標”<&sol;p>&NewLine;<p>href&equals;”リンク先”<&sol;p>&NewLine;<p>alt&equals;”代替え文字”<&sol;p>&NewLine;<p>マップ名を指定したタグと終了タグとの間に入れる一連の書き方は以下のようになります。<&sol;p>&NewLine;<p>&lt&semi;map name&equals;”umap” &gt&semi; ←マップの名前を指定<&sol;p>&NewLine;<p>&lt&semi;area shape&equals;”rect” coords&equals;” ここに座標をいれる&OpenCurlyDoubleQuote;href&equals;”リンク先のURL” &gt&semi;  ←四角形<&sol;p>&NewLine;<p>&lt&semi;area shape&equals;”poly” coords&equals;” ここに座標をいれる&OpenCurlyDoubleQuote; href&equals;”リンク先のURL” &gt&semi; ←多角形<&sol;p>&NewLine;<p>&lt&semi;area shape&equals;”circle” coords&equals;” ここに座標をいれる&OpenCurlyDoubleQuote; href&equals;”リンク先のURL” &gt&semi; ←円形<&sol;p>&NewLine;<p>&lt&semi;&sol;map &gt&semi; ←マップここまでの意味<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><strong>イメージマップ作成の例<&sol;strong><&sol;p>&NewLine;<p><img class&equals;"size-medium wp-image-2036 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;01&sol;nekosan-300x217&period;jpg" alt&equals;"イメージマップの画像" width&equals;"300" height&equals;"217" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>猫の写真に赤枠のような範囲でリンクを設定すると次のようになります。<br &sol;>&NewLine;※リンク先は架空のものです。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-2038" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;01&sol;map記述&period;png" alt&equals;"map記述" width&equals;"638" height&equals;"213" &sol;><&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-2037 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;01&sol;nekosanmap&period;png" alt&equals;"例" width&equals;"306" height&equals;"220" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2><strong>画像が表示されない場合は<&sol;strong><&sol;h2>&NewLine;<p>なんらかの事情で画像が表示されないと、イメージマップは役にたたなくなります。<&sol;p>&NewLine;<p>また、画像が表示されていても、マウスが使えない環境では利用しにくくなります。<&sol;p>&NewLine;<p>そのため、イメージマップ上で設定しているすべてのリンク先については、別にテキストリンクなども用意しておくことも必要かもしれません。<&sol;p>&NewLine;<p>例では、別のページへのリンクを設定していますが、同じページ内の離れた場所へのリンクもできます。<&sol;p>&NewLine;<p>その場合はリンク先に先にアンカーを設定しておきます。<br &sol;>&NewLine;詳しくは <a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1871&period;html">こちらの記事<&sol;a> を参考にしてください。<&sol;p>&NewLine;<p>1枚の画像でいろいろなところへリンクするイメージマップは作ってみると楽しいですよ~。<&sol;p>&NewLine;<p>ブログ作りのイメージも広がります。<br &sol;>&NewLine;是非試してみてくださいね(^^)<&sol;p>&NewLine;<p>スマホでズレる場合の解決方法をUPしました。<&sol;p>&NewLine;<p><a href&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;8171&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener"><strong>イメージマップがスマホでずれる!プラグインで簡単解決<&sol;strong><&sol;a><&sol;p>&NewLine;<p>前の記事へ<br &sol;>&NewLine;<a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;2023&period;html">1枚の画像で複数リンク!WordPressでイメージマップを作ってみた<&sol;a><&sol;p>&NewLine;<p>次の記事へ<br &sol;>&NewLine;<a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;2078&period;html">WordPressテーマStinger3の見出しタグのカスタマイズ<&sol;a><&sol;p>&NewLine;<p>少しわかりづらいので、こちらも参照してください<br &sol;>&NewLine;<strong><a href&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;4956&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener"><strong>WordPressのイメージマップにSmartArtを使う時の手順<&sol;strong><&sol;a><&sol;strong><&sol;p>&NewLine;<p style&equals;"text-align&colon; right&semi;"><a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;page-1472&period;html"><span style&equals;"color&colon; &num;0066cc&semi;">WordPress一覧へ<&sol;span><&sol;a><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><a href&equals;"&sol;&sol;diary&period;blogmura&period;com&sol;ranking&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener"><img src&equals;"&sol;&sol;diary&period;blogmura&period;com&sol;img&sol;diary88&lowbar;31&period;gif" alt&equals;"" width&equals;"88" height&equals;"31" border&equals;"0" &sol;><&sol;a><br &sol;>&NewLine;<a href&equals;"&sol;&sol;diary&period;blogmura&period;com&sol;ranking&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener">にほんブログ村<&sol;a><&sol;p>&NewLine;<p><a title&equals;"日々の出来事 ブログランキングへ" href&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;link&period;php&quest;1839199&colon;9200"><img src&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;img&sol;banner&sol;c&sol;banner&lowbar;1&sol;br&lowbar;c&lowbar;9200&lowbar;1&period;gif" width&equals;"110" height&equals;"31" border&equals;"0" &sol;><&sol;a><br &sol;>&NewLine;<a style&equals;"font-size&colon; 12px&semi;" href&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;link&period;php&quest;1839199&colon;9200">日々の出来事 ブログランキングへ<&sol;a><&sol;p>&NewLine;&NewLine;

モバイルバージョンを終了