2005年6月20日
フォントの変更
今回は、「フォント」のカスタマイズ方法について説明します。
ブログカスタマイズ講座では、ブラウザで読みやすいフォントについて説明しますので、是非、参考にしてくださいね。
[カスタマイズ講座へ] → ブラウザで読みやすいフォントとは
フォントをカスタマイズする方法として、具体的に、「エントリー本文」のフォントを変更する方法を例にして説明します。
■ CSS(スタイルシート)の編集方法
デフォルト・テンプレートのスタイルシートを見ていただくと、下記のような記述がありますね。
<スタイルシート>
フォントを指定するには、font-family というプロパティを使用します。初期設定では、エントリー本文のフォントは、「font-family: Verdana, Arial, sans-serif」と指定されています。
この「Verdana, Arial, sans-serif」という記述を変更することで、エントリー本文のフォントを変更することができます。
フォントの指定方法には、下記のような方法があります。
■ フォント名で指定
「MS ゴシック」や「MS 明朝」のようにフォント名で指定します。フォント名にスペースが含まれている場合には、ダブルクォーテーション( " )、または、シングルクォーテーション( ' )で囲みます。
■ キーワードで指定
フォントの種類を表すキーワードで指定します。
■ 複数指定
フォントの指定は、カンマ( , )で区切って複数の候補を並べることができます。 複数の候補を記述しておくことで、記述した順にユーザー環境で利用可能なものが選択され、 より多くのユーザーに対して自分のイメージに近いフォントで表示させることができます。
指定したフォントがユーザーの環境にインストールされていない場合は、ブラウザで設定されたデフォルトのフォントで表示されます。
フォントの変更について、エントリー本文のフォントを例として説明しましたが、エントリー本文だけでなく、他の部分のフォントを変更したい場合は、その該当する「font-family」の指定フォントを編集することで変更できます。
MovableType3.17の主なクラス・セレクタは、下記の通りですので、参考にしてください。
<MovableType3.17 デフォルト・テンプレート>
以上、フォントの変更、指定方法について説明しました。
是非、活用して、望みのフォントにカスタマイズしてください。
[次の講義へ] → 文字色の変更
参考になりましたら、応援お願いします。
ブログカスタマイズ講座では、ブラウザで読みやすいフォントについて説明しますので、是非、参考にしてくださいね。
[カスタマイズ講座へ] → ブラウザで読みやすいフォントとは
エントリー本文のフォントを変更するには
フォントをカスタマイズする方法として、具体的に、「エントリー本文」のフォントを変更する方法を例にして説明します。
■ CSS(スタイルシート)の編集方法
デフォルト・テンプレートのスタイルシートを見ていただくと、下記のような記述がありますね。
<スタイルシート>
| .content p { font-family: Verdana, Arial, sans-serif; } |
フォントを指定するには、font-family というプロパティを使用します。初期設定では、エントリー本文のフォントは、「font-family: Verdana, Arial, sans-serif」と指定されています。
この「Verdana, Arial, sans-serif」という記述を変更することで、エントリー本文のフォントを変更することができます。
フォントの指定方法
フォントの指定方法には、下記のような方法があります。
■ フォント名で指定
| font-family: "MS ゴシック", "MS 明朝", Arial ; |
「MS ゴシック」や「MS 明朝」のようにフォント名で指定します。フォント名にスペースが含まれている場合には、ダブルクォーテーション( " )、または、シングルクォーテーション( ' )で囲みます。
■ キーワードで指定
| 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」の指定フォントを編集することで変更できます。
MovableType3.17の主なクラス・セレクタは、下記の通りですので、参考にしてください。
<MovableType3.17 デフォルト・テンプレート>
| クラス・セレクタ | 該当箇所 |
| #banner h1 | ブログのタイトル |
| #banner h2 | ブログの説明 |
| .content | エントリー全体 |
| .content h2 | エントリーの日付 |
| .content h3 | エントリーのタイトル |
| .content p | エントリーの本文 |
| .content p.posted | 投稿者・投稿時間・コメントなど |
| #right | サイドメニュー全体(右側) |
| .sidebar | サイドメニュー |
| .sidebar h2 | サイドメニューの見出し |
| .link-note | RSSへのリンクや検索ボックス |
| #calendar | カレンダー |
| #powered | powered by の部分 |
以上、フォントの変更、指定方法について説明しました。
是非、活用して、望みのフォントにカスタマイズしてください。
[次の講義へ] → 文字色の変更
参考になりましたら、応援お願いします。
パーマリンク | 投稿者 りっち | 2005年6月20日 23:54
|
|
はてなブックマークに追加
|
Yahooブックマークに登録
関連記事
トラックバック
このエントリーのトラックバックURL:
コメント
コメントしてください
