*

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

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

おすすめトピックス

関連記事

偽サイト蔓延、早期対策を!楽天偽サイトの探し方

楽天ショップを丸々コピーした偽サイトや、楽天市場を装った偽メールが蔓延していると楽天が注意を促しています。 楽天市場を装う偽サイトやメール出現 楽天が注意呼びかけ – ねとらぼ 私からすると今更?という印象で […]

カレンダー
ネットショップの営業日カレンダーを自動更新にして手間を省く

ネットショップと言えば必ずと言っていいほどありますよね。休業日と営業日をお客様に知らせる為の営業日カレンダー。お店によって実装方法は様々です。カレンダーは画像であったり、table タグでカレンダーを html で直打ち […]

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

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

楽天ショップ等の縦帯バナーを商品別に変えるには?

楽天などのインターネットショップをパソコンで見ると、よく画面端に縦に伸びる細長いバナーが表示されている事があるでしょう。あれを縦帯バナーなどと呼んでいます。 ポイント○倍!とか送料無料!とかお客さんにアピールしたい文言を […]

iphone
Yahooショッピングのトリプルページを手っ取り早くスマホ対応に

Yahoo!ショッピングにショップを出店している方で、jquery や CSS が自由に使えてデザインができる「トリプル」を契約していらっしゃる方も多いと思います。しかし、トリプルで普通に PC 用のトップページを作った […]

スマートフォンを持つ手
楽天のスマホページで外部CSSを使用する方法

楽天に限らずネットショッピングはスマートフォンで買い物をする人が増えているという事は2013年くらいから言われている事ですが、現在ではパソコンをも上回るシェアに迫っているようです。扱っている商材によっては既にスマートフォ […]

著者について

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

フォローはこちら

       

       
ゆうメールが厚み3cm以上の規格外サイズを廃止!代替の発送方法は

先日久しぶりに郵便局へゆうメールを発送しに行ったのですが、受付

梱包用ppバンドのストッパーのはさみを使わない外し方

ダンボールで荷物を梱包する時、より強固にする為に pp バンド

ローチョコレート
彦根市に生カカオが活きたローチョコレート専門店「ハレトケト」

滋賀県彦根市、彦根城周辺の古き町並みが残る地に滋賀県初のローチ

アサシンクリードオデッセイ
アサシンクリードオデッセイPC版をGeforce GTX 1070でプレイした感想

2018年10月5日に発売されたアサシンクリードオデッセイの

大垣市のお洒落なビストロ「洋食もくれん」でディナー

岐阜県大垣市の大垣駅近くに「洋食もくれん(洋食 MOQLEN)

→もっと見る