特定商取引ページやリンク集ページの表の背景色や背景画像を変更できますか?

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

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

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

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

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

■ 背景色の変更する場合


スタイルシート内の/* リンク集・ショップのご案内 */以下を変更します。

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

/* リンク集・ショップのご案内 */

/* td左 */ ※表の左列です。
.td_link_shop1 {
width: ****;
background-color: 【背景色…こちらの数値を任意のカラーコードに変更します】;
border-bottom:【枠線色、太さ…1px solid #FFFFFF;のように3つの指定を記載して下さい。】;
border-right: :【枠線色、太さ…1px solid #FFFFFF;のように3つの指定を記載して下さい。】;
padding: 5px;
}

/* td右 */ ※表の右列です。
.td_link_shop2 {
width: auto;
background-color:【背景色…こちらの数値を任意のカラーコードに変更します】;
border-bottom: 【枠線色、太さ…1px solid #FFFFFF;のように3つの指定を記載して下さい。】;
padding: ****;
}

/* 大枠 */ ※表の外側の枠です。
.link_shop {
background-color: 【背景色…こちらの数値を任意のカラーコードに変更します】;
border: 【枠線色、太さ…1px solid #FFFFFF;のように3つの指定を記載して下さい。】;
margin: ****;
padding: ****;
}

/* テーブル */ ※表全体の枠です。
.link_shop_table {
width: ****;
background-color: 【背景色…こちらの数値を任意のカラーコードに変更します】;
margin: ****;
padding: ****;
}

例)
background-color: #000000;
border-bottom: 1px solid #000000;

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

【border-bottom: 1px solid #000000;】のbottomは各セルの下線、rightは各セルの右線です。
左と上の線については.link_shop内のborder指定で行います。
線の種類:solidは実線、dashedは破線、dottedは点線です。
線の太さ:ピクセルで指定して下さい。1px等。

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


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

スタイルシート内の/* リンク集・ショップのご案内 */以下を変更します。基本的には上記背景色の部分を背景画像にします。

/* リンク集・ショップのご案内 */

/* td左 */ ※表の左列です。
.td_link_shop1 {
width: ****;
background-image: url(【背景画像…こちらに背景に使用したい画像のURLを記入します);
border-bottom:【枠線色、太さ…1px solid #FFFFFF;のように3つの指定を記載して下さい。】;
border-right: :【枠線色、太さ…1px solid #FFFFFF;のように3つの指定を記載して下さい。】;
padding: 5px;
}

/* td右 */ ※表の右列です。
.td_link_shop2 {
width: auto;
background-image: url(【背景画像…こちらに背景に使用したい画像のURLを記入します);
border-bottom: 【枠線色、太さ…1px solid #FFFFFF;のように3つの指定を記載して下さい。】;
padding: ****;
}

/* 大枠 */ ※表の外側の枠です。
.link_shop {
background-image: url(【背景画像…こちらに背景に使用したい画像のURLを記入します);
border: 【枠線色、太さ…1px solid #FFFFFF;のように3つの指定を記載して下さい。】;
margin: ****;
padding: ****;
}

/* テーブル */ ※表全体の枠です。
.link_shop_table {
width: ****;
background-image: url(【背景画像…こちらに背景に使用したい画像のURLを記入します);
margin: ****;
padding: ****;
}

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

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


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

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

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