ページの背景に画像を入れる方法を教えて下さい。

Question

ページの背景に色を付けることは出来るのですが、
①画像を背景に設定する方法を教えて頂きたいです。

http://atelier-mcks.jugem.jp/?cid=37419

②また「ここからここまで背景に画像を入れる」などの設定方法も出来れば教えて頂きたいです。

③また別で、商品が何個も横にならび、ゆっくり横にスライドする仕組み（さらに言うと、画像をクリックするとその商品に飛ぶ）も教えて頂きたいです。（回転ずしのレーンみたいな感じです）

Answer

ECマスターズの田中です。


＞①画像を背景に設定する方法を教えて頂きたいです。

GOLD内のHTMLファイルのように、
タグが編集できる状態であれば、
下記のように「background」属性を追加してください。



※背景画像URLは、実際のURLに置き換えてご利用ください。

詳しい説明は、下記URLをご参照ください。
http://www.tagindex.com/html_tag/page/body_back.html

楽天の商品ページのように、
タグが編集できない場合は、
スタイルシートをご利用ください。

下記のようなタグを、
ヘッダー・フッター・レフトナビ、もしくは商品説明文（大）に
挿入してください。


body { background: url(背景画像URL); }


※背景画像URLは、実際のURLに置き換えてご利用ください。

詳しい説明は、下記URLをご参照ください。
http://www.htmq.com/style/background.shtml


＞②また「ここからここまで背景に画像を入れる」などの設定方法も出来れば教えて頂きたいです。

背景画像を入れたい部分をとで囲み、
スタイルシートを適用させることで設定できます。
たとえば、下記のような形式になります。

背景画像を入れる部分

※背景画像URLは、実際のURLに置き換えてご利用ください。


＞③また別で、商品が何個も横にならび、ゆっくり横にスライドする仕組み（さらに言うと、画像をクリックするとその商品に飛ぶ）も教えて頂きたいです。（回転ずしのレーンみたいな感じです）

ECマスターズクラブ会員限定で無料でご提供している
ECステーションのツールボックス「スライドバナー作成」
にて対応が可能です。

是非使ってみてください。
https://ec-masters.club/index.php?ecmtools.1509

Answer

ありがとうございます！出来ました(^^)レーンもやってみます！


画像の事で相談なのですが、上記背景を入れるために、画像の形式をpngにしました（gifだとだいぶ粗かったので）。
ところが、pngではとても容量が大きくページが表示されるまで少し時間がかかります。

pngで容量を軽くする方法はありますか？ちなみに解像度を72にしても大きかったです。
出来れば画像が粗くない方法がいいです。

Answer

スライドバナーをしてみました。
準備した商品1つずつの表示だったのですが、横の間隔をひっつけて、連続した画像がスライドする方法はありませんか？

Answer

ECマスターズの田中です。

＞pngで容量を軽くする方法はありますか？ちなみに解像度を72にしても大きかったです。
下記「TinyPNG」のような、画像を圧縮できるwebサービスをお試しください。
https://tinypng.com/
それでも容量が大きすぎる場合は、
jpg形式で保存し直していただくと、軽くなる可能性があります。

＞横の間隔をひっつけて、連続した画像がスライドする方法はありませんか？
複数の画像を一度に表示させるイメージでしょうか。
その場合、「スライドバナー作成」では非対応となりますので、
ご自身で楽天GOLD内にスライドバナー表示用のHTMLを作成していただき、
jQueryプラグインを導入して、カスタマイズしていただく形になります。

下記記事で紹介されている「bxSlider」のような、jQueryプラグインをご利用ください。
http://on-ze.com/archives/1658