楽天商品ページでフォトギャラリーを実装！jQueryを使ったデザインの方法。

楽天サイトでフォトギャラリー付き商品ページをつくる！jQueryとCSSと楽天GOLDを使ったデザインの方法。

フォトギャラリーを商品ページに導入したい！でも楽天は制約が多いし難しい…。
そんな楽天サイトを楽天RMS・GOLD・jQuery・CSSを駆使して、
より良いサイトデザインにしてゆくという記事です。
商品の出品周りを一通り理解している方向けとなっています。

1. jQueryをGOLDにアップロード

まずはじめに読み込ませるためのjQueryをGOLDにアップロードしましょう。
最新のjQueryはこちらで無償で提供されています。~~丸投げ~~
https://jquery.com/

2. LightboxをGOLDにアップロード

つづいて今回使用するフォトギャラリーのプラグインLightboxをゴールドにアップロードしましょう
プラグインはこちらで提供されています。~~丸投げその2~~
http://lokeshdhakar.com/projects/lightbox2/

3. フォトギャラリー用のHTMLを作る

ではではLightboxを使用したフォトギャラリーをGOLD上に作ってゆきましょう！
まずは先ほどアップロードしたjQuery、そしてLightboxのCSS/JSファイルをヘッダー内で読み込みましょう。
以下のソースを参考に読み込んでみてください

<!-- jQuery -->
<script src="http://www.rakuten.ne.jp/gold/****/jquery-1.8.2.min.js"></script>

<!-- ライトボックス用CSS/JS -->
<link href="http://www.rakuten.ne.jp/gold/****/lightbox.css" type="text/css" rel="stylesheet" media="all" />
<script src="http://www.rakuten.ne.jp/gold/****/lightbox.js" type="text/javascript"></script>

続いてフォトギャラリー用の画像を読み込んでゆきます。
サムネイルと表示させたい画像の2種類が必要になってきます。
今回はこんな感じのサンプルを用意しました。
サムネイルとサンプル画像

では以下のようなコードを記入してみましょう

<a href="http://www.rakuten.ne.jp/gold/****/01-01.jpg" rel="lightbox[item01]">
<img src="http://www.rakuten.ne.jp/gold/****/thumb_01_02.jpg">
</a>

<a>タグのrel要素に、lightbox[item01] と記載されていますね。
lightboxの部分が「この画像はフォトギャラリーにするんやでー」という意味に、
[item01]の部分が「このitem01って書かれてるやつはひとまとまりなんやでぇ」という意味になってきます。

以上を記入すれば、こんなフォトギャラリーが実装されたのではないでしょうか？
http://www.rakuten.ne.jp/gold/float/special_st/TIPS02/sample01.html

ではでは、少しデザインを加えていってみましょう。
ここからは個々の店舗によって様々だと思いますのでほんの参考程度に。

サンプル素材として何枚か画像を用意しました。
イメージ画像とかアイキャッチとかサムネイルとかサンプル画像とか…

それではではでは、
ギャラリーを表示させている部分を以下のような形に変更します。

<div>
<img src="http://www.rakuten.ne.jp/gold/****/item-01.png">
</div>
<ul class="up">
<li>
<img src="http://www.rakuten.ne.jp/gold/****/thumb_01_01.png">
</li>
<li>
<a href="http://www.rakuten.ne.jp/gold/****/01-01.jpg" rel="lightbox[item01]">
<img src="http://www.rakuten.ne.jp/gold/****/thumb_01_02.jpg">
</a>
</li>
<li>
<a href="http://www.rakuten.ne.jp/gold/****/01-02.jpg" rel="lightbox[item01]">
<img src="http://www.rakuten.ne.jp/gold/****/thumb_01_03.jpg">
</a>
</li>
<li>
<a href="http://www.rakuten.ne.jp/gold/****/01-03.jpg" rel="lightbox[item01]">
<img src="http://www.rakuten.ne.jp/gold/****/thumb_01_04.jpg">
</a>
</li>
<li class="end">
<a href="http://www.rakuten.ne.jp/gold/****/01-04.jpg" rel="lightbox[item01]">
<img src="http://www.rakuten.ne.jp/gold/****/thumb_01_05.jpg">
</a>
</li>
</ul>

続いてヘッダー部分に以下のCSSを~~面倒くさいから~~直接記入します。

<style>
html,body {
 background-color: transparent;
}

* {
 line-height:0;
}

div {
 margin:0 auto;
 width:1240px;
}

.up {
 width:940px;
 height:184px;
 margin:0 auto;
}

.up li {
 float:left;
 margin-right:5px;
}

.up li.end {
 margin-right:0;
}
</style>

すると以下のようなページが出来上がるかと思います。
http://www.rakuten.ne.jp/gold/float/special_st/2241/light_box_01.html

さてさて、これで商品ページを反映するための準備はできました。

4. つくり込みを反映してみる

ではでは、これを商品ページに反映してみましょう。
反映する際はインラインフレームを使用します。

※ここがつらいよ楽天市場
楽天は商品ページにJavascriptを直接読み込ませることができないため、
GOLDにアップロードしたフォトギャラリーのHTMLをインラインフレームで読み込ませます。

PC用販売説明文に以下のインラインフレームを読み込ませます。

