*

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

公開日: : 最終更新日: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

おすすめトピックス

関連記事

電話応対
お客様の注文間違いは転換率アップのチャンスです

ネットショップ、EC サイトを運営していれば日々お客様からのお電話を頂くかと思います。それは、商品に対する質問であったりクレームであったり内容は様々。その問い合わせ、受けただけで終わりにしてませんか? お客様からの問い合 […]

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

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

ダンボール
楽天の商品ページの納期情報の文字色やサイズを変更する方法

「楽天商品ページにある納期情報の文字色変えれる?」 突如放たれるその言葉。全く無茶を言ってくれますねと思いつつも、試行錯誤を始めます。試しに google で検索しても特に情報はありません。しかし、google の検索予 […]

ランキング1位獲得
要注意!楽天商品ページへのランクイン実績表示についてルールを制定

楽天で買い物をしていると商品ページに「この商品は楽天ランキングで1位獲得!」というようなアピールをよく見かけると思います。売れてるアピールをする為に、楽天ランキングのランクイン実績を画像なりにまとめて商品ページにドンッと […]

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

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

キーボードと紙
要注意、Amazonに出品する商品の商品名は一度決めたら変更できません

Amazon でネットショップを出店している方も多いかと思います。が、Amazon で商品を出品する際、注意点があります。 それは、Amazon に商品登録する際に一度決めた商品名は変更不可能という事です。以前は変更する […]

著者について

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

フォローはこちら

       

       
エックスサーバーでメールが送れない「Client host rejected:Access denied」

エックスサーバーで作成したメールアカウントでメールを送信しよう

札幌駅パセオ地下1階のパスタとパフェが美味しい「プロヴァンス」でランチ

札幌駅のパセオ地下1階にあるプロヴァンスは南フランスとイタリア

千歳市の和食処「ほうりん」の安い充実の寿司ランチ

千歳市にある和食処ほうりんは千歳駅の南西にある居酒屋が立ち並ぶ

スパホテルソーレ
札幌のカプセルホテル「スパホテルソーレすすきの」に泊まった感想

札幌の地下鉄すすきの駅の近くにあるカプセルホテル「スパホテルソ

札幌駅近くのモダン和食レストラン「えりも亭」で珍しい縮れ蕎麦ランチ

札幌駅の北口から徒歩2分程度の所に和風なモダンレストラン「えり

→もっと見る