CSS編集用デザインで文字スタイルを編集

CSS（スタイルシート）で背景画像を設置に続き、font（フォント）の設定です。CSS 編集用デザインのカスタマイズです。

CSS 編集用デザインでは、タイトル／説明／記事タイトル／ブログ本文／リンクなどの文字のスタイルをカスタマイズすることができます。

例として、ブログタイトルの文字をカスタマイズします。

変更前の CSS コード

/* (1-2) ブログタイトル文字
--------------------------------------------*/

/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,
.skinTitle:hover,
.skinTitle:focus{
color:#000000;
font-weight:bold;
font-size:2.11em;
}

「color」文字の色を変更（赤字が編集部分です）

/* (1-2) ブログタイトル文字
--------------------------------------------*/

/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,
.skinTitle:hover,
.skinTitle:focus{
color:#000000;
font-weight:bold;
font-size:2.11em;
}

ブログタイトルの文字色を「#000000（黒）」から「#ff0000（赤）」に変更しました。

スタイルシートの「color」では、文字色を指定することができます。

カラーコードを変更するだけで、各テキストのカラーを簡単に変更できます。

「font-weight」文字の太さを変更（赤字が編集部分です）

/* (1-2) ブログタイトル文字
--------------------------------------------*/

/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,
.skinTitle:hover,
.skinTitle:focus{
color:#000000;
font-weight:normal;
font-size:2.11em;
}

「font-weight」では、文字の太さを変更します。タイトルは「bold」に設定されていますが、「normal」に変更したことで文字が細くなります。

太字にしたい文字は、「font-weight:bold;」と CSS に追加します。

「font-size」文字のサイズを変更（赤字が編集部分です）

/* (1-2) ブログタイトル文字
--------------------------------------------*/

/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,
.skinTitle:hover,
.skinTitle:focus{
color:#000000;
font-weight:bold;
font-size:3.11em;
}

「font-size」では、文字のサイズ（大きさ）を変更します。

上の例では、タイトルの「font-size」を 2.11em から 3.11em に変更したので、文字のサイズが大きくなりました。

文字のサイズを変更したい場合は、「font-size:数値;」と CSS に追加します。

「font-family」書体を変更（赤字が編集部分です）

/* (1-2) ブログタイトル文字
--------------------------------------------*/

/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,
.skinTitle:hover,
.skinTitle:focus{
font-family:"HG丸ｺﾞｼｯｸM-PRO", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;
color:#000000;
font-weight:bold;
font-size:2.11em;
}

「font-family」では、フォント（書体）を変更します。

上の例では、タイトルが「HG丸ｺﾞｼｯｸM-PRO」に変更されます。

「HG丸ｺﾞｼｯｸM-PRO」を「HG行書体」「MS UI Gothic」「HGP創英角ﾎﾟｯﾌﾟ体」というように変更することで、指定したフォントの種類で表示することができます。

アメブロ全体のフォント（書体）をCSSで変更する方法でも解説しましたが、「font-family」は、左から順番に第一候補／第二候補／第三候補／第四候補／第五候補と並びます。※フォントは「 , 」（カンマ）で区切ります。

第一候補の書体が閲覧者のパソコンにインストールされていない場合は、第二候補が表示されます。

第一候補の書体を入れ替えて、表示を確認するからプレビューすると、書体の変更を確認できます。