こんにちは、MakeShopのあらいです。
いつもMakeShopをご利用いただきありがとうございます。

今回はショップの背景色の設定や
ショップの両端にだけ色や画像を表示する方法などをご紹介します！

こんなお悩みありませんか？

・ショップの背景色を変更したい！
・ショップの背景に画像をつかいたい！
・ショップの真ん中は白いままで、両サイド部分に色をつけたい！

[難易度 ★☆☆ ]
テンプレートご利用のショップ様向け！
管理画面の設定を変えるだけでかんたんに背景色を変更！

タイトルのとおり管理画面で設定するだけでかんたんに背景色を変更させる方法です。

設定方法

【ショップ作成】>【デザインの設定】>【基本デザイン設定】

ショップの背景設定から「背景カラー」を選択or「背景イメージ」を登録！
→できあがり

参考：オンラインマニュアル「ショップの背景色の設定」

かんたんですね！

[難易度 ★☆☆ ]
独自デザインご利用のショップ様向け！背景色を変更する方法！
※プレミアムショッププランのみ

（1）CSSの指定をする！

【独自デザイン（PC）】> 【トップページ編集】> 共通CSS管理

共通CSS管理のエディターエリアbody要素の指定を変更してください。

▼背景に色をつけたい場合

・body要素のbackgroundに設定したい色のカラーコードを指定します。
・#fffは、白の指定です。#fffがある場合は、変更してお好きなカラーコードを指定します。

・外部参考サイト：カラーコード表

▼背景に画像をつけたい場合

・body要素のbackgroundに表示したい画像を指定します。

・背景用の画像は、【100MBサーバー(ギガプラス10)】からアップロードしましょう！

（2）背景変更完了！

→できあがり！

・・・ですが、続きもあります！

全体の背景は設定できたけど、全体ではなくショップの両端にだけ設定したい！
という場合は、次の項目も設定しましょう！

[難易度 ★★☆ ]
ショップの両端に色や画像を表示する方法！
※プレミアムショッププランのみ

設定方法

先程の背景色の設定をしたうえで、真ん中の部分（メインコンテンツ部分）を白にする指定をします！

（1）divで囲む！

【独自デザイン（PC）】> 【トップページ編集】> 上段メニュー管理

上段メニュー管理のエディターエリアの一番上にdivの開始タグを追記してください。

（2）divを閉じる！

【独自デザイン（PC）】> 【トップページ編集】> 下段メニュー管理

下段メニュー管理のエディターエリアの一番下にdivの閉じタグを追記してください。

（3）CSSを指定する！

【独自デザイン（PC）】> 【トップページ編集】> 共通CSS管理

共通CSS管理のエディターエリアに下記のスタイル指定を追記してください。

・幅のサイズ(width) ＋ 左右のmarginをautoで指定することによって、
　先ほど<div id="container">で囲った部分がセンタリングされます。
　→囲った部分の背景を白にすることで、body要素に指定した背景が両端にのみ表示されます！

・id="container"の「container」部分は自由に変更できます。
　変更する場合は、共通CSS管理の #container も合わせて変更しましょう！

ショップをみるで確認してみましょう！

いかがでしたでしょうか。
ぜひお試しください！それではまた！