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

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/

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

  • publish_advertise
2013/04/12

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

 

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

 

今回は、その「Lightbox2」をウェブ上に設置する方法をご紹介いたします。

 

◆「Lightbox2」のアップロード

 

ダウンロードしたZIPファイル「lightbox2.51.zip」を展開すると、たくさんのファイルが出てきます。

それらのほとんどは説明用のサンプルですから、アップロードの必要はありません。

ウェブ上にアップロードする必要があるファイルは、以下の通りです。

各ファイルを抜き出すのが面倒なら、全ファイルをそのままアップロードしても機能上の問題はありません。

 


 ■imagesフォルダ内:
   close.png
   loading.gif
   next.png
   prev.png

 ■jsフォルダ内:
   jquery-1.7.2.min.js
   lightbox.js

 ■cssフォルダ内:
   lightbox.css


 

 

フォルダ構成(フォルダ名やフォルダの位置関係)は崩さずに、そのままアップロードする方が無難です。

 

つまり、

 

 ・imagesフォルダ内のファイルは「images」という名称のフォルダに、
 ・jsフォルダ内のファイルは「js」という名称のフォルダに、
 ・cssフォルダ内のファイルは「css」という名称のフォルダに、

 

それぞれアップロードします。

もし、フォルダ名を変更したり、位置関係を変更してアップロードした場合は、スクリプトやCSSの修正が必要になります。

 

◆「Lightbox2」を読み込む方法

 

Lightbox2を使いたいページのhead要素内(~の間)に、以下のような3行を追記します。

 



<script src=”./js/jquery-1.7.2.min.js”></script>
<script src=”./js/lightbox.js”></script>
<link href=”./css/lightbox.css” rel=”stylesheet”>


 

1行目は、jQuery本体のスクリプトを読み込む記述です。

2行目は、Lightbox2のスクリプトを読み込む記述です。

3行目は、Lightbox2のCSSを読み込む記述です。

 

◆「Lightbox2」を呼び出して使用する方法

 

リンクを作るa要素に「rel=”lightbox”」という属性を加えると、そのリンクがクリックされたときに、Lightbox2が呼び出されるようになります。

 

例えば、
  ・サムネイル画像のファイル名が「photo-mini.jpg」
  ・拡大画像のファイル名が「photo.jpg」
の場合を考えます。

 

普通に、
「サムネイル画像がクリックされたら拡大画像が表示される」
ようにするには、以下のようにリンクを記述します。

 


<a href=”photo.jpg”><img src=”photo-mini.jpg” alt=”写真1″></a>


 

ここで、Lightbox2を使って

「サムネイル画像がクリックされたらその場で拡大画像が表示される」

ようにするには、上記のソースに

「rel=”lightbox”」

を追記して、以下のように記述します。

 


<a href=”photo.jpg” rel=”lightbox”><img src=”photo-mini.jpg” alt=”写真1″></a>


 

この記述によって、「通常のリンク機能」は無効になり、「Lightbox2による拡大画像の表示機能」が有効になります。

 

なお、JavaScriptが無効な環境では、通常の「画像へのリンク」として機能しますから、特に問題は起こりません。

 

書き方については、サンプルページのHTMLソースもご参照ください。

 

サンプルページはコチラ

 

 

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

 

 

 

 

【ご注意ください】

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

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

 

 

 

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

▲ページトップへ戻る

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

▲ページトップへ戻る