ここではブログのデザインのベースとなる部分の説明と、その設定を変更する方法について解説します。
まず、管理画面の左側にあるメニューの一番下にある「ＣＳＳファイル設定」を開き、下図のような部分を探してください。
この部分では、以下の設定を管理しています。
- 表示する文字の色
- 背景の色
- 書体（イタリック体など）
- 文字の太さ
- 文字のデザイン
- 行の高さ
- スモールキャピタル表示（アルファベットの小文字を小さな大文字にする）の設定
★文字の色の変更
設定している部分 → 【color: #333333;】
アンダーラインの引かれた部分を変更する事で自分の思い通りの色に文字の色を変更できます。
色の調整の仕方はこちら
★背景色を変更します
ブログの背景色を変更します。
ここで言う背景とは、ブログの一番外周部分にある、枠外の余白部分の事を指します。
設定している部分 →【background-color: #fff;】
アンダーラインの引かれた部分が色のデータになっており、この部分の数字を変更する事で自分の思い通りの色に背景の色を変更できます。
色の調整の仕方はこちら
★文字の書体の変更
設定している部分→【font-style: normal;】
アンダーラインの部分の部分を変更する事で、ブログに使用されている文字を全てイタリック体や斜体に変更する事ができます。変更する場合は「normal」と書かれた部分を以下の様に変更してください。
通常の表記 → normal
イタリック体 → italic
斜体 → oblique
★文字の太さの変更
設定している部分→【font-weight: normal;】
文字の太さを制御する部分で、数字もしくは命令文で制御します。
アンダーラインの部分に100～900の数字もしくは命令文を入力してください。
◆命令文一覧
normal･･･････標準の太さです。（数値で400を指定した場合と同じ）
bold･････････一般的な太字の太さです。（数値で700を指定した場合と同じ）
lighter･･･････相対的に一段階細くします。
bolder･･･････相対的に一段階太くします。
※使用しているフォントが指定した太さに対応していない場合は、この項目を変更しても反映されません。
★フォントの変更
設定している部分→【font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", ...】
例として、フォントの文字を「DFP行書体」と言うフォントに変更する場合を説明します。
【例.DPF行書体】
font-family: "DFP行書体", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;
※表示したいフォントは、必ず一番最初に記述してください。
※全角文字を含むフォント名は、" "で囲んでください。
※フォント名の間は「,」で区切ってください。
◆フォントを設定する際の注意
フォントを変更する際に気をつけなければならないことは、相手が同じフォントを使用できる環境にない場合、自動的に他のフォントが適用されてしまうという事です。
その結果、意図したものと違うデザインになってしまったりすることがあるので、注意が必要です。
そのためフォントを設定する場合は、意図したフォントが使用できない時に代用されるフォントをあらかじめ指定する事ができます。
◆フォントの代用の指定
フォントの設定を見ると、初期設定では「ＭＳ Ｐゴシック」「Osaka」「ヒラギノ角ゴ Pro W3」「sans-serif」の4つのフォントが設定されており、これらの表記される順番がそのまま表示の優先順位となっております。
つまり、最初に表記されている「ＭＳ Ｐゴシック」のフォントが閲覧者のパソコンに登録されていれば「ＭＳ Ｐゴシック」で表示されますが、もし閲覧者のパソコンに「ＭＳ Ｐゴシック」が入っていなければ代用として「Osaka」のフォントで文字が表示され、「Osaka」も登録されていなければ「ヒラギノ角ゴ Pro W3」のフォントで文字が表示されます。
◆ＯＳの初期フォント
各ＯＳには始めから登録されているフォントがあり、このフォントはＯＳによって異なります。
windowsならば「MS ゴシック」や「MS 明朝」、Mac環境ならば「Osaka」や「ヒラギノ角ゴ」等が最初から登録されております。
★行の高さの変更
設定している部分→【line-height:130%;】
アンダーラインの引かれた部分の数字を変更することで、文字の上下の間隔を変更します。
この数字を小さくしすぎると上下の文字と重なって表示されますので、少なくとも100%以上に設定する事をお勧めします。
★アルファベットの特殊な設定
設定している部分→【font-variant:normal;】
スモールキャップと言うアルファベットを表記する際の特殊な処理を設定します。
初期設定では【normal】となっておりますが、これを【small-caps】に変更すると、アルファベットの小文字を次のように変更します。
【normal】.............abcdefgABCDEFG
↓
【small-caps】......abcdefgABCDEFG
