重なりあった画像でも1枚1枚クリックできる「イメージマップ」

前記事で重なった画像のそれぞれをクリックすると、1枚ずつの画像が大きく表示されるようにしていましたが、その方法をコメント欄でご質問いただきましたので記事にしておきます。



『画像の一部にリンクする「イメージマップ」』で説明した方法を使っています。

collage-2015-10-18.png①このようなコラージュ画像を作成します。

前記事で使ったコラージュ画像は「Shape Collage」というフリーソフトを使っていますが、パソコンにインストールしたり、フリーバージョンではウォーターマークが付加されたりするので、ここでの説明は「PhotoCollage.net」というWEBアプリを使っています。
(「Shape Collage」というフリーソフトの使い方については『たくさんの写真をコラージュ「Shape Collage」』を参考にしてください。
ただし、古いバージョンでの説明ですので、最新バージョンとは多少操作が変わっているかもしれません。)


2015101801.jpgPhotoCollage.net」でのコラージュの作り方を説明します。

上記サイトの「PHOTO COLLAGE」アイコン、または「Get Started」をクリックして始めます。

2015101802.jpgここではイメージマップに使うための画像を作りますので、サイズの設定が必要になります。

ブログに貼り付ける大きさを設定します。
ブログの記事欄の幅より小さい数字で幅を設定してください。
このブログの場合は記事欄の幅が485ですので、ここでは450幅×高さは(適当に)450で作ってみます。

「Collage」→「Custom canvas size」をクリックします。

2015101803.jpg「Enter size」の欄に作りたい大きさを入力します。
この時「×(かける)」は「半角のx(エックス)」で入力してください。
ここでは「450x450」と入力しました。

2015101804.jpg使いたい画像をドラッグします。

2015101805.jpg画像をクリックするとハンドルが現れます。
拡大・縮小・回転・移動したり、重ね順を変えたりしながら整えます。

上部のアイコンをクリックしても動かしたりできます。
(下記画像参照)

2015101814.jpg

2015101813.jpg「Collage」→「Set background」で背景を設定できます。
初期設定では背景は「透明」になっています。
(下記参照)

ただし、プリセットの画像は任意のサイズでは使えないようです。

2015101815.jpg

2015101806.jpgできあがった画像を保存します。

「File」→「Save as ◯◯」を選択します。
ここでは背景を透明にしているので、「Save as PNG」を選択しました。

2015101807.jpg「ファイルを保存する」にチェックして「OK」。

以上でコラージュ画像ができました。

余談ですが、このWEBアプリ、いろいろとできて楽しそうですよ♪
試してみてくださいね!

続いてコラージュ画像のそれぞれの写真をクリックすると、その写真が大きく表示されるようにする方法です。

②イメージマップを作ります。

冒頭でも伝えたとおりここからは「イメージマップ」を使います。
以前書いた説明文では「ペイント」を使って座標を出しましたが、今回はWEB上で「イメージマップ」タグを作ってくれる「HTML Imagemap Generator」というサイトを利用してみます。
日本の会社が作っておられるサイトのようで、日本語で使用方法も書いてあり、使いやすいと思いますが、今回は「多角形」のイメージマップの作り方を書いておきます。

2015101808.jpgHTML Imagemap Generator」を開き、先ほど作ったコラージュ画像をドラッグします。

2015101809.jpg右上の「多角形を描く」をクリックします。

画像の写真を一枚ずつ、一筆書きをするように「クリックできる範囲」の角をクリックしていきます。
例えば上部左の写真の「クリックできる範囲」を決める場合は、①の点(角)をクリック→②の点(角)をクリック→③の点(角)をクリック→④の点(角)をクリック……という感じです。(周り順はどちらでもOK。)
クリックしていくとその範囲が青くなります。
範囲が決まったら「Esc」キーを押します。
そうすると確定されて右側にそのタグが表示されます。

これをすべての画像に同様に行います。

2015101810.jpg上部右側の画像を選択する場合も
右上の「多角形を描く」をクリック→範囲の角・角をそれぞれクリック(ここでは①②③④⑤)→青色範囲を確認の上「Esc」キーで確定→右側にタグが追加される
といった手順です。

2015101811.jpgすべての画像の範囲が確定したら、右側に表示されているタグをコピーします。

この時、写真の並び順(どの行がどの写真か)をよく覚えておいてください。


2015101812.gif③ブログで表示されるようにします。
(FC2での説明になりますので、他のブログの場合は適当に読み替えてください。)

「ImagemapGenerator」でコピーしたタグを記事編集欄に貼り付けます。

表示させる画像、リンク先の画像をそれぞれ設定していきます。
表示させる画像(コラージュ画像)、リンク先の画像(それぞれの画像)をすべてFC2にアップロードします。

記事欄に貼り付けたタグのそれぞれのURLを書き換えていきます。
←黄色部分は表示させる画像(コラージュ画像)のURL。
赤・青・緑部分はリンク先(クリックしたら表示される)のそれぞれのURL。

もしも表示させる画像(コラージュ画像)が複数枚ある場合は1行目・2行目の「#ImageMap」の部分の名前を変更して、それぞれの画像が判別できるようにしておきます。
例:1枚目の画像

<img src="https://blog-imgs-83.fc2.com/s/a/k/sakuraxren/collage20151018.png" usemap="#ImageMap20151018-1" alt="" target="_blank"/>
<map name="ImageMap20151018-1">

別の画像

<img src="https://blog-imgs-83.fc2.com/s/a/k/sakuraxren/collage20151019.png" usemap="#ImageMap20151018-2" alt="" />
<map name="ImageMap20151018-2">

target="_blank"」を付加すると、リンク先の画像が別タブ(別ウィンドウ)で表示されます。

以上で重なりあった画像でもそれぞれの写真をクリックすると大きな画像が1枚ずつ見れるようになります。


関連記事

2 Comments

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/10/26 (Mon) 20:52 | REPLY |   

れん  

2015/10/26(Mon) 20:52様

メール入れました。
ご確認くださいね。

2015/10/27 (Tue) 11:34 | EDIT | REPLY |   

Post a comment