*

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一覧へ






にほんブログ村


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

スポンサーリンク




スポンサーリンク




Comment

  1. 田中 より:

    参考にさせていただいています。ありがとうございます。

    実際にやってみているのですが、プレビューしてみる指定している場所とは違う場所にリンクが貼られてしまいます。
    PCで確認しているので、ブラウザの横幅を広げてみると、その違う場所が移動します。

    おそらく、図の方はブラウザの幅によって縮尺が変わっているのに対して、指定している場所は絶対的な位置を示しているのかなとも思えます。

    元図が横1290x縦5906なのですが、大きすぎますでしょうか。

    対策がわかると嬉しいです。

    • 波空 波空 より:

      田中さま
      ご覧いただきありがとうございます^^波空です。
      画像サイズが大きすぎるのが原因ではないかと思います。
      私が普段使用している画像サイズは元図はほとんど640×480ですが、記事にフルサイズでメディアの追加をした場合、
      自動的に?画面の表示サイズの最大値に直されるようでした。(これはテーマによって違うのかもしれませんが・・)
      550くらいの幅になってしまいます。

      作成している時に座標をとるのに元図で座標を設定してしまうと、記事にした時にその分ずれがでました。
      なので、元図自体を画面の表示幅に合わせて、550くらいに縮小して、そこで座標を測りました。
      これだとずれません^^
      田中さまのお使いのテーマの使用にもよるかもしれませんが、一度元図のサイズを
      お使いのテーマの幅にあわせてやってみていただけたらと思います< (_ _)>
      波空

      • 田中 より:

        波空さま、返信ありがとうございます。

        図を小さくしてやってみたところ、PC上では上手くいきました。

        そのままの状態で、スマホからアクセスをしてみたのですが、やはりずれてしまいました。

        で、またそのままの状態で、PCのブラウザの横幅を縮めて、図の表示がさらに小さくなるようにしてやると、やはりリンクの位置はずれてしまいました。

        図がたとえば550の幅で表示できているときは、良いのですが、スマホやブラウザの大きさによって本来の550の幅で表示できないときは、ダメみたいですね。

        リンクの座標が、図の表示サイズの相対値で設定できると解消できるのかもしれません。
        ということは言えるのですが、どうコーティングしたらよいのかわかりません(^-^;

        • 波空 波空 より:

          田中さま

          返信遅くなり申し訳ありません。
          自分であまりスマホでの確認をしなかったので、あらためてみたところ・・・しっかりずれてましたね(^^;
          手さぐりでサイトのカスタマイズをしているので、あまり詳しくないので、解決策を探してみました
          プラグインで簡単にできるようです。
          よかったら試してみてください。
          私も自分のページの1つに試して確認してみました。
          これでいけると思います。
          jQueryのプラグイン「RWD Image Maps」を使ってみました。

          リンクを書いておきますので、そちらのサイトを参考に導入していただければと思います。

          web雑記帳 https://motoshige.net/blog/archives/6906

          分かりにくかったら「クリッカブルマップ レスポンシブ」などで検索してみると
          同様のサイトがみつかると思います^^

Message

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


エックスサーバーにWordPress設定そしてStinger8導入

前回、エックスドメインで独自ドメインを取得し、エックスサーバー

エックスサーバーにエックスドメインで取得したドメインを簡単設定

このブログもかなり内容がぐちゃぐちゃになってきたので、整理しようと思い

これってウソ?ホント?方向音痴の原因と治し方

あなたはよく道に迷いますか?私は間違いなく方向音痴です。 かなり前に

浴衣に合うミディアムヘアの髪型と簡単アレンジ 黒髪に合う浴衣と髪型は?

いよいよ夏本番! 夏と言えば海にお祭りに花火大会・・と楽

便座がベキッと割れた!賃貸での修繕費は家主?借主?

先週、トイレにはいったところ・・・腰をおろすといきなり「ベキッ!」と音

→もっと見る

  • こんにちは。波空です

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

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

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

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

PAGE TOP ↑