楽天サイトでフルスクリーン商品ページをつくる！背景画像を使ったデザインの方法。

※編集追記（2017/5/1）
2017年2月に楽天市場の禁止行為ガイドラインの改定がおこなわれ、共通コンテンツを隠す行為が禁止行為として指定されました。猶予期間（~~2017年4月30日まで~~ 7月31日までに延長）が設定されていますが、その後は違反行為とみなされます。本記事を参考にされる際は、共通ヘッダ部分などは非表示にしないようご注意ください。

制約の多い楽天のページデザイン…。
そんな楽天サイトを楽天RMS・GOLDを駆使して、
より良いサイトデザインにしてゆくという記事です。
商品の出品周りを一通り理解している方向けとなっています。

1. デザイン設定してみる

まず楽天RMSには「ヘッダー、レフトナビ、フッター」を1セットとしたデザインテンプレートを、
複数用意しておくことができます。
今回作成しようとしているページはヘッダーもレフトナビもフッターもいりません。
ですがヘッダーのHTML領域に、以下のソースを張り付けておいてください。

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

<!--以下にヘッダーコンテンツ記入-->
<!--以上にヘッダーコンテンツ記入-->

<!-- s -->
<table width="100%" cellspacing="20" cellpadding="0" border="0">
    <tr>
        <td align="center">
            <table width="800" cellspacing="0" cellpadding="5" border="0">
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </table>
            <table width="800" cellspacing="0" cellpadding="0" border="0">
                <tr>
                    <td>
                        <table width="100%" cellspacing="0" cellpadding="0" border="0">
                            <tr>
                                <td colspan="4">
<!-- / -->

というわけで何もないデザイン設定が1セット作成されました。

するとこんなページが出来上がります。
デモ

なんかシンプルで好感が持てますね。~~このままでいいんじゃないかな。~~

※ここ大事
店舗ロゴとその下のナビゲーションはこちらから消す指示を出さない限り勝手に出てきます。
デフォルトで表示されている「店舗ロゴ」「会社概要」「ご利用案内」「カート」「楽天トップ」のリンクは、
楽天規約にて商品ページに表示しなければならない必須項目なので消した後も別の形で表示させてあげましょう。

2. CSS当ててみる

ただ今回店舗ロゴとか、上のほうに出てくる楽天のモール内検索のエリア、
ページ下部にあるレコメンドのエリアとかほんといらないんで、さくっと消しちゃいましょう。

先ほど記入したRMSデザイン設定のヘッダー部分に以下を追記しちゃいましょう。
（分かりやすく一番上あたりに）

<style>
/* 商品ページ上部の不要なテーブル削除 */
div#pagebody>table:first-child {
display:none !important;
}
/*この商品を買った人は、こんな商品にも興味を持っています 削除 */
#rakutenLimitedId_inshop_recommend {
display:none !important;
}
/*このショップの人気ランキング 削除 */
#rnkInShopPartsArea {
display:none !important;
}
</style>

するとここまでシンプルになりました。~~もうなおさらこのままでいいんじゃないかな~~。
デモ

では次のステップでは、余分な部分をそぎ落としたところにお肉を継ぎ足していきましょう。

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

今回はサンプルとして2枚の画像を用意しています
フルスクリーンの表示に耐えるように今回少し大きめの幅2000pxの画像を用意しました。
これとこれ

では普通に反映してみましょう
楽天商品ページの【PC用販売説明文】という項目に反映してゆきます。
フルスクリーンになるお祈りを込めてwidthを100%で指定しています。

<img src="http://www.rakuten.ne.jp/gold/****/sample_01.jpg" width="100%"><br>
<img src="http://www.rakuten.ne.jp/gold/****/sample_02.jpg" width="100%">

すると…
デモ

ページ上部に意図しない余白が表示されるうえ、
楽天デフォルトのサイト幅に影響されて760pxになってしまいます。

ここをクリアしなければフルスクリーンは実現できません、でも大丈夫、とっても簡単だから。
まずはこの横幅の制約を取り払うために、以下のような表記を【PC用販売説明文】に追記します。

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

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

<img src="http://www.rakuten.ne.jp/gold/****/sample_01.jpg" width="100%"><br>
<img src="http://www.rakuten.ne.jp/gold/****/sample_02.jpg" width="100%">

<!--■■■この間につくり込みの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 -->

すると見事横幅いっぱいに広がりました。
デモ

このままでも結構きれいです。
テンプレートとして運用するならこれをベースにすると良いかもしれません。

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

最後のステップではページ上部の余白を疑似的に隠す方法と、
画像の固定を用いた疑似パララックス表現の実現を説明します。

キーワードは背景画像の指定です。

先ほどの反映した【PC用販売説明文】にを以下のような形に変更します。

