*

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

公開日: : 最終更新日:2018/01/02 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一覧へ



 



にほんブログ村


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

スポンサーリンク




関連記事

WordPressで簡単設定ファビコン(favicon)の作り方

ネットをみていると開いたサイトのタブには名前の頭にアイコンがありますね。 これは自分でも作れるのだ

記事を読む

プラグイン.WordPress Popular Postsで人気記事ランキング作成

ブログを見ると、サイドバーに「人気ランキング」なんていうのが、のっています。 このサイトのどんな記

記事を読む

カテゴリー別のまとめバナーをサイドバーや記事下にいれてリンク

同じような分類の記事が増えてきたので、まとめを作りました。 バナーでリンクできるようにしてみようと

記事を読む

サイトマップをグローバルメニューに表示するⅠ

グローバルメニューというのはヘッダーの下のエリアを指します。 前の記事で作成したカテゴリー別の記事

記事を読む

プラグインGoogle XML Sitemapsでサイトマップ作成

ブログの構造を伝える「サイトマップ」は、大きく分けて2種類あります。 ・訪問者のためのもので、ユー

記事を読む

プラグインPubSubHubbubで記事更新リアルタイム通知

PubSubHubbub PubSubHubbubは、パブサブハブバブと読みます。 略して、P

記事を読む

WordPress-Stinger3のタイトルをロゴ画像に変更

ロゴ画像ができました。 アップロードしてヘッダーのタイトルを変えてみます(^^)  

記事を読む

サイトマップをグローバルメニューに表示するⅡ 設定

前回までの記事でサイトマップや、カテゴリー別の一覧ページを作成しました。 これらをメニューとし

記事を読む

こんなことがしたい!Shortcodes Ultimateで簡単記事装飾

「Shortcodes Ultimate」をインストールすると、ショートコードで簡単に記事の装飾がで

記事を読む

お名前.comからXserverにドメイン移管 | 躓きまとめ

いろいろありましたが、なんとか無事移管完了になりました。 すんなりいったわけではなく、躓きもいろい

記事を読む

スポンサーリンク




Message

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


後片付け
バーベキュー初心者 現地でやることは?炭おこしや焼き方&後片付け

前回の続きです。 バーベキュー初心者 はじめての場合に必要な準備

バーベキュー初心者 はじめての場合に必要な準備とやることやいるもの

暖かくなるとバーベキューなんてやってみたくなりますよね(^^)

駄菓子から元祖梅ジャムが消えた 昭和の味駄菓子の歴史と駄菓子屋の今

この前ニュースというか、テレビで梅ジャムが消えたという話題をやっていた

エプロンとは?いつから?つける意味や必要は?メリットを考えてみた

普段エプロンてつけていますか?つける派つけない派ありますが、もとい、エ

菖蒲湯のショウブには花がない?花菖蒲とあやめや杜若の見分け方は?

5月5日の菖蒲湯に使う菖蒲って、今まで花をよけて葉の部分だけを使うのだ

→もっと見る

  • こんにちは。波空です

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

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

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

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

PAGE TOP ↑