ブログ　タイトル・サブタイトルの文字色・配置

先日以来、CSSの編集をいろいろ試しています。

今回は、基本的なことですがなかなかやりづらい

「タイトル文字・サブタイトル文字の色・大きさ・配置」

について書いてみます。

ここでお話するのは、ブログデザインが

「カスタム可能」の「CSS編集用デザイン」の場合です。

CSSの編集は、
「クイックリンク」をクリックし、（下の図）

その中にある「スキンCSSの編集」をクリックします。（下の図）

「現在使用中のブログデザインCSS」とかかれているところの下のボックス内で編集します。（下の図）

まず、文字の大きさと色を変えます。

下の場所を表示します。

.skinTitle　→　タイトル文字
.skinDescription　→　ブログの説明文字

色は「color」の後ろにある「#ffff00」という#と６つの数字で指定します。

色は、WEB色見本さん （←クリックすると移動できます）を参考にしています。

CSSを編集するときに気をつけていただきたいのが
「：」と「；」です。どちらも半角で入力してあります。

指定したいもの（今回はcolor）：数値など（今回は#ffff00）；

のように、数値などを入れる前に半角の「：」指定が終わったら半角の「；」を入力します。

これがなくなるとうまく表示されなくなるので気をつけてください。

「font-size」の後ろの「2.5em」のところが文字の大きさです。

数字をいろいろ変えて試してください。

「font-weight」の後ろの「bold」は太字にするという意味です。
必要ないときは消してください。

下は、私のブログのCSSです。

タイトルとサブタイトルの位置を変更するときは

以下の場所で設定します。

.skinBlogHeadingGroupArea　→　タイトルと説明の配置

全体の配置はこの中の
「padding」の後ろの数値で指定します。

ここの数値が移動する大きさになります。順番は

padding:上 右 下 左;　という順番になります。

私の場合、上5px　左70px

となっています。

.skinTitleArea　→　タイトルの配置

.skinDescriptionArea　→　ブログの説明の配置

この２つは、文字を左寄せにするか、中央寄せにするか右寄せにするかを指定します。

「text-align」の後ろで指定します。

「left」　→　左寄せ

「center」　→　中央寄せ

「right」　→　右寄せ

タイトルエリアにある

「padding-bottom」はタイトルと説明の間の隙間の大きさです。

下は私のブログの場合です。

このあたりを少し変えるだけでも、文字が見やすくなったりしますのでいろいろ試してください。

その他の箇所についても、今後、調べていきたいと思います。