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

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/

複数のサムネイル画像から拡大画像をスライド表示させる方法(第1回)

  • publish_advertise
2013/10/17

 

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

 

ある商品を紹介するページを作成する際、色違い商品やアングルを変えた写真など、

1つの商品に対して複数の画像を掲載したいことがあります。

 

たいていは、1つの画像だけを大きく掲載しておき、他の画像はサムネイルの形で並べておくレイアウトを採用されるのではないでしょうか。

 

そのようなレイアウトで、複数の商品画像を「使いやすく」かつ「おもしろく」見せる効果が出せる「FlexSlider2」というスクリプトがあります。

 

下記のサンプルページをご覧ください。

このページは、「FlexSlider2」を使って、4枚の写真を掲載した例です。

 

サンプルページはコチラ

 

上記のサンプルページでは、最初に1つの写真が大きく掲載されていて、その下に4つのサムネイル写真が掲載されています。

 

閲覧者が何も操作しなければ、5秒ごとに自動的に右方向にスライド(アニメーション)して、次々に写真が切り替わっていきます。

 

閲覧者がサムネイル写真をクリックすれば、対応する拡大写真の位置までスライドします。

このような機能が、短いHTMLを記述するだけで簡単に使えます。

 

今回は、この「FlexSlider2」を使う方法をご紹介いたします。

 

■FlexSlider2をダウンロード

「FlexSlider2」は、以下の配布サイトからダウンロードできます。

 

▽FlexSlider2配布サイトはコチラ

 

右側のサイドバーにある「Download ZIP」のボタンをクリックすると、一式をZIP形式でダウンロードできます。

 

このZIPファイルの中には、サンプルも含めて多くのファイルが含まれていますが、自サイト上にアップロードする必要があるのは、「jquery.flexslider-min.js」と
「flexslider.css」の2ファイルだけです。

 

■FlexSlider2を使うための記述

「FlexSlider2」を使うには、HTML内に以下のように記述します。

記述する箇所と内容は、大きく分けて3つあります。

 

1. 『head要素内で、CSSとJSファイルを読み込む』

 


<link rel=”stylesheet” href=”flexslider.css” type=”text/css”>
   <script src=”http://code.jquery.com/jquery-1.10.2.min.js”></script>
   <script src=”jquery.flexslider-min.js”></script>


 

1行目と3行目は、「FlexSlider2」の構成ファイルです。

2行目は、「jQuery」本体を読み込んでいます。

 

ここではCDNサーバから読み込んでいますが、自身のウェブサイト上に既にあるなら、そちらを読み込んでも構いません。

 

2.『 body要素内に、ul要素とli要素を使ってリストの形で画像を記述』

 


   <div>
      <ul>
         <li data-thumb=”flower1.jpg”>
            <img src=”flower1.jpg” alt=”花1″>
         </li>
         <li data-thumb=”flower2.jpg”>
            <img src=”flower2.jpg” alt=”花2″>
         </li>
         <li data-thumb=”flower3.jpg”>
            <img src=”flower3.jpg” alt=”花3″>
         </li>
         <li data-thumb=”flower4.jpg”>
            <img src=”flower4.jpg” alt=”花4″>
         </li>
      </ul>
   </div>


 

上記では、4枚の画像「flower1.jpg」~「flower4.jpg」を掲載しています。

 

拡大用画像をimg要素のsrc属性の値に記述し、サムネイル用画像をli要素のdata-thumb属性の値に記述します。

 

拡大用画像とサムネイル用画像は、同じ画像を指定しても構いませんし、異なる画像を指定しても構いません。

 

 

3. 『body要素の最後にスクリプトを実行する記述を加える』

 


   <script type=”text/javascript”>
      $(window).load(function() {
         $(‘.flexslider’).flexslider({
            animation: “slide”,
            controlNav: “thumbnails”
         });
      });
   </script>


 

上記のJavaScriptソースは、HTMLファイルの末尾(タグの直前)あたりに書いておきます。

 

ここでは特に修正はせず、上記のソースをそのままコピー&ペーストしてみてください。

 

以上のように記述すると、冒頭のサンプルページのように表示されるようになります。

 

なお、このスクリプト「FlexSlider2」には、他にも様々な表示効果が出せるオプションが用意されています。

それらについては、次回にご紹介いたします。

 

 

 

【ご注意ください】

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

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

 

 

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
続きを読む>>
続編
2013.10.22
複数のサムネイル画像から拡大画像をスライド表示させる方法(第2回)

▲ページトップへ戻る

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

▲ページトップへ戻る