*

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

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


梅雨とは?梅雨(つゆ)の語源とは?いろいろある梅雨の種類

今年の梅雨入りはまだ?とか、梅雨明けは?とか、普段、会話で普通に出てく

七夕にぬりえで遊ぼう!無料ダウンロードサイト紹介 折り紙もあるよ^^

七夕の日あなたは何をしてすごしますか?^^ 笹竹に七夕のお飾りや短冊

笹に七夕飾りをするわけは?七夕飾りの意味と短冊の色や飾る期間は?

いろんな行事でそれぞれになにかを飾ったり、供えたりしますよね。 雛祭

七夕とは?たなばたと読むのはなぜ?由来は乞巧奠と棚機つ女信仰から

子供の頃から7月7日になると空を見上げては織姫と彦星の話を思いだし、雨

お中元を贈った場合やいらない場合の困ったときの対処は?やめたい時は

日本では季節ごとに行事が目白押しですが、夏前になるとお中元の時期。

→もっと見る

  • こんにちは。波空です

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

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

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

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

PAGE TOP ↑