左メニュー部分(「特定商取引法表示」「店長日記」「関連ページ」「掲示板」)の背景色や背景画像の変更はできますか?

2017-07-14 09:55

背景色や背景画像の変更には、スタイルシートの編集が必要です。
管理画面の以下のページを開きます。

「デザイン管理」>「スタイルシート編集」

(1)スタイルシート編集画面が表示されますので、【ベーステンプレートを読み込む】でご利用のテンプレートを選択し【読み込む】ボタンをクリックして下さい。

(2)ご利用のテンプレートのスタイルシートが表示されます。【テンプレート名】を記入して【スタイルシート】を編集します。

(3)背景色と背景画像を変更します。

■背景色の変更する場合

スタイルシート内の/* ナビゲーション */
/* ショップ通信 *//* 店長日記 *//* リンク集 *//* 掲示板 *//* フリー */以下を変更します。
特定商取引法表示は/* ショップ通信 */、関連ページページは/* リンク集 */以下を変更してください。


【この色の部分】のみを変更してください。その他の部分(****と記載している指定)は、各テンプレートのスタイルシートごとに指定に違いがあるか指定がない場合もあります。ここではサンプルとして記載しているだけですので、****のように編集しないで下さい。

/* ナビゲーション */

/* ショップ通信 */
.shop {
width: ****;
height: ****;
margin: ****;
padding: ****;
background-color: 【背景色…こちらの数値を任意のカラーコードに変更します】;
}

/* 店長日記 */
.diary {
width: ****;
height: ****;
margin: ****;
padding: ****;
background-color: 【背景色…こちらの数値を任意のカラーコードに変更します】;
}

/* リンク集 */
.link {
width: ****;
height: ****;
margin: ****;
padding: ****;
background-color: 【背景色…こちらの数値を任意のカラーコードに変更します】;
}

/* 掲示板 */
.bbs {
width: ****;
height: ****;
margin: ****;
padding: ****;
background-color: 【背景色…こちらの数値を任意のカラーコードに変更します】;
}

/* フリー */
.free_menu {
width: ****;
height: ****;
margin: ****;
padding: ****;
background-color: 【背景色…こちらの数値を任意のカラーコードに変更します】;
}

例) background-color: #000000;

 

※カラーコード(#000000等)はこちらを参考にご覧下さい。
https://www.ocnk.net/sample/color.html

【background-color:~;】の指定がない場合は、1行全てを貼り付けて下さい。


■背景画像を変更する場合

スタイルシート内の/* ナビゲーション */
/* ショップ通信 */ /* 店長日記 */ /* リンク集 */ /* 掲示板 */ /* フリー */以下を変更します。
特定商取引法表示は/* ショップ通信 */、関連ページページは/* リンク集 */以下を変更してください。

【この色の部分】のみを変更してください。その他の部分(****と記載している指定)は、各テンプレートのスタイルシートごとに指定に違いがあるか指定がない場合もあります。ここではサンプルとして記載しているだけですので、****のように編集しないで下さい。

/* ナビゲーション */

/* ショップ通信 */
.shop {
width: ****;
height: ****;
margin: ****;
padding: ****;
background-image: url(【背景画像…こちらに背景に使用したい画像のURLを記入します);
}

/* 店長日記 */
.diary {
width: ****;
height: ****;
margin: ****;
padding: ****;
background-image: url(【背景画像…こちらに背景に使用したい画像のURLを記入します);
}

/* リンク集 */
.link {
width: ****;
height: ****;
margin: ****;
padding: ****;
background-image: url(【背景画像…こちらに背景に使用したい画像のURLを記入します);
}

/* 掲示板 */
.bbs {
width: ****;
height: ****;
margin: ****;
padding: ****;
background-image: url(【背景画像…こちらに背景に使用したい画像のURLを記入します);
}

/* フリー */
.free_menu {
width: ****;
height: ****;
margin: ****;
padding: ****;
background-image: url(【背景画像…こちらに背景に使用したい画像のURLを記入します);
}

例) background-image: url(画像URL);

 

【background-image:url(画像URL);】の指定がない場合は、1行全てを貼り付けて下さい。

●ご注意事項
背景に画像を使用される場合は、初期の画像を保存してからそのサイズのまま編集して下さい。
画像の保存は、画像の上で右クリックし「名前を付けて背景を保存」から保存できます。
画像サイズを考慮しないで制作した場合、表示が崩れる場合があります。


(4)背景に使用したい画像をアップロードします。背景画像を使用しない場合は、この作業は必要ありません。
【画像のアップロード】の【画像ファイル】に、使用したい画像を選択します。
※画像専用管理画面からでもファイルのアップロードは可能です。

(5)編集後、【登録処理を完了する】ボタンをクリックして下さい。

(6)管理画面の「デザイン管理」>「テンプレート選択」を開き、【カスタム】にある、先程のテンプレートを選択して【設定処理を完了する】ボタンをクリックします。