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

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

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

Sponsored Link

こんにちはこんにちは、知ってる人はこんにちは、知らない人は初めまして。ぜぇれさんです
ECサイトでのデザインを担当してます。よろしくお願いします。ぜぇれさんです
というわけで今日は初めての記事なんですが、
楽天ECでサイト運営やWEBデザインをしている方向けの記事になっております。

こんな感じのページ(以下フルスクリーンと呼びます)を作るTIPSになってます。
http://item.rakuten.co.jp/float/full_screen_test/

以下の4つのステップで説明してゆきます。

※必須条件
楽天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#rakutenLimitedId_header {
display:none !important;
}
script + table + table {
display:none !important;
}
/* 商品ページ上部の不要なテーブル削除 */
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/

以上を応用して作成したページが以下になります。
http://item.rakuten.co.jp/float/2241/

最後に

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

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

ララバイ!!

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

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

BILLIONPLAN JAPAN Co, Ltd

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

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

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

または、お電話でも承ります。
 10:00 - 19:00(土日祝休み)

06-6271-7761

ABOUT ME

ぜぇれさんデザイナーTwitter:@zeelesan
加古川在住WEBデザイナー。楽天/ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事した後、ビリオンプラン立ち上げに参加。時計・雑貨のFLOAT運営担当。ご相談はこちらより。グランブルーファンタジーやりましょ!! →記事一覧
Sponsored Link

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

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

follow us in feedly

8 Comments(Trackback)

若狭利裕

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

Reply
ぜぇれさん

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

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

Reply
だんご

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

Reply
ぜぇれさん

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

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

Reply
ケン

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

body{

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

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

Reply
ぜぇれさん

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

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

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

Reply
あめーば

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

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

Reply
ぜぇれさん

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

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

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

Reply

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です