*

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

公開日: : 最終更新日:2018/04/04 WordPress

前回の続きです。

イメージマップの元になる画像を用意し、名前をつけました。

画像の座標もメモして準備が整ったところまででした。

今回はイメージマップを作り、リンクを設定する方法です。

スポンサーリンク

イメージマップの名前の指定


マップの名前(例では“#umap”)を決めたら
イメージマップ用のマップを作成するために「name属性」を使ってマップ名を指定します。

次のように記述します。

<map name=”umap” >

イメージマップの作成(個別リンクを作る)


※WordPressの投稿画面の「テキスト」モードで記述していきます。

マップに使用する画像を読み込みます。
画像の下などに次のように記述してみましょう。

基本的に次のように記述したら間に好きなだけリンクする要素を入れていきます。

<map name=”umap” > ←マップの名前を指定

            ↑

この間(マップ名を指定してからマップ終了のタグの間に)に座標でクリックする範囲の形を指定してリンクを設定します。

            ↓
</map > ←マップ終了のタグ

間にいれる要素


要素の意味

area shape=”形状”

coords=”座標”

href=”リンク先”

alt=”代替え文字”

マップ名を指定したタグと終了タグとの間に入れる一連の書き方は以下のようになります。

<map name=”umap” > ←マップの名前を指定

<area shape=”rect” coords=” ここに座標をいれる“href=”リンク先のURL” >  ←四角形

<area shape=”poly” coords=” ここに座標をいれる“ href=”リンク先のURL” > ←多角形

<area shape=”circle” coords=” ここに座標をいれる“ href=”リンク先のURL” > ←円形

</map > ←マップここまでの意味


スポンサーリンク



イメージマップ作成の例

イメージマップの画像
猫の写真に赤枠のような範囲でリンクを設定すると次のようになります。
※リンク先は架空のものです。

map記述
例

画像が表示されない場合は


なんらかの事情で画像が表示されないと、イメージマップは役にたたなくなります。

また、画像が表示されていても、マウスが使えない環境では利用しにくくなります。

そのため、イメージマップ上で設定しているすべてのリンク先については、別にテキストリンクなども用意しておくことも必要かもしれません。

例では、別のページへのリンクを設定していますが、同じページ内の離れた場所へのリンクもできます。

その場合はリンク先に先にアンカーを設定しておきます。
詳しくは こちらの記事 を参考にしてください。

1枚の画像でいろいろなところへリンクするイメージマップは作ってみると楽しいですよ~。

ブログ作りのイメージも広がります。
是非試してみてくださいね(^^)


前の記事へ
1枚の画像で複数リンク!WordPressでイメージマップを作ってみた

次の記事へ
WordPressテーマStinger3の見出しタグのカスタマイズ

少しわかりづらいので、こちらも参照してください
WordPressのイメージマップにSmartArtを使う時の手順

WordPress一覧へ






にほんブログ村


日々の出来事 ブログランキングへ

スポンサーリンク




スポンサーリンク




Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


家族や仲間と行きたい!川遊びをおもいっきり楽しめるキャンプ場全国版

夏休みくらい、自然の中に出かけたい!なんて思いませんか?

バーベキュー初心者でも簡単な食材の準備メニューと変わり種デザート

夏、海で河原でキャンプ場で家でも、道具さえあれば どこでもできるバー

日本人は睡眠負債が多すぎる?!睡眠不足のリスク 理想の睡眠時間は

「睡眠負債」という言葉があります。 一日一日にすると少しの睡眠不足で

蚊にかまれたかゆみを抑える方法 これで解決!蚊のイライラにさようなら

夏になると、花火や海やバーベキュー、七夕や夏休みの旅行など・・、 い

知っていますか?盆踊りをする意味 その起源と由来とは?

8月のお盆の時期になると、どこからともなく太鼓の音が聞こえてき

→もっと見る

  • こんにちは。波空です

    好きなことを自由にやりたくて
    アフィリエイトにチャレンジ中

    好きなものは
    アニメ・漫画・ゲーム・お絵描き・
    映画を観ること・パソコンで遊ぶこと
    ・チョコレート・中島みゆきさんの歌・・

    やりたいことは・・
    空を飛びたい・馬に乗って自由に
    走り回りたい・猫を飼いたい・・

    いろいろあるけど、
    まずは資金と自由な時間を確保
    しないと進まない。
    日々どうしたらできるか考えながら
    リアル仕事に追われています。

PAGE TOP ↑