*

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

公開日: : 最終更新日:2019/10/28 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の記述です。

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

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

スマホでズレる場合の解決方法をUPしました。

イメージマップがスマホでずれる!プラグインで簡単解決

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

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

WordPress一覧へ


にほんブログ村


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

スポンサーリンク




スポンサーリンク




Comment

  1. なな より:

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

    • 波空 波空 より:

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

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

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

Message

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


自転車の違反て意外と知らないことが多い?つい、でも罰金は5万円!

  身近でもみかける自転車事故や違反。 自分は大

自転車保険加入が2020年4月から東京都でも義務化って知ってた?

自転車保険の義務化?日頃自転車利用の多いので気になる話題です。

お正月に関する記事一覧

日本の伝統的な行事、慣習としてお正月があります。 12月

普通のSuicaをMySuica(記名式)にするには?変更のしかたから登録まで

2019年10月1日からSuicaが鉄道利用でもポイントがつくよう

OneDriveでWindows7から10にデータ移行を簡単に

  クラウドを利用したONEドライブというサービスを利

→もっと見る

  • こんにちは。波空です

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

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

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

PAGE TOP ↑