各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」
-
All About ホームページ作成ガイド
西村 文宏 （ニシムラ フミヒロ） - 2001年より、その道のプロ（専門家）が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。著書として、「プロ顔負けのホームページ作成術」・「SEO・SEM使いこなしテクニック」などがあり、最近は作家デビューも果たしている。
http://allabout.co.jp/gm/gt/1053/
http://www.nishishi.com/
サムネイル画像から中央に拡大画像を出す方法(第1回)
- 2013/04/09
こんにちは。All About ホームページ作成ガイドの西村文宏です。
アフィリエイトサイトなら、商品写真を掲載する機会も多いでしょう。
写真をたくさん掲載したい場合は、サムネイル画像（小さい写真）の状態で並べておき、クリックされたときに拡大写真が表示されるような構成にすると、見やすくて分かりやすいページになります。サムネイル画像がクリックされたとき、
1. ページ全体が暗転
2. 中央に拡大画像が表示される
3. 暗転した余白をクリックすると元の表示に戻る
という機能を用意しておくと便利です。
このような機能を実現できるスクリプトはいくつかありますが、今回は、JavaScriptで作られた「Lightbox2」というフリーのスクリプトを使う方法をご紹介いたします。
◆「Lightbox2」を活用するメリット
「Lightbox2」で表示される拡大画像は、その場で（表示中のページに上から重なるようにして）表示されます。
そのため、ページを移動したり、サブウインドウを出したりするわずらわしさがありません。
閲覧者に面倒な操作を強いることなく、スムーズに拡大写真を見せられます。サンプルページを用意していますので、ブラウザで見てみてください。
サンプルページはコチラ
各サムネイル画像をクリックすると、拡大画像が表示されます。
欄外をクリックするか、拡大画像の右下にある[×]ボタンをクリックすると元の表示に戻ります。
◆「Lightbox2」を入手する方法
「Lightbox2」は、以下コチラのサイトで配布されています。
1. 左側メニューから「DOWNLOAD」をクリック
2. 「Lightbox」という文字と箱のイラストが描かれた
大きなボタン画像をクリック
上記の手順で、ZIP形式で圧縮されたファイルをダウンロードできます。
本稿執筆時点での最新版は Ver 2.51 で、ダウンロードできるファイル名は、
lightbox2.51.zip でした。具体的な設置方法は、次回にご紹介いたします。
【ご注意ください】
このコンテンツで紹介されているサイトおよびサービス（ツール）は、
アクセストレードが運営するものではありません。必ず使用方法や注意
事項等をよく理解した上で、ご自身の判断のもとでご利用ください。万が一、損害・トラブル等が生じた場合も、執筆者およびアクセス
トレードは責任を負いかねますので、あらかじめご了承ください。
-
- 2013.04.12
サムネイル画像から中央に拡大画像を出す方法(第2回)
- 2013.04.16
- サムネイル画像から中央に拡大画像を出す方法(第3回)
- 1.「稼ぐ気持ち」を出しすぎない
- 稼ぎたい気持ちが全面に出ていると、ユーザーはサイトに対し良い印象を持ちません。
- 2.「納得できる方法」で稼ぐ
- 報酬額ばかりで選ばず、自分自身がお薦めできるプログラムを心が伝わるように紹介しましょう。
- 3.実績のある方法や考え方などを「学ぶ」
- 「成功者のノウハウ」、「今盛り上がっている市場は？」など、常に最新情報をキャッチし、実践できているかどうかが、アフィリエイト成功のカギ。アフィ大では、アフィリエイトで稼ぐためのお役立ち情報を数多くの成功者が発信しています。ぜひご活用ください！
