*

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

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

イメージマップとは


ホームページビルダーを使っていた時に1枚の画像に複数のリンク先を指定できるクリッカブルマップ(イメージマップ)というのがありました。

検索したページに地図などがあって、その地図のある地域をクリックすることで詳細ページが表示されるという・・・あれです。

以前はソフトの力を借りて、クリックだけで設定ができ、HTMLがよくわからなくても使用できました。

スポンサーリンク


 
これをWordPressでできないものかと、わからないながらもホームページビルダーのHTMLを参照。

なんとなく理解できたところで、画像の範囲を指定する座標のとり方やなんやかや調べて・・・

どうにか形になったので、忘れないために方法を書いてみました。

1枚の画像に複数のリンクを設定する


文字や画像をクリックすることで見てほしいページにジャンプ。

これは普通にリンクを貼ればWordPressの操作アイコンで指定できます。

でも1枚の画像のある部分をクリックすればあっちへ、違う部分をクリックすればこっちへ・・・と

リンクする場所をいろいろ設定したいときにどうすればいいんだろうと、悩んだことがありました。

あなたもそんな風に思う事ってありませんか?
できるとけっこう便利ですよね(^^)

例として次のような画像にイメージマップでリンクを設定してみました。

 

roboto
ネスレ宇治抹茶
ホットアイマスク
バレンタイン
ショートコード
吹き出し
ページジャンプ

この画像のいろいろな部分にリンクを設定してあります。

試しにクリックしてみてください(^o^)

イメージマップの作り方


イメージマップにリンクの範囲を指定するには、

四角形や円形の他に多角形などいろいろな形で指定できます。

イメージマップの作製はHTMLだけでできるので、今一つわかっていない私にもできました。

では、作り方です。

準備 画像を用意する


1.元になる1枚の画像を用意します。

2.画像から範囲を指定するための座標を調べます。

最初にイメージマップにしたい画像表示させますが
通常の img src~ のあとに 「img usemap=”マップを指定する名前”」で

「マップの名前」を記述します。

マップ名の前には #記号をつけます。

ここでは”#umap” とした部分です

<img src=”画像のファイル名” width=”350″ height=”300″ usemap=”#umap”>

次に画像の中の「リンクさせる範囲」を指定しますが、

ここでどうやって座標というか範囲を決めるかとなるわけです。

ソフトの力に頼っていたころはマウスのドラッグで簡単に設定していましたから・・・

 
スポンサーリンク

 

画像に範囲を指定する方法


イメージマップにリンクを設定するには

画像の「どこに」という範囲の指定が必要です。

範囲の座標を調べて記述しなければなりません。

例えば四角形なら左上のxとy、そして右下のxとyという具合です。

形によって指定する座標の位置


・リンクを四角計にするのに必要な座標

「左上の座標(X,Y) , 右下の座標(X,Y)」(合計4つの値)を指定します。

・リンクを多角形にするのに必要な座標

「すべての点の座標(X,Y)」を必要なだけ順番に指定します。

・リンクを円形にするのに必要な座標

「中心の座標(X,Y) , 半径」(合計3つの値)を指定します。

 
まずはPCに入っているソフトを使って座標を特定します。
Windowsの場合「ペイント」で調べることができます。

・「スタート」⇒「アクセサリ」から「ペイント」を起動します。

・イメージマップに使用する画像を読み込みます。

ペイントに画像を読み込む
・画像の上でマウスを動かすと、マウスポインタの座標がウィンドウの下のステータスバーに表示されます。

座標
 
・例ではロボットの目の部分を四角形に囲みたいと思った場合です。

下の図のように四角形の左上にあたる位置と右下にあたる位置の座標をメモっておきます。

座標位置
円形や多角形も同様に、範囲指定したい場所を想定して、座標をメモしておきます。

画像の座標が特定できたらあとはイメージマップにするためのHTMLの記述です。

ここまで準備ができたら、すぐできます。

というところで・・・この続きは次回に

前の記事 指定場所にジャンプ!簡単タグでページ内リンク
次の記事 1枚の画像で複数リンク!イメージマップの作り方

WordPressのイメージマップにSmartArtを使う時の手順

WordPress一覧へ





にほんブログ村


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

スポンサーリンク




スポンサーリンク




Comment

  1. なな より:

    わかりやすい記事ありがとうございます。
    イメージマップの記事が2つに分かれていますが、パソコンで見たときに、1つの記事でまとめたれていたほうがわかりやすいです。
    ご検討ください。

    • 波空 より:

      つたない記事ですが読んでいただきありがとうございます(^o^)

      貴重なご意見ありがとうございます< (_ _)>

      これから記事を作るときに参考にさせていただきます!!

Message

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


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

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

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

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

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

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

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

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

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

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

→もっと見る

  • こんにちは。波空です

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

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

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

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

PAGE TOP ↑