サイトの基本文字サイズ、文字色、背景色、背景画像を変更する [HTML5テンプレート用]

2014-07-17 16:33
サイトの基本文字サイズ、カラー、背景色、背景画像を変更できます。
通常文字(サイズ、カラー)、背景色、背景画像の変更

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

(****と記載している指定)は、各テンプレートのスタイルシートごとに指定に違いがあるか指定がない場合もあります。サンプルとして記載しているだけですので、****のように編集しないでください。
背景画像が背景色指定がないテンプレートがございます。その場合は、background-image、background-colorの1行をコピーして貼り付け後、背景画像、背景色を指定してください。
文字(色/サイズ)については、個別指定がある場合、body指定よりも優先される場合があります。
その場合、個別箇所での編集が必要です。
body {
background-image: url(【背景画像…背景に使用したい画像のURLを記入します);
background-color: 【背景色…任意のカラーコードを指定します】;
color: 【文字色…任意のカラーコードを指定します】;
font-size: 【文字サイズ…任意の文字サイズを指定します】;
word-break: ****;
line-height: ****;
}
文字サイズについて
HTML5テンプレートでは、文字サイズに「px」ではなく「%」を利用して表示しています。
これは、サイトの右上に配置している文字サイズの切り替えに対応するためのものです。
※body、または文字サイズを固定した箇所では、px指定を利用します。

そのため各スタイルシートの上部に文字サイズに関する下記のような表記がコメントで入っています。
これまでのpx指定に対応する%を表で記載しています。
/* font-sizeの指定表
フォントサイズ指定に%を利用しています。
拡大縮小される場合は下記の表を参考に
指定を変更してください。 例)12pxを指定の場合 font-size: 93%;
77% = 10px | 123.1% = 16px | 167% = 22px
85% = 11px | 131% = 17px | 174% = 23px
93% = 12px | 138.5% = 18px | 184% = 24px
100% = 13px | 146.5% = 19px | 192% = 25px
108% = 14px | 153.9% = 20px | 197% = 26px
116% = 15px | 161.6% = 21px |
この%指定は、親要素に対する%となります。
つまりbodyタグで13pxを指定している場合、その親要素のサイズから何%の文字サイズで表示したいかで、子要素の文字サイズを指定していきます。
初期設定では、全テンプレートのbodyタグで13pxの文字サイズが指定されています。

bodyタグが13pxで、いらっしゃいませ欄を小さい文字で表示したい時は、85%を指定すると、文字サイズは小さくなります。

また、全体の文字サイズを大きくしたい時は、bodyの文字サイズで15pxを指定した場合、サイト内の全文字サイズを大きくすることができます。
リンク文字(サイズ、カラー)
/* リンク */
A,
A h3 {
font-weight: ****;
text-decoration: ****;
color: 【文字色…任意のカラーコードを指定します】;
font-size: 【文字サイズ…任意の文字サイズを指定します】;
}
A:hover,
A h3:hover {
color: 【文字色…任意のカラーコードを指定します】;
font-size: 【文字サイズ…任意の文字サイズを指定します】;
}
元画像について
背景画像で指定されている場合の元画像は、下記のURLで確認することができます。
アカウントID部分をご自身のショップのアカウントIDに変更してご利用ください。

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

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