このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。
おちゃのこネットの刑部です。
今回のデザイン道場は、「送料無料まであと●●円です」のメッセージ部分の文字色、文字サイズを変更する方法をご紹介します。
このメッセージは、「ショップ運用設定」→「送料設定」の送料無料設定を有効にし「メッセージを表示」に設定されている場合に表示されます。
スタイルシートを編集します。
管理画面→デザイン管理→スタイルシートの編集をクリックして下さい。
スタイルシートの編集画面が開いたら、下記の指定をコピーしてスタイルシート内に貼り付けて下さい。※貼り付け位置は、最下部にお願い致します。
●メッセージと金額を同じ文字色または文字サイズに変更する場合
.charge {
color: #FF0000;
font-size: 12px;
}
●メッセージと金額を別の文字色または文字サイズに変更する場合
この場合は、.chargeと.charge .pricebの両方の指定を記載して下さい。
.charge がメッセージ部分の文字色と文字サイズ
.charge .priceb が金額部分の文字色と文字サイズとなります。
.charge {
color: #FF0000;
font-size: 12px;
}
.charge .priceb {
color: #CC0000;
font-size: 14px;
}
編集後、ページ最下部の「登録処理を完了する」ボタンをクリックして下さい。
color
について |
color: #CC0000;
文字色を指定できます。
#CC0000をご希望のカラーコードに変更して下さい。
|
font-size
について |
font-size: 14px;
文字サイズを指定できます。
14pxをご希望の文字サイズに変更して下さい。
|
前号へ
