『イメージマップ』を使って、画像の読み込み回数を減らしブログを高速に表示!

ページ

 

『イメージマップ』を使って、画像の読み込み回数を減らしブログを高速に表示!

2014年3月16日日曜日
『イメージマップ』を使って、画像の読み込み回数を減らしブログを高速に表示!

ブログを管理する人にとって、サイトの表示速度って結構気になってきますよね?ブログで画像リンクを利用していると、画像の数だけ読み込み速度に影響があります。そこで、「イメージマップ」をつかって画像の読み込み回数を減らしましょう!というブログTIPSをご紹介します。

ブログ表示をちょっとでも軽くしたい人に送るTIPSです。記事では、イメージマップの当ブログでの例と、簡単に作成できるWEBサービスを紹介します。

イメージマップの例

イメージマップを使うとどうなるの?

喫茶店の部屋のサイドバーがこうなっている

例えば、当ブログ『喫茶店の部屋』を例にあげます。

ブログPC表示のサイドバー。Google+やFacebookページのリンクが張ってあるのですが、実はこれは一枚の画像なのです。一枚の画像に複数のリンクを作成することが出来ます。

通常なら、リンクの数だけ画像を用意して、画像それぞれにリンクを作成します。すると画像の回数分だけ画像を読み込みに行くわけです。この「イメージマップ」を使えば、画像を1枚だけ読み込むだけで良いのです。

つまり、
ちょっとだけ負担が減る

これは覚えておいて良いと思います。

イメージマップの細かい説明

イメージマップの細かい説明は、めちゃくちゃめんどくさいので参照サイトだけ用意します。

■:イメージマップを作成する | 目的別 HTMLリファレンス | Tagland [HTML & Stylesheet解説]
■:HTMLタグ/イメージタグ/画像内に複数リンクを設定する - TAG index Webサイト
■:マップ <MAP> <AREA> - HTMLタグリファレンス/Tips

まぁ、よく読まないとわからないので、ここは無視して良いと思います。言葉にすると、「画像の座標ごとにリンクを貼る」ぐらいの説明をさせていただきます。

イメージマップを作る

『HTML Map Creator』を使おう

『イメージマップ』を使うにはHTMLタグを直打ちでも作ることができます。しかし、それではめちゃくちゃめんどくさいので『HTML MAP Creator』というWEBサービスを使って、簡単に『イメージマップ』を作ってみましょう。


このサービスで必要な物は「アップ済み画像のURL」です。さきに、当ブログのサイドバーのように複数のリンクを付けたい画像を用意します。僕はPhotoshopを利用させていただきました。

実際に作ってみる

やることはとっても簡単で、

①用意した画像のURLを入れる

②座標を選択する

③URLと説明文を入れ、クリック後の動作を選択する

①~③をリンクの数だけ繰り返す

htmlタグをコピペ

イメージマップで幸せ!

という感じの流れです。まぁ、使ったらわかります。

画像URLを入れます

まずはURLを入れます

HTML Map Creatorを早速使ってみましょう。まずは、先に用意しておいた画像URLを用意します。STEP 1 - Select Your ImageのところにURLを入れて「Start!」を押すだけです。

座標を選択する

リンクの座標を選択する

つぎに、画像の座標を選択します。「ここにリンクがほしいな」というところをヅラッグすると上記画像の下段のようにテキストボックスが出現します。

このテキストボックスには「その場所に当てたいリンクURL」と「リンクのAlt(説明)」を入れます。

リンクをクリックするとどういう動作をするかは、すぐ下にある「Enter link target」で選びます。


  • Same Window(同じタブに表示)
  • New Window(新しいタブに表示)
  • Parent Window(新しいウィンドウに表示)

このように、クリック後のサイト表示方法を選べるわけです。

※この時点ではClick here to finishは押しません。

2枚目の座標を選択してみる

こうやって複数の場所を選択できます。

もう一つの場所にも座標を作ってみましょう。もう一つ、先ほどと同様にドラッグしてみると、新たなテキストボックスが出現します。先程と同様にURLとAltを入力します。

このように複数の座標をリンクにすることが出来ます。リンクさせたいすべての座標を入力し終えたら「Click here to finish」をクリックします。

あとはコードをコピペ

コードは2種類出てきます。

Click here to finishをおした後にHTMLタグが2種類出現します。「HTML Map Code」と「CSS Map Code」です。これは使いたい方を選択して下さい。そのコードをブログの表示させたい場所に貼り付けたら「イメージマップ」が見事使えます。

お疲れ様でした!

詳しい仕組みを知りたい人は、以下のリンクよりどうぞ(上記したのと一緒)

■:イメージマップを作成する | 目的別 HTMLリファレンス | Tagland [HTML & Stylesheet解説]
■:HTMLタグ/イメージタグ/画像内に複数リンクを設定する - TAG index Webサイト
■:マップ <MAP> <AREA> - HTMLタグリファレンス/Tips

kissaten的話

画像を複数使うサイドバーを考えているならば、ぜひ「イメージマップ」をご利用下さい。複数の画像を読み込んだ数だけ、サイト表示に影響が出ちゃいます。なので複数画像を1枚の画像にして、「イメージマップ」化しちゃいましょう!ちょっとしたTIPSでした。

ちなみに、林囓mac@Metal_macさんが「どうやんのこれ?」ということで記事にしました。こういうTIPSはなにげに紹介してなかったですね!

この記事は@kissatenが書きました。今後とも宜しくお願いします。


この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterで喫茶店の部屋をフォローしよう!

 

▶ 関連する新着記事