各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」

All About ホームページ作成ガイド 西村 文宏
All About ホームページ作成ガイド
西村 文宏 (ニシムラ フミヒロ)
2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。著書として、「プロ顔負けのホームページ作成術」・「SEO・SEM使いこなしテクニック」などがあり、最近は作家デビューも果たしている。
コーポレートサイトhttp://allabout.co.jp/gm/gt/1053/
講師PR
RSSフィードを自動生成するフリーソフト「Fumy RSS & Atom Maker」が人気です!『にししふぁくとりー』
http://www.nishishi.com/

サムネイル画像から中央に拡大画像を出す方法(第3回)

  • publish_advertise
2013/04/16

こんにちは。All About ホームページ作成ガイドの西村文宏です。

 

前回は、サムネイル画像から拡大画像を表示させる際に便利な、フリーのスクリプト「Lightbox2」の設置方法と、使い方の基本をご紹介いたしました。

今回は、オプションの利用方法などをご紹介いたします。

 

サンプルページの2段目にある「拡大画像の下にキャプションも加える場合」や、3段目にある「複数枚の拡大画像を連続閲覧できるようにする場合」の動作もあわせてご覧ください。

 

サンプルページはコチラ

 

◆画像にキャプションを加える方法

 

拡大画像を表示させたときに、拡大画像の下部にキャプション(説明文)を表示できます。

方法は、キャプションとして表示させたい文字列を、リンク(a要素)のtitle属性に追記するだけです。

例えば、以下のように記述すると、「海へ行ってきた写真」という文字列がキャプションとして、拡大画像の下部に表示されます。

 


<a href=”sea.jpg” rel=”lightbox” title=”海へ行ってきた写真”><img src=”sea-mini.jpg” alt=”海”></a>


 

※img要素のalt属性値に指定している「海」の方は、サムネイル画像が何らかの理由で表示されなかった場合に使われる代替文字です。

 

◆複数の画像をグループ分けする方法

 

これまでの書き方では、拡大画像は1枚ずつしか閲覧できません。

HTMLソース内にグループ名の記述を追加すると、複数枚の拡大画像を連続して閲覧できるようにできます。

たくさんの写真をカテゴリごとに分けておきたい場合などに便利です。

 


<a href=”sea1.jpg” rel=”lightbox”><img src=”wd3-m.jpg” alt=”森林3″></a>


 

上記のように記述すると、

 

(1) seaグループ(=rel属性値に lightbox を記述したグループ)

(2) forestグループ(=rel属性値に lightbox を記述したグループ)

 

の2つのグループができ、グループ別に拡大画像を連続閲覧できます。

例えば、「海1」の拡大画像が表示されているとき、写真内の右寄りにマウスを載せると、「右向き矢印」が写真に重なるように表示されます。

 

それをクリックすると、次の写真「海2」の拡大画像が表示されます。

「海2」の拡大画像が表示されているとき、写真内の左寄りにマウスを載せると、「左向き矢印」が表示され、右寄りにマウスを載せると「右向き矢印」が表示されます。

 

左向き矢印をクリックすると、前の写真「海1」の拡大画像が表示されます。右向き矢印をクリックすると、次の写真「海3」の拡大画像が表示されます。

 

連続閲覧はグループ単位になるため、「海3」の拡大画像が表示されているときには、(次の「森林1」を表示するための)右向き矢印は表示されません。

「海2」へ戻る「左向き矢印」だけが表示されます。

 

◆閉じるボタンなどの「Lightbox2を構成する画像」が表示されない場合

 

Lightbox2のアップロード先によっては、スクリプトの修正が必要です。もし、「閉じる」ボタンや「読込中」を示す画像が表示されない場合は、以下の箇所を修正してみてください。

jsフォルダ内の lightbox.js の50~57行目には以下のように書かれています。

 


    function LightboxOptions() {
      this.fileLoadingImage = ‘images/loading.gif’;
      this.fileCloseImage = ‘images/close.png’;
      this.resizeDuration = 700;
      this.fadeDuration = 500;
      this.labelImage = “Image”;
      this.labelOf = “of”;
    }


 

ここで、読込中を示す loading.gif と、閉じるボタン close.png の場所を記述しています。

この場所を、必要に応じて修正してください。

例えば、Lightbox2自体をlightboxフォルダ(ディレクトリ)に入れているなら、51行目と52行目を以下のように修正します。

 


     this.fileLoadingImage = ‘./lightbox/images/loading.gif’;
     this.fileCloseImage = ‘./lightbox/images/close.png’;


 

さて、これまで3回に渡って、サムネイル画像から拡大画像を表示させる際に便利な、フリーのスクリプト「Lightbox2」の使い方をご紹介いたしました。

 

たくさんのサムネイル画像を並べたい場合には、とても便利です。

ぜひ、お試しください。

 

 

 

 

【ご注意ください】

このコンテンツで紹介されているサイトおよびサービス(ツール)は、
アクセストレードが運営するものではありません。必ず使用方法や注意
事項等をよく理解した上で、ご自身の判断のもとでご利用ください。

万が一、損害・トラブル等が生じた場合も、執筆者およびアクセス
トレードは責任を負いかねますので、あらかじめご了承ください。

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
<<前の記事に戻る  
続編
2013.04.09
サムネイル画像から中央に拡大画像を出す方法(第1回)
2013.04.12
サムネイル画像から中央に拡大画像を出す方法(第2回)

▲ページトップへ戻る

1CLICKアンケート!!
Loading...
1CLICKアンケート!!
アフィリエイトで稼ぐための心構え3カ条
1.「稼ぐ気持ち」を出しすぎない
稼ぎたい気持ちが全面に出ていると、ユーザーはサイトに対し良い印象を持ちません。
2.「納得できる方法」で稼ぐ
報酬額ばかりで選ばず、自分自身がお薦めできるプログラムを心が伝わるように紹介しましょう。
3.実績のある方法や考え方などを「学ぶ」
「成功者のノウハウ」、「今盛り上がっている市場は?」など、常に最新情報をキャッチし、実践できているかどうかが、アフィリエイト成功のカギ。アフィ大では、アフィリエイトで稼ぐためのお役立ち情報を数多くの成功者が発信しています。ぜひご活用ください!

▲ページトップへ戻る