• 楽天
  • Yahoo!

【楽天/Yahoo!】ショップページに背景画像を設定する方法

1025_main

こんにちは。歯茎からの出血がまる二日止まらないオガリア中村です。鉄分自給自足状態です。

本日は、ショップページの背景を画像にするコピペTipsをご案内しますよー!背景を画像にする利点としては、
 ・テクスチャー
 ・グラデーション
 ・人物、キャラクター
などを見せられるため、よりショップの雰囲気や商材を表現し易くなりますよ!

画面スクロール時の背景挙動を3パターン用意しました。それぞれコピペで設置完了できまっす。

スクロールで繰り返し表示されるタイプ

楽天ショップに背景画像を設定する方法

画像が全画面にリピート表示され、スクロールと一緒に繰り返し表示されます。

楽天版

<style type="text/css">
<!--
body {background: url("画像URL") repeat !important;}
-->
</style>

Yahoo!版

うっ、残念ながらYahoo!ではできません、、

スクロールすると流れて見えなくなるタイプ

楽天ショップに背景画像を挿入する方法

上部に貼り付いて、スクロールと共に見えなくなります。ヘッダー部だけ派手めに画像を見せたいときに有効です。

楽天版

<style type="text/css">
<!--
body {background: url("画像URL") top center no-repeat !important;}
-->
</style>

Yahoo!版

モニターサイズに対して背景画像が小さい場合、画像が荒くなる可能性があります。横幅2,000px以上の画像を背景画像にお使いください。

<div style="position: absolute; top:0; left:0; width:100%; height:100%; z-index:-9999;">
<img src="画像URL" width="100%">
</div>

スクロールしても固定位置に表示されるタイプ

qpb20pt0yl

スクロールしても背景は固定位置に表示され、上部のコンテンツのみスクロールされて行きます。背景画像が派手だと若干見づらくなるため、落ち着いた色合いのものや薄っすら柄が入った程度の画像を使うのがおすすめです。

楽天版

<style type="text/css">
<!--
body {
  background: url("画像URL") top center no-repeat !important;
  background-attachment: fixed !important;
}
-->
</style>

Yahoo!版

モニターサイズに対して背景画像が小さい場合、画像が荒くなる可能性があります。横幅2,000px以上 / 縦幅1,500px以上の画像を背景画像にお使いください。

<div style="position:fixed; top:0; left:0; width:100%; height:100%; z-index:-9999;">
<img src="画像URL" width="100%">
</div>

使い方

  1. 背景画像を用意し、各モールの画像保管庫へ登録します。(画像のURLが発行されます。)
  2. さっきのHTMLタグ内、「画像URL」の箇所を(1)の画像URLに書き換えます。
  3. タグをコピーして各モールの編集画面に貼り付けます。貼り付け場所はヘッダーやレフトナビなど全ページに共通で表示される部分ならどこでもOK!

注意点

楽天ショップの場合、<body>タグに対してCSSをあててます。なので、既にbodyタグを使った背景画像の設定があると、指定が競合して上手くいかないかもしれません。

例えば縦帯バナーが消えたりする可能性もあるのでご注意です!

この記事を書いた人

中村 茉実

中村 茉実ディレクター

元楽天ショップ店長やってました。歩くときに他人との距離感が掴めないところがあり、よくオジサンのかかとを踏んでしまいます。

この記事のあとによく読まれています!

繁盛レシピの人気記事3選!

コメント

6 件のコメント

  •   より:

    いつも参考にさせていただいております。

    楽天店舗に設置したいのですが、
    当店では見本画像のようにヘッダから本文にかけての
    白いブロックがなく、パーツ間が透過してしまいます。

    gold上のCSSファイルを見ても、特に何か設定している様子はありません。
    どこを確認・修正すればよいか、ご教示いただければ幸いに存じます。

    どうぞよろしくお願い申し上げます。

    • 中村 茉実 中村 茉実 より:

      ご質問ありがとうございます。

      パーツ間を透過させたくない場合、各パーツを内包するHTML要素へ「背景色:白」の指定をする必要があります。

      ▼例

      <table style="background:#fff;">
        <tr>
          <td>
            <!-- ヘッダーやレフトナビなどの記述 -->
          </td>
        </tr>
      </table>
      

      差し支え御座いませんでしたら、御社ショップページURLをご連絡頂けますと幸いです。
      具体的な修正箇所についてご案内させて頂きます。

      よろしくお願いいたします。

  •   より:

    お世話になっております。
    テストで設置したページをURL欄に記入しました。
    (URLは公開しないでいただけるとありがたいです)
    ご確認いただければ幸いに存じます。
    どうぞよろしくお願い申し上げます。

    • 中村 茉実 中村 茉実 より:

      お世話になっております、オーガランド中村です。早速のご連絡ありがとうございます!ページ拝見致しました。
      御社の場合、以下のCSSを追記頂くことで具合良くなるかと思います。

      body > div > table > tbody > tr > td > table:first-child {
        background: none;
      }
      body > div > table > tbody > tr > td > table {
        background: #fff;
        margin: -16px;
        padding: 16px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
      }
      

      ※背景画像を表示させるためのCSS内、<!– ~ –>の間に上記を書き加えます。

      上手く行かない場合はお手数ですがご連絡頂けますでしょうか。宜しくお願いいたします。

    • 中村 茉実 中村 茉実 より:

      背景画像1枚でショップ様の雰囲気がぐっと商材コンセプトに近づきましたね…!私自身でご案内させて頂いた施策ではありますが、拝見して感動しました。いつもレシピを実践頂き嬉しいです!

  •   より:

    中村様
    できました!ありがとうございました!

コメントはお気軽にどうぞ

セキュリティチェック *

内容をご確認の上、送信してください。