*

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

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

おすすめトピックス

関連記事

アウトレットセール
アウトレット品はこれからの時代を生き抜く為の重要なファクターとなるだろう

よく巷でアウトレットセール、訳ありセールなど催されている所を見かける事もあると思います。そのアウトレットセールって何のセールかご存知でしょうか? 目次1 アウトレットとは2 商品は毎日捨てられている3 商品を安く買う方法 […]

ガラケーとスマホ
楽天スマホ商品ページで制限なく画像説明を載せる方法

楽天に限らずネットショッピング界隈ではスマートフォンでのアクセスが PC を上回るなど年々スマートフォン比率が上昇してきています。今まではスマートフォンは後回し~にしてきた所もあるかと思いますが、パソコン版もスマートフォ […]

ポスト
どう違うの?ゆうメールとゆうパケットの違い

荷物を送るための郵便局のサービスも多種多様なものがあり、種類が多くてどれがどう違うのかもわからなくなる事もあると思います。今回はゆうメールとゆうパケットの違いについてまとめたいと思います。 目次1 ゆうメールとは1.1 […]

eメール
楽天メルマガうざいと思う人朗報!メルマガ有料化で配信が減るかも

楽天ショップのメールマガジンがいつも大量に来て鬱陶しいと思う人も多いかと思います。 それもその筈、何も意識せず楽天ショップで買い物をしたら標準でメールマガジンが送信される設定になっています。楽天で買い物をする度にメールマ […]

アップロード
楽天R-Cabinetに画像を一括でアップロードする方法

楽天 R-Cabinet の画像を URL から一括でダウンロードする方法については以下の記事で紹介しました。 楽天R-Cabinetの画像をURLから一括でダウンロードする方法 もう一つわかりにくいのは、楽天 R-Ca […]

陳列された商品
【ネットショップ】商品が売れなくなってきた?それは当たり前です。

ネットショップで商品を出品していて、売上がだんだん伸び悩み落ちていく事に悩まれている方もいらっしゃると思います。もし何も施策を打っていないのであれば、それは当たり前です。 何もしなければ大概商品の売上は伸び悩んでいくもの […]

上部広告

著者について

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

フォローはこちら

       

上部広告

       
宇佐美
ガソリンスタンドENEOSの看板にある「宇佐美」とは何か?

普段何気なしに利用しているガソリンスタンドですが、ふと気になっ

中部国際空港のプレミアムラウンジセントレアに入るための条件や必要な物

空港には特別な待合室(ラウンジ)があります。中部国際空港も例外

厚さ4cmの封筒が入る郵便ポストは存在するか?

郵便物をポストに投函する場合、投函できる厚みのボーダーラインとしてよく

潮騒そば
こだわりの魚介スープが織り成すラーメン、彦根市の「らー麺潮騒」

滋賀県彦根市の彦根駅周辺の国道8号線を通っている時に、何か新し

超人気のラーメン店銀座篝がsitatte sapporo(シタッテ札幌)に上陸

2017年3月4日に札幌駅前に新たなランドマークとしてオープン

→もっと見る