<style type="text/css">
body {
background-image:url(http://www.rakuten.ne.jp/gold/****/sample_01.jpg);
background-position:center top;
background-repeat:no-repeat;
background-color:#fff;
}
.space {
 height:1220px;
}
#bg_01 {
height:1300px;
background-image:url(http://www.rakuten.ne.jp/gold/****/sample_02.jpg);
background-position:center top;
background-repeat:no-repeat;
background-color:#fff;
background-attachment:fixed;
}
</style>

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

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

<div class="space"></div>
<div id="bg_01"></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 -->

変更した個所は2か所です。

①CSSの追加
②画像を表示させていた部分に、クラスとIDを振ったブロック要素を二つ配置

body {
background-image:url(http://www.rakuten.ne.jp/gold/****/sample_01.jpg);
background-position:center top;
background-repeat:no-repeat;
background-color:#fff;
}

まずはこの部分で、bodyに背景画像として1枚目の画像を表示させています。

.space {
 height:1220px;
}

続いてこの部分のCSSで、bodyに指定した背景画像が見えるようにスペースを確保しています。

<div class="space"></div>

こちらはスペースを確保するためにクラスを振った空のDIV要素です。

#bg_01 {
height:1300px;
background-image:url(http://www.rakuten.ne.jp/gold/****/sample_02.jpg);
background-position:center top;
background-repeat:no-repeat;
background-color:#fff;
background-attachment:fixed;
}

この部分で2枚目の画像を表示させています。
背景画像として表示させ、かつ[background-attachment:fixed;]の指定を加えることで、
疑似的なパララックス表現を実現しています。

<div id="bg_01"></div>

最後に、こちらは背景画像を表示させるためにIDを振った空のDIV要素です。

以上の工程ではれてサンプルのページの完成です。
http://item.rakuten.co.jp/float/full_screen_test/

最後に

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

次回は、
jQuery導入して動きのある商品ページにチャレンジ。
を書いてみようと思います。

ララバイ！！

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

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

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

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

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

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

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

06-6271-7761

ABOUT ME

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

新着記事を配信しています

FacebookやGoogle+で新着記事を配信しています。よろしければ「いいね！」や「フォロー」をお願いします。

Follow @BILLIONPLAN_JP

ビリオンプラン・ジャパン

若狭利裕 2016年3月1日

楽天RMSでフルスクリーン表示させたいと思い、検索しこちらに辿り着きました。
現在、こちらに記載してある通りに設定してみました。
オフラインでは何の問題もなく、正常に表示されるのですが、
いざRMSにアップしてみると、iframe指定した箇所の右側にどうしてもスクロールバーと思われる
空白ができてしまいます。
なにか解決策はないでしょうか。
宜しくお願い致します。

ぜぇれさん 2016年3月2日

若狭さん
コメントありがとうございます。

店舗様によって設定は様々だと思われるので、
該当ページのURLを教えてもらうことは可能でしょうか？

だんご 2016年4月20日

貴重な情報を丁寧にご教授いただきまして、ありがとうございました。
掲載していただいている通りに実行し、上手くできました。
カッコイイフルスクリーンのページが完成し、感激しています。
ありがとうございました！

ぜぇれさん 2016年4月20日

だんごさん。
こんにちは、コメントありがとうございます！

問題なく実現できたようで何よりです！
引き続き店舗運営頑張ってくださいね！

ケン 2016年6月9日

いつも参考にさせていただいております。
フルスクリーンのページの場合、サイドの縦バナーがどうしても下に隠れてしまうのですが何か方法はございますか？

body{

background-image: url();
background-repeat: repeat-y;
background-attachment: scroll;
background-position:left;
z-index: 9999;
}

このやり方ではだめでした。

ぜぇれさん 2016年6月10日

ケンさんこんにちは。
コメントありがとうございます！

実際のページを確認できないので詳細までは分かりませんが。
そうですね、そもそも背景画像を駆使したデザインのため
縦帯がその下に隠れてしまっているんでしょうね。

これまた実際に試したわけではありませんので確実ではありませんが。
反映している作り込みを一つの[div]で括り。
その括った[div]にパディングを設け、
そのパディングエリアに縦帯を表示する形で
解消できないでしょうか？

あめーば 2016年11月9日

最近RMSでページを作り始めた者ですがうまくいきません。素人なりに考えたんですが　rakutenLimitedId_headerのクラス名が入っていないためうまく反映されないと思うんですがどうしたらいいでしょうか？

大手shopだとclass名にmacosってのが入ってました

ぜぇれさん 2016年11月9日

あめーばさんこんにちは。
コメントありがとうございます。

フルスクリーン商品ページの作成に挑戦中ということでしょうか？
どの部分で躓いておられるか、または現在どのようなページになっているのかを
ページURLを添えてお教えいただければ。

具体的にお答えできるかもしれません。

楽天サイトでフルスクリーン商品ページをつくる！背景画像を使ったデザインの方法。

1. デザイン設定してみる

2. CSS当ててみる

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

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

最後に

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

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

ABOUT ME

Recent Posts

この記事に関連する記事

新着記事を配信しています

8 Comments（Trackback）

Sponsored Link

最近の記事

Archive

記事をSNSに投稿する

1. デザイン設定してみる

2. CSS当ててみる

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

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

最後に

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

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

ABOUT ME

Recent Posts

この記事に関連する記事

新着記事を配信しています

8 Comments（Trackback）

ECカテゴリの最新記事

人気の記事ランキング

Keyword

Sponsored Link

最近の記事

Archive

記事をSNSに投稿する