*

楽天の全商品ページに背景を付ける方法

公開日: : 最終更新日:2015/03/12 ネットショップ

楽天商品ページに背景を設定

楽天の商品ページに訪れると、画面の端に縦長の帯状画像が付いている事があります。そのショップのイベント告知であったり、○円以上お買上げで送料無料だとか、季節感を演出したり用途は様々です。

イメージとしては下図のようなものですが、楽天でお買物をした事がある人なら一度は目にしたことがあるのではないかと思います。

縦バナーイメージ

楽天の商品ページに背景画像(上図の縦バナー)を付ける事は標準機能にはありません。しかし多くのショップで実装しています。今回はこの方法について解説します。

楽天の商品ページに背景を設定する方法

楽天の標準機能にないのに、どうやって実現しているのか。それは CSS を使って実現しています。

背景画像の作成

まずは背景に設定する縦バナーを作成します。サイズは各ショップのウェブサイトの横幅によりますが、1400px × 850px くらいで丁度良いと思います。ウェブサイトの横幅が大きい場合は適宜微調整してください。

CSSを記述

以下の様な CSS を書きます。

body{
	background-image: url("背景画像のURL");
	background-repeat:repeat-y;
	background-position:center;
	background-attachment:fixed;
}

1つずつ解説しますと、1行目は使用する背景画像を指定しています。「background-repeat」は背景画像の繰り返しです。縦にしか繰り返さないので「repeat-y」を設定しています。

「background-position」は背景画像の位置指定です。中央に置きたいので「center」です。「background-attachment」は別になくても構いませんが、「fixed」を設定する事でページをスクロールしても背景画像が動かなくなります。

商品ページにCSSを読み込ませる

CSS を読み込ませる為に楽天 RMS 内で記述します。

楽天RMSでCSS

「1:店舗設定」→「1-2:デザイン設定」→「ヘッダー・フッター・レフトナビ」を開きます。

使用しているテンプレートを編集して、ヘッダーコンテンツの一番上に CSS を読み込ませるためのタグを記述します。

<link href="CSSのURL" rel="stylesheet" type="text/css">

以上で完了です。

余談:失敗例

背景画像を設定するための CSS 記述方法は色々ありますが、失敗例も一つ挙げたいと思います。

body{
	background-image: url("背景画像のURL");
	background-repeat:repeat-y;
	background-position:<span class="hutoaka">right</span>;
	background-attachment:fixed;
}

background-position の指定が right にしてあると、画面の右側にピッタリとくっつきます。しかし画面サイズが小さくなっても右側にずっとくっついてくるので、肝心のページ自体に被さってしまいます。

center にしてあると背景画像は中央固定なので画面サイズが小さくなっても画面外に消えていくだけで被さる事はありません。お客様によって画面サイズはまちまちなので、こちらの方が優しい設定です。

終わりに

楽天商品ページに背景を付ける方法を解説しましたが、CSS が使えると知っていると一見融通が効かない楽天商品ページも表現の幅が広がると思います。是非ご活用下さい。

上部広告

  • Pocket

おすすめトピックス

関連記事

ponpare-css
ポンパレモールの商品ページで外部CSSを使用する方法

ポンパレモールに出店されている方向けの記事となります。 ポンパレモールと言えば、ページ作成において使用できるタグが制限されており作りづらい仕様でした。しかし、2014年12月からタグの規制が一部緩和されました。緩和された […]

snapp
手間不要!楽天スマホページ自動で楽に作れる「Snapp」が凄い

ネットショップにおいてもスマートフォンからの利用者が PC 利用者を上回りつつある事は周知の事実となっています。PC のページは作りこんでいても、スマートフォンページまでは手が回らない!という方もいらっしゃると思います。 […]

ポンパレ
ポンパレモールの商品ページにアクセスできない時の対処法

リクルート社が運営しているショッピングモールで「ポンパレモール」があります。多数のネットショップさんが集まって出店しているという所は楽天と同じです。 ポンパレモール:ネット通販/オンラインショッピングサイト トップページ […]

スマートフォン操作
楽天スマホ商品ページの画像制限が緩和!3枚から10枚までへ

楽天でインターネットショップを運営されている方に朗報です。かつては楽天のスマートフォン用商品ページには画像は3枚まで(高さは1200pxまで)という画像制限がありました。ようやく重い腰を上げてこの画像制限が2016年より […]

yazirusi
商品ページの回遊率アップで売上向上を狙う為の施策について

どこのネットショップ、ショッピングモールでもそうですがマニュアル通りにただ商品を載せただけでは売上向上に繋がりません。ちょっとしたカスタマイズで商品ページの回遊率を高め、商品が売れる機会を増やすことができます。 カスタマ […]

rakuten-slow
画像上書きの反映は遅いが一瞬で反映させる代替策はある【楽天ショップ】

楽天ショップを運営している人なら一度は頭を悩まされた事はあるでしょう。楽天の商品画像、すなわち楽天 RMS にアップロードした画像・楽天 GOLD スペースにアップロードした画像を上書きして差し替える場合、画像の反映処理 […]

上部広告

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

上部広告

       
スマホサイト
プラグイン無しで簡単に実現するスマホサイトの上からドロワーメニューの作り方【jQuery】

近年どこでもスマートフォン向けサイトが用意されているのが当たり前です。

sumaho-footer2
これを見れば簡単!スマホサイトのフッターメニューをサクッと作るサンプル

スマートフォンなどのモバイル端末でウェブサイトを見る人が急増し、今の時

gifuparking
名鉄岐阜駅直結の最も近い駐車場、24時間営業で2日以上停められます

名鉄岐阜駅から名古屋方面へ旅行やお出かけ、また中部国際空港へ電

wordpressengry
WordPress管理画面の投稿一覧で表示される投稿数を変更するには

WordPress の管理画面と言えば、WordPress でブログや

パンケーキ
札幌市大通で絶品サッポロパンケーキ!タイル貼りのカフェ「ミント」

札幌の地下鉄大通駅から徒歩3分、アクセスも良いタイル貼りのオシ

→もっと見る