フォントの変更（livedoorBlog編）

今回は、livedoor Blogの「フォント」のカスタマイズ方法について説明します。

ブログカスタマイズ講座では、ブラウザで読みやすいフォントについて説明しますので、是非、参考にしてくださいね。

[カスタマイズ講座へ] → ブラウザで読みやすいフォント


フォントを変更する場合、スタイルシートを編集すると簡単に変更することができます。

まず、フォントをカスタマイズする方法として、エントリー本文の文字サイズを変更する方法を例にして説明します。
テンプレートは、「デフォルト2005（ブルー）」を使用して説明します。

■ CSS（スタイルシート）の編集方法
「デフォルト2005（ブルー）」テンプレートのスタイルシートを見ていただくと、下記のような記述があります。

＜スタイルシート＞

.main,.mainmore{ 　　　　font-size:small; 　　　　margin:10px 20px 0; 　　　　text-align:left; }

エントリー本文のフォントを指定するには、.main,.mainmore内で、font-family というプロパティを追加し、使用するフォントを指定します。

＜スタイルシートの編集例＞

.main,.mainmore{ 　　　　font-size:small; 　　　　margin:10px 20px 0; 　　　　text-align:left; 　　　　font-family:Verdana, Arial, sans-serif; }

なお、初期設定では、エントリー本文のフォントを個別に指定されておらず、bodyで「font-family: arial ,sans-serif」と指定されています。

body{ 　　　　・・・ 　　　　font-family:arial ,sans-serif; }

bodyの「arial ,sans-serif」という記述を変更すると、ブログ全体（個別に指定されている部分は除く）のフォントを変更することができます。


フォントの指定方法には、下記のような方法があります。

■ フォント名で指定

font-family: "MS ゴシック", "MS 明朝", Arial ;

｢ＭＳ ゴシック｣や｢ＭＳ 明朝｣のようにフォント名で指定します。フォント名にスペースが含まれている場合には、ダブルクォーテーション（ " ）、または、シングルクォーテーション（ ' ）で囲みます。

■ キーワードで指定

font-family: sans-serif;

フォントの種類を表すキーワードで指定します。

種類	意味（フォント例）
serif	明朝体 （例、MS P明朝）
sans-serif	ゴシック体 （例、MS Pゴシック）
monospase	等幅文字 （例、MS ゴシック）
cursive	手書き文字 （例、HG行書体）
fantasy	装飾的な文字 （例、HG創英角ﾎﾟｯﾌﾟ体）

■ 複数指定

font-family: Verdana, Arial, sans-serif;

フォントの指定は、カンマ（ , ）で区切って複数の候補を並べることができます。 複数の候補を記述しておくことで、記述した順にユーザー環境で利用可能なものが選択され、 より多くのユーザーに対して自分のイメージに近いフォントで表示させることができます。

指定したフォントがユーザーの環境にインストールされていない場合は、ブラウザで設定されたデフォルトのフォントで表示されます。


フォントの変更について、エントリー本文のフォントの変更を例として説明しましたが、エントリー本文だけでなく、他の部分のフォントを変更したい場合、例えば、ブログのタイトルやエントリーの日付などを変更したい場合は、その該当するクラスで「font-family」を追加して使用するフォントを指定することで変更できます。

livedoorBlog「デフォルト2005（ブルー）」の主なクラスは、下記の通りですので、参考にしてください。

＜livedoorBlog 「デフォルト2005（ブルー）」テンプレート＞

クラス	該当箇所
.blogtitle	ブログのタイトル
.description	ブログの説明
#content	エントリー全体
.date	エントリーの日付
.title	エントリーのタイトル
.main,.mainmore	エントリーの本文
.posted	投稿者・投稿時間・コメントなど
#left	サイドメニュー全体（左側）
#right	サイドメニュー全体（右側）
side	サイドメニュー
.sidetitle	サイドメニューのタイトル
.link-note	RSSへのリンクや検索ボックス
.calendarhead	カレンダーのヘッダ
.caltblwk td	カレンダーの週
.caltblday td	カレンダーの日

以上、フォントの変更、指定方法について説明しました。
是非、活用して、望みのフォントにカスタマイズしてください。

[次の講義へ] → 文字色の変更

参考になりましたら、応援お願いします。