ID #1980

Q.各ボタンの背景色、背景画像を変更する [HTML5テンプレート用]

各ボタンの背景色、背景画像を変更できます。

スタイルシートを編集する

デザイン管理→スタイルシートの編集から下記の箇所を編集してください。

※(****と記載している指定)は、各テンプレートのスタイルシートごとに指定に違いがあるか指定がない場合もあります。ここではサンプルとして記載しているだけですので、****のように編集しないで下さい。
/*--------------------------------------*/
/* ボタン色 */
/*--------------------------------------*/
/* 色通常 */
/* フォームボタン全般 */
.global_btn .btn_color_common,
.global_btn A.btn_color_common {
background-image: url(【背景画像…こちらに背景に使用したい画像のURLを記入します);
background-position: ****;
background-repeat: ****;
background-color: 【背景色…こちらの数値を任意のカラーコードに変更します】;
color: 【文字色…こちらの数値を任意のカラーコードに変更します】;
}

/* 色強調 */
.global_btn .btn_color_emphasis,
.global_btn A.btn_color_emphasis {
background-image: url(【背景画像…こちらに背景に使用したい画像のURLを記入します);
background-position: ****;
background-repeat: ****;
background-color: 【背景色…こちらの数値を任意のカラーコードに変更します】;
color: 【文字色…こちらの数値を任意のカラーコードに変更します】;
}
/* 色強調 */の各ボタン
・トップページ、カート関連
カートに入れる、オプション選択、レジに進む、ログイン
会員登録して購入、会員登録せずに購入、次へ、金額を更新する、購入する
・お問い合わせ
確認画面へ、送信する
・メルマガ、掲示板、携帯サイトURL
登録、新規投稿、投稿する、送信
・マイページ
変更する
/* 色通常 */の各ボタン
上記色強調ボタン以外のボタン全て。
元画像について
背景画像で指定されている場合の元画像は、下記のURLで確認することができます。
アカウントID部分をご自身のショップのアカウントIDに変更してご利用ください。

アカウント:cafe0101の場合
http://cafe0101.ocnk.net/data/cafe0101/pc/img/btn_main_b.gif
画像を利用する場合
画像専用管理画面→コンテンツフォルダに画像ファイルをアップロードしてください。
※背景画像を利用する場合の背景色
初回表示の際、画像を読み込み完了までは背景色で表示されますので指定してください。

画像URLを記載いただく際には、必ずimage/~の相対パスにて記載して下さい。
http://~の絶対パスにて記載いただいた場合、SSL保護下のページでセキュリティ警告が表示されます。 記載例)
background-image: url(image/file.gif);
最終更新: 2014-07-17 16:31