各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」
こんにちは。All About ホームページ作成ガイドの西村文宏です。
アフィリエイトサイトなら、商品写真を掲載する機会も多いでしょう。
写真をたくさん掲載したい場合は、サムネイル画像(小さい写真)の状態で並べておき、クリックされたときに拡大写真が表示されるような構成にすると、見やすくて分かりやすいページになります。サムネイル画像がクリックされたとき、
1. ページ全体が暗転
2. 中央に拡大画像が表示される
3. 暗転した余白をクリックすると元の表示に戻る
という機能を用意しておくと便利です。
このような機能を実現できるスクリプトはいくつかありますが、今回は、JavaScriptで作られた「Lightbox2」というフリーのスクリプトを使う方法をご紹介いたします。
◆「Lightbox2」を活用するメリット
「Lightbox2」で表示される拡大画像は、その場で(表示中のページに上から重なるようにして)表示されます。
そのため、ページを移動したり、サブウインドウを出したりするわずらわしさがありません。
閲覧者に面倒な操作を強いることなく、スムーズに拡大写真を見せられます。サンプルページを用意していますので、ブラウザで見てみてください。
サンプルページはコチラ
各サムネイル画像をクリックすると、拡大画像が表示されます。
欄外をクリックするか、拡大画像の右下にある[×]ボタンをクリックすると元の表示に戻ります。
◆「Lightbox2」を入手する方法
「Lightbox2」は、以下コチラのサイトで配布されています。
1. 左側メニューから「DOWNLOAD」をクリック
2. 「Lightbox」という文字と箱のイラストが描かれた
大きなボタン画像をクリック
上記の手順で、ZIP形式で圧縮されたファイルをダウンロードできます。
本稿執筆時点での最新版は Ver 2.51 で、ダウンロードできるファイル名は、
lightbox2.51.zip でした。
具体的な設置方法は、次回にご紹介いたします。
【ご注意ください】
このコンテンツで紹介されているサイトおよびサービス(ツール)は、
アクセストレードが運営するものではありません。必ず使用方法や注意
事項等をよく理解した上で、ご自身の判断のもとでご利用ください。
万が一、損害・トラブル等が生じた場合も、執筆者およびアクセス
トレードは責任を負いかねますので、あらかじめご了承ください。