*

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

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




 




にほんブログ村


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

スポンサーリンク




関連記事

WordPressのタイトルロゴ PCにあるソフトで作るwebで透過も

Cool Textで簡単にロゴを作る方法を試してみましたが、実際にタイトルにするロゴは別の方法で作成

記事を読む

特定カテゴリーの画像入り一覧ページを作る

特定のカテゴリーを一覧表示して目次のようにしようと 固定ページに画像と簡単な説明つきのものを作って

記事を読む

Shortcodes Ultimateで簡単記事装飾 |基本の使い方!

WordPressの投稿機能(ビジュアルエディタ)は、デフォルトの状態で簡単に記事の装飾ができるボタ

記事を読む

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

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

記事を読む

AddQuicktag でコードやタグを登録WordPressの投稿を便利に

投稿画面のビジュアルでは以前にTinyMCE Advancedでボタンを増やせるという記事を書きまし

記事を読む

イメージマップの画像

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

前回の続きです。 イメージマップの元になる画像を用意し、名前をつけました。 画像の座標も

記事を読む

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

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

記事を読む

画像のキャプチャ編集ができるMonosnapインストールと起動メニュー

Skitchというソフトをおしえてもらいました。 画像に矢印とか文字とか囲い枠とかいれられるソフト

記事を読む

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

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

記事を読む

プラグインWordPress Ping Optimizerでスパム回避のping送信

ブログを作っているとping送信ということばを聞くと思います。 なんだかよくわからないけど、いろ

記事を読む

スポンサーリンク




Message

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


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

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

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

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

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

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

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

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

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

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

→もっと見る

  • こんにちは。波空です

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

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

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

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

PAGE TOP ↑