<div id="bg_01">
<iframe src="http://www.rakuten.ne.jp/gold/****/light_box_01.html" scrolling="no" frameborder="0" width="1200px" height="1370px" allowtransparency="true"></iframe>
</div>

するとなんということでしょう（劇的ビフォーアフター感）。
最初にお見せしたサンプルページと同じものが出来上がったかと思います。
http://item.rakuten.co.jp/float/lightbox_test/

でももうちょっとだけ続くんじゃ（ドラゴンボール感）。

5. 最終微調整＆細かな指定

最後に、前回の記事にてお伝えしたフルスクリーンのTIPSと今回の内容を組み合わせて、
よりダイナミックな商品ページを作り上げてみましょう。

前回の記事を読み終えている前提でお話しすることを許してね☆

では反映の前に、今回お伝えした内容を元にフォトギャラリーのHTMLを複数用意しました。
http://www.rakuten.ne.jp/gold/float/special_st/2241/light_box_01.html
http://www.rakuten.ne.jp/gold/float/special_st/2241/light_box_02.html
http://www.rakuten.ne.jp/gold/float/special_st/2241/light_box_03.html
http://www.rakuten.ne.jp/gold/float/special_st/2241/light_box_04.html

続いて楽天デザイン設定をフルスクリーンのものに切り替えた後、
PC用販売説明文に以下のようなソースでつくり込みを反映します。

<!-- s -->
</span></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody>
<!-- s -->

<style type="text/css">
#bg_01 {
height:1370px;
background-image:url(http://www.rakuten.ne.jp/gold/float/special_st/2241/images/item_bg_01.jpg);
background-position:center top;
background-repeat:no-repeat;
background-color:#fff;
background-attachment:fixed;
}

#bg_02 {
height:1370px;
background-image:url(http://www.rakuten.ne.jp/gold/float/special_st/2241/images/item_bg_02.jpg);
background-position:center top;
background-repeat:no-repeat;
background-color:#fff;
background-attachment:fixed;
}

#bg_03 {
height:1370px;
background-image:url(http://www.rakuten.ne.jp/gold/float/special_st/2241/images/item_bg_03.jpg);
background-position:center top;
background-repeat:no-repeat;
background-color:#fff;
background-attachment:fixed;
}

#bg_04 {
height:1370px;
background-image:url(http://www.rakuten.ne.jp/gold/float/special_st/2241/images/item_bg_04.jpg);
background-position:center top;
background-repeat:no-repeat;
background-color:#fff;
background-attachment:fixed;
}
</style>

<div class="t2241"></div>

<!--■■■この間につくり込みのHTML入れる■■■-->

<div id="bg_01"><iframe src="http://www.rakuten.ne.jp/gold/float/special_st/2241/light_box_01.html" scrolling="no" frameborder="0" width="100%" height="1370px" allowtransparency="true"></iframe></div>
<div id="bg_02"><iframe src="http://www.rakuten.ne.jp/gold/float/special_st/2241/light_box_02.html" scrolling="no" frameborder="0" width="100%" height="1370px" allowtransparency="true"></iframe></div>
<div id="bg_03"><iframe src="http://www.rakuten.ne.jp/gold/float/special_st/2241/light_box_03.html" scrolling="no" frameborder="0" width="100%" height="1370px" allowtransparency="true"></iframe></div>
<div id="bg_04"><iframe src="http://www.rakuten.ne.jp/gold/float/special_st/2241/light_box_04.html" scrolling="no" frameborder="0" width="100%" height="1370px" allowtransparency="true"></iframe></div>

<!--■■■この間につくり込みのHTML入れる■■■-->

<!-- s -->
<span class="sale_desc"><table><tbody><tr><td><table width="800" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td><table width="100%" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td>
<!-- s -->

すると横幅いっぱいまで画像が表示される、ダイナミックなフォトギャラリーが表示されました。
加えて、背景がスクロールとは少しずれて移動するような疑似的なパララックス表現も実現されます。

このような形でフォトギャラリーのインラインフレームを複数個読み込ませることで、
より一層ダイナミックな商品ページが実現できます。

最後に。

いかがでしたでしょうか。
拙い文章ではありますが、皆さんが楽天サイトのデザインをより良くする一助になれれば幸いです。

次回は、
初心に帰ってヘッダーとかで使えるダイナミックにバナーを表示させるスライダーの実装！
を書いてみようと思います。

ララバイ！！

楽天ショップの参考デザインにしたい！ファッション・インテリアの素敵サイト8選。

ショップ運営でお悩みの方へ。

ネット通販やウェブ制作、ECサポート事業を行っている（株）ビリオンプラン・ジャパンが運営しています。楽天やYahoo!ショッピングなど各モールへの出店サポートや、商品撮影からページ制作までの運用提案、海外ローカライズ作業も行っています。

ショップ運営のお悩み、ご相談ください。

ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。

CONTACT
48時間以内に返信します

または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
10:00 - 19:00（土日祝休み）

06-6271-7761

ABOUT ME

ぜぇれさん外部デザイナーTwitter:@zeelesan: 兵庫在住WEBデザイナー。楽天／ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事、その後はECに特化した受託制作を手がけている。グランブルーファンタジーが大好き。 →記事一覧