2007年2月18日
行間の変更（livedoorBlog編）
今回は、livedoorブログの「行間の変更」について説明します。行間を広げることによって、非常に読みやすくなりますので、適切な行間を空けるようにカスタマイズしましょう。
行間を変更する場合、スタイルシートを編集すると簡単に変更することができます。
では、具体的に、「エントリー本文」の行間を変更する方法を例に挙げて説明します。
テンプレートは、公式テンプレートの「デフォルト2005（ブルー）」を使用して説明します。
■ CSS（スタイルシート）の編集方法
「デフォルト2005（ブルー）」テンプレートのスタイルシートを見ていただくと、下記のような記述があります。
＜スタイルシート＞
エントリー本文の行間を変更するには、.main,.mainmore,.article_tags内で、line-height というプロパティを追加して、行間を指定します。
＜スタイルシートの編集例＞
初期設定では、blogbodyで「line-height : 130%;」とエントリー全体的に指定されています。
この「130%」という記述を変更することで、行間を変更することができますが、エントリー本文の行間だけを変更するには、上記のように個別に指定します。
行間の指定方法には、「15pt」のように絶対サイズで指定する方法、 「150%」のように相対サイズで指定する方法、「1.5」のように数値のみで指定する方法があります。
■ 絶対サイズで指定
文字サイズが 10pt のときに、行の高さを 15pt に指定すると、行間は 5pt になります。
（行間 ＝ 行の高さ － 文字サイズ）
■ 相対サイズで指定
文字サイズが 10pt のときに、行の高さを 150% （文字サイズ×1.5倍）に指定すると、行間は 5pt になります。
（行間 ＝ 行の高さ － 文字サイズ）
■ 数値のみ（単位なし）で指定
文字サイズが 10pt のときに、行の高さを 1.5 （文字サイズ×1.5倍）に指定すると、行間は 5pt になります。
（行間 ＝ 行の高さ － 文字サイズ）
絶対サイズと相対サイズの各単位は、下記のような意味ですので、参考にしてください。
行間の変更について、エントリー本文の部分を例として説明しましたが、エントリー本文だけでなく、他の部分の行間を変更したい場合は、その該当するクラスに「line-height」を指定することで変更することができます。
livedoorBlog「デフォルト2005（ブルー）」の主なクラスは、下記の通りですので、参考にしてください。
＜livedoorBlog 「デフォルト2005（ブルー）」テンプレート＞
以上、行間（行の高さ）の指定方法について説明しました。
是非、参考にして、読みやすい行間にカスタマイズしてくださいね。
[次の講義へ] → 文字間隔の調整
参考になりましたら、1クリックの応援お願いします。
エントリーの行間を変更するには
行間を変更する場合、スタイルシートを編集すると簡単に変更することができます。
では、具体的に、「エントリー本文」の行間を変更する方法を例に挙げて説明します。
テンプレートは、公式テンプレートの「デフォルト2005（ブルー）」を使用して説明します。
■ CSS（スタイルシート）の編集方法
「デフォルト2005（ブルー）」テンプレートのスタイルシートを見ていただくと、下記のような記述があります。
＜スタイルシート＞
| .main,.mainmore,.article_tags{ font-size:12px; margin:10px 20px 0; text-align:left; } |
エントリー本文の行間を変更するには、.main,.mainmore,.article_tags内で、line-height というプロパティを追加して、行間を指定します。
＜スタイルシートの編集例＞
| .main,.mainmore,.article_tags{ font-size:12px; margin:10px 20px 0; text-align:left; line-height: 1.5; } |
初期設定では、blogbodyで「line-height : 130%;」とエントリー全体的に指定されています。
この「130%」という記述を変更することで、行間を変更することができますが、エントリー本文の行間だけを変更するには、上記のように個別に指定します。
行間（行の高さ）の指定方法
行間の指定方法には、「15pt」のように絶対サイズで指定する方法、 「150%」のように相対サイズで指定する方法、「1.5」のように数値のみで指定する方法があります。
■ 絶対サイズで指定
| line-height: 15pt; |
文字サイズが 10pt のときに、行の高さを 15pt に指定すると、行間は 5pt になります。
（行間 ＝ 行の高さ － 文字サイズ）
■ 相対サイズで指定
| line-height: 150%; |
文字サイズが 10pt のときに、行の高さを 150% （文字サイズ×1.5倍）に指定すると、行間は 5pt になります。
（行間 ＝ 行の高さ － 文字サイズ）
■ 数値のみ（単位なし）で指定
| line-height: 1.5; |
文字サイズが 10pt のときに、行の高さを 1.5 （文字サイズ×1.5倍）に指定すると、行間は 5pt になります。
（行間 ＝ 行の高さ － 文字サイズ）
| 絶対サイズ・相対サイズの単位 |
絶対サイズと相対サイズの各単位は、下記のような意味ですので、参考にしてください。
| 絶対サイズ | 意味 |
| in | インチ。1in = 25.4mm |
| cm | センチメートル |
| mm | ミリメートル |
| pt | ポイント。1pt = 1/72in |
| pc | パイカ。1pc = 12pt |
| px | ピクセル。表示上の1ドット幅 （※正確にはデバイス依存の相対サイズ） |
| 相対サイズ | 意味 |
| em | 基準書体の文字の高さ （英字の「M」の高さを基準とした大きさ） |
| ex | 基準書体の文字の高さ （英字の「x」の高さを基準とした大きさ） |
| % | 基準書体のサイズに対する百分率 |
エントリー本文以外の行間の変更
行間の変更について、エントリー本文の部分を例として説明しましたが、エントリー本文だけでなく、他の部分の行間を変更したい場合は、その該当するクラスに「line-height」を指定することで変更することができます。
livedoorBlog「デフォルト2005（ブルー）」の主なクラスは、下記の通りですので、参考にしてください。
＜livedoorBlog 「デフォルト2005（ブルー）」テンプレート＞
| クラス | 該当箇所 |
| .blogtitle | ブログのタイトル |
| .description | ブログの説明 |
| #content | エントリー全体 |
| .date | エントリーの日付 |
| .title | エントリーのタイトル |
| .main,.mainmore | エントリーの本文 |
| .posted | 投稿者・投稿時間・コメントなど |
| #left | サイドメニュー全体（左側） |
| #right | サイドメニュー全体（右側） |
| side | サイドメニュー |
| .sidetitle | サイドメニューのタイトル |
| .link-note | RSSへのリンクや検索ボックス |
| .calendarhead | カレンダーのヘッダ |
| .caltblwk td | カレンダーの週 |
| .caltblday td | カレンダーの日 |
以上、行間（行の高さ）の指定方法について説明しました。
是非、参考にして、読みやすい行間にカスタマイズしてくださいね。
[次の講義へ] → 文字間隔の調整
参考になりましたら、1クリックの応援お願いします。
パーマリンク
| コメント (0)
| トラックバック (0)
はてなブックマークに追加
| 
2006年5月 7日
文字色の変更（livedoorBlog編）
今回は、livedoorBlogの「文字色の変更」方法について説明します。
具体的に、エントリー本文の文字色を変更する方法を例に挙げて、説明します。
文字色を変更する場合、スタイルシートを編集すると簡単に変更することができます。
■ CSS（スタイルシート）の編集方法
「デフォルト2005（ブルー）」テンプレートのスタイルシートを見ていただくと、下記のような記述があります。
＜スタイルシート＞
エントリー部分の文字色を変更するには、.main,.mainmore内で、color というプロパティを追加して、文字色を指定します。
初期設定では、bodyで「color: #444;」と全体的に指定されていますので、エントリー部分の文字色だけを変更するには、エントリー部分の文字色を個別に指定します。
＜スタイルシートの編集例＞
文字色の指定方法には、「#666666」のように16進表記で指定する方法と、 「blue」のようにカラーネームで指定する方法があります。
■ 16進表記で指定
16進表記で指定する場合、できる限り、WEBセーフカラーを使用してください。
WEBセーフカラーとは、8ビットカラー256色のうち、MacintoshとWindowsで異なる40色を除いた216色のWEBカラーのことです。 WEBセーフカラーを使用すれば、表示の際に色が変換されてしまうことが少なくなり、 より多くの環境で意図通りの色で表示させることができます。
■ カラーネームで指定
16進表記の他にカラーネームで色を指定することができます。
カラーネームによる指定の場合、色名によっては使用OSやブラウザのバージョンなどの環境により、 正しく表示できないことがあるので注意してください。
HTML4.01とXHTML1.0、CSS2で共通して正式に使用できるカラーネームは、下記の16色です。
■ カラーチャート表（標準カラー16色）
文字色の変更について、エントリー本文の文字色の変更を例として説明しましたが、エントリー本文だけではなく、他の部分の文字色を変更したい場合、例えば、ブログのタイトルやエントリーの日付などを変更したい場合は、その該当するクラスの文字色の指定を変更すると、その部分の文字色が変更できます。
livedoorBlog「デフォルト2005（ブルー）」の主なクラスは、下記の通りですので、参考にしてください。
＜livedoorBlog 「デフォルト2005（ブルー）」テンプレート＞
以上、文字色の変更、指定方法について説明しました。
是非、読みやすい文字色にカスタマイズしてくださいね。
[次の講義へ] →行間の変更
参考になりましたら、応援お願いします。
具体的に、エントリー本文の文字色を変更する方法を例に挙げて、説明します。
エントリー本文の文字色を変更するには
文字色を変更する場合、スタイルシートを編集すると簡単に変更することができます。
■ CSS（スタイルシート）の編集方法
「デフォルト2005（ブルー）」テンプレートのスタイルシートを見ていただくと、下記のような記述があります。
＜スタイルシート＞
| .main,.mainmore{ font-size:small; margin:10px 20px 0; text-align:left; } |
エントリー部分の文字色を変更するには、.main,.mainmore内で、color というプロパティを追加して、文字色を指定します。
初期設定では、bodyで「color: #444;」と全体的に指定されていますので、エントリー部分の文字色だけを変更するには、エントリー部分の文字色を個別に指定します。
＜スタイルシートの編集例＞
| .main,.mainmore{ font-size:small; margin:10px 20px 0; text-align:left; color: #666666; } |
文字色の指定方法
文字色の指定方法には、「#666666」のように16進表記で指定する方法と、 「blue」のようにカラーネームで指定する方法があります。
■ 16進表記で指定
| color: #666666; |
16進表記で指定する場合、できる限り、WEBセーフカラーを使用してください。
WEBセーフカラーとは、8ビットカラー256色のうち、MacintoshとWindowsで異なる40色を除いた216色のWEBカラーのことです。 WEBセーフカラーを使用すれば、表示の際に色が変換されてしまうことが少なくなり、 より多くの環境で意図通りの色で表示させることができます。
■ カラーネームで指定
| color: blue; |
16進表記の他にカラーネームで色を指定することができます。
カラーネームによる指定の場合、色名によっては使用OSやブラウザのバージョンなどの環境により、 正しく表示できないことがあるので注意してください。
HTML4.01とXHTML1.0、CSS2で共通して正式に使用できるカラーネームは、下記の16色です。
■ カラーチャート表（標準カラー16色）
| Aqua #00FFFF |
Yellow #FFFF00 |
Fuchsia #FF00FF |
White #FFFFFF |
| Teal #008080 |
Olive #808000 |
Purple #800080 |
Gray #808080 |
| Blue #0000FF |
Lime #00FF00 |
Red #FF0000 |
Silver #C0C0C0 |
| Navy #000080 |
Green #008000 |
Maroon #800000 |
Black #000000 |
エントリー本文以外の文字色の変更
文字色の変更について、エントリー本文の文字色の変更を例として説明しましたが、エントリー本文だけではなく、他の部分の文字色を変更したい場合、例えば、ブログのタイトルやエントリーの日付などを変更したい場合は、その該当するクラスの文字色の指定を変更すると、その部分の文字色が変更できます。
livedoorBlog「デフォルト2005（ブルー）」の主なクラスは、下記の通りですので、参考にしてください。
＜livedoorBlog 「デフォルト2005（ブルー）」テンプレート＞
| クラス | 該当箇所 |
| .blogtitle | ブログのタイトル |
| .description | ブログの説明 |
| #content | エントリー全体 |
| .date | エントリーの日付 |
| .title | エントリーのタイトル |
| .main,.mainmore | エントリーの本文 |
| .posted | 投稿者・投稿時間・コメントなど |
| #left | サイドメニュー全体（左側） |
| #right | サイドメニュー全体（右側） |
| side | サイドメニュー |
| .sidetitle | サイドメニューのタイトル |
| .link-note | RSSへのリンクや検索ボックス |
| .calendarhead | カレンダーのヘッダ |
| .caltblwk td | カレンダーの週 |
| .caltblday td | カレンダーの日 |
以上、文字色の変更、指定方法について説明しました。
是非、読みやすい文字色にカスタマイズしてくださいね。
[次の講義へ] →行間の変更
参考になりましたら、応援お願いします。
パーマリンク
| コメント (3)
| トラックバック (1)
はてなブックマークに追加
|
2006年1月30日
フォントの変更（livedoorBlog編）
今回は、livedoor Blogの「フォント」のカスタマイズ方法について説明します。
ブログカスタマイズ講座では、ブラウザで読みやすいフォントについて説明しますので、是非、参考にしてくださいね。
[カスタマイズ講座へ] → ブラウザで読みやすいフォント
フォントを変更する場合、スタイルシートを編集すると簡単に変更することができます。
まず、フォントをカスタマイズする方法として、エントリー本文の文字サイズを変更する方法を例にして説明します。
テンプレートは、「デフォルト2005（ブルー）」を使用して説明します。
■ CSS（スタイルシート）の編集方法
「デフォルト2005（ブルー）」テンプレートのスタイルシートを見ていただくと、下記のような記述があります。
＜スタイルシート＞
エントリー本文のフォントを指定するには、.main,.mainmore内で、font-family というプロパティを追加し、使用するフォントを指定します。
＜スタイルシートの編集例＞
なお、初期設定では、エントリー本文のフォントを個別に指定されておらず、bodyで「font-family: arial ,sans-serif」と指定されています。
bodyの「arial ,sans-serif」という記述を変更すると、ブログ全体（個別に指定されている部分は除く）のフォントを変更することができます。
フォントの指定方法には、下記のような方法があります。
■ フォント名で指定
｢ＭＳ ゴシック｣や｢ＭＳ 明朝｣のようにフォント名で指定します。フォント名にスペースが含まれている場合には、ダブルクォーテーション（ " ）、または、シングルクォーテーション（ ' ）で囲みます。
■ キーワードで指定
フォントの種類を表すキーワードで指定します。
■ 複数指定
フォントの指定は、カンマ（ , ）で区切って複数の候補を並べることができます。 複数の候補を記述しておくことで、記述した順にユーザー環境で利用可能なものが選択され、 より多くのユーザーに対して自分のイメージに近いフォントで表示させることができます。
指定したフォントがユーザーの環境にインストールされていない場合は、ブラウザで設定されたデフォルトのフォントで表示されます。
フォントの変更について、エントリー本文のフォントの変更を例として説明しましたが、エントリー本文だけでなく、他の部分のフォントを変更したい場合、例えば、ブログのタイトルやエントリーの日付などを変更したい場合は、その該当するクラスで「font-family」を追加して使用するフォントを指定することで変更できます。
livedoorBlog「デフォルト2005（ブルー）」の主なクラスは、下記の通りですので、参考にしてください。
＜livedoorBlog 「デフォルト2005（ブルー）」テンプレート＞
以上、フォントの変更、指定方法について説明しました。
是非、活用して、望みのフォントにカスタマイズしてください。
[次の講義へ] → 文字色の変更
参考になりましたら、応援お願いします。
ブログカスタマイズ講座では、ブラウザで読みやすいフォントについて説明しますので、是非、参考にしてくださいね。
[カスタマイズ講座へ] → ブラウザで読みやすいフォント
エントリー本文のフォントを変更するには
フォントを変更する場合、スタイルシートを編集すると簡単に変更することができます。
まず、フォントをカスタマイズする方法として、エントリー本文の文字サイズを変更する方法を例にして説明します。
テンプレートは、「デフォルト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 | カレンダーの日 |
以上、フォントの変更、指定方法について説明しました。
是非、活用して、望みのフォントにカスタマイズしてください。
[次の講義へ] → 文字色の変更
参考になりましたら、応援お願いします。
パーマリンク
| コメント (0)
| トラックバック (2)
はてなブックマークに追加
|
2006年1月15日
文字サイズの変更（livedoorBlog編）
今回は、livedoor Blogの「文字サイズ」のカスタマイズ方法について説明します。
文字サイズを変更するには、スタイルシートを編集すると簡単に変更することができます。
livedoorBlogのカスタマイズ方法が分らないという方は、下記を参考にしてくださいね。
ここでは、文字サイズをカスタマイズする方法として、エントリー本文の文字サイズを変更する方法を例にして説明します。
テンプレートは、「デフォルト2005（ブルー）」を使用して説明します。
■ CSS（スタイルシート）の編集
「デフォルト2005（ブルー）」テンプレートのスタイルシートを見ていただくと、下記のような記述があります。
＜スタイルシートの記述例＞
文字サイズは、font-size というプロパティで指定されています。
「main,.mainmore」とは、エントリーの本文部分を指します。
初期設定では、エントリー本文の文字サイズは、「small」と指定されています。
この「small」という記述を変更することで、エントリー本文の文字サイズを変更することができます。
文字サイズの指定方法は、「small」というようなキーワードで指定したり、「12pt」というような数値+単位で指定することができます。
このように文字サイズの指定方法には、いくつか方法がありますので、それぞれ説明します。
■ 7段階のキーワードで指定
下記のような、7段階に分けたキーワードで指定する方法です。
< 表示例 >
livedoorBlogの初期設定でも、この指定方法が使われていますが、7段階でしかサイズを変更できないため、微調整したい場合には適していません。
また、文字サイズの解釈がブラウザによって異なる場合があります。例えば、IEとNetscapeでは、同じ、small を指定していても、文字の大きさが違うように見えます。
■ smaller , largerで指定
親要素の文字サイズに対して、「1段階小さい文字サイズ」、「1段階大きい文字サイズ」にする指定方法です。
< 表示例 >
便利な指定方法ですが、上記と同様、微調整したい場合には適していません。例えば、「0.5段階分小さくしたい」と思っても無理です＾＾
■ 数値 + 単位
数値に単位を付けて文字サイズを指定する方法です。
単位には px、ex、in、cm、mm、pt、pc などがあります。
< 表示例 >
文字サイズの指定にptやpxなどの単位を使用すると、ブラウザの種類や設定によっては、ユーザー側で文字の大きさを変更できなくなる場合があります。ですので、ユーザビリティ・アクセシビリティ上、あまり望ましいとは言えません。
■ ％値（相対指定）
親要素の文字サイズに対する割合で指定する方法です。
< 表示例 >
上記のように「%」を使った割合の指定では、「元の文字サイズ」を「100％」とした相対サイズを指定できます。
x-small や x-large などの指定方法よりも、はるかに細かなサイズ指定が可能です。
■ em値（相対指定）
上記の「% 値」と同じような方法として、単位 em を使った文字サイズの指定方法もあります
< 表示例 >
「1em」とは「1文字分」の意味です。例えば、「1.2em」と指定すれば「1.2文字分の大きさ」で表示されます。これは、「120%」と指定した場合と同じです。
これらの指定方法は「相対指定」ですので、ブラウザの文字サイズ設定を変更すれば、それに合わせて表示サイズも拡大・縮小されます。ユーザビリティ上も問題ありません。
ですので、文字サイズの指定を行う場合は、できるだけ em や ％ などの相対的な単位を使用し、必要に応じて文字のサイズを変更できるようにしておく方が望ましいですね。
ただし、ユーザー側で文字サイズを変更すると、レイアウトが崩れてしまう場合などは、文字サイズの変更をできなくするために、フォントサイズの指定に pt や px などの単位を使用するということもあります。
絶対サイズと相対サイズの各単位は、下記のような意味ですので、参考にしてください。
文字サイズの変更について、エントリー本文の文字サイズを例として説明しましたが、エントリー本文だけでなく、他の部分の文字サイズを変更したい場合、例えば、ブログのタイトルやエントリーの日付などを変更したい場合は、その該当するクラスの「font-size」を編集することで変更できます。
livedoorBlog「デフォルト2005（ブルー）」の主なクラスは、下記の通りですので、参考にしてください。
＜livedoorBlog 「デフォルト2005（ブルー）」テンプレート＞
以上、文字サイズの変更、指定方法について説明しました。
是非、参考にして、ユーザーアビリティを考慮した文字サイズにカスタマイズしてください。
ブログカスタマイズ講座では、望ましい文字サイズの指定方法についても説明していますので、是非、参考にしてくださいね。
[ブログカスタマイズ講座] → 望ましい文字サイズの指定方法とは
[次の講義へ] → フォントの変更
参考になりましたら、応援お願いします。
文字サイズを変更するには、スタイルシートを編集すると簡単に変更することができます。
livedoorBlogのカスタマイズ方法が分らないという方は、下記を参考にしてくださいね。
エントリー本文の文字サイズを変更するには
ここでは、文字サイズをカスタマイズする方法として、エントリー本文の文字サイズを変更する方法を例にして説明します。
テンプレートは、「デフォルト2005（ブルー）」を使用して説明します。
■ CSS（スタイルシート）の編集
「デフォルト2005（ブルー）」テンプレートのスタイルシートを見ていただくと、下記のような記述があります。
＜スタイルシートの記述例＞
| .main,.mainmore{ font-size:small; margin:10px 20px 0; text-align:left; } |
文字サイズは、font-size というプロパティで指定されています。
「main,.mainmore」とは、エントリーの本文部分を指します。
初期設定では、エントリー本文の文字サイズは、「small」と指定されています。
この「small」という記述を変更することで、エントリー本文の文字サイズを変更することができます。
テンプレートの編集方法
文字サイズの指定方法は、「small」というようなキーワードで指定したり、「12pt」というような数値+単位で指定することができます。
このように文字サイズの指定方法には、いくつか方法がありますので、それぞれ説明します。
■ 7段階のキーワードで指定
下記のような、7段階に分けたキーワードで指定する方法です。
< 表示例 >
|
|||||||||||||
livedoorBlogの初期設定でも、この指定方法が使われていますが、7段階でしかサイズを変更できないため、微調整したい場合には適していません。
また、文字サイズの解釈がブラウザによって異なる場合があります。例えば、IEとNetscapeでは、同じ、small を指定していても、文字の大きさが違うように見えます。
■ smaller , largerで指定
親要素の文字サイズに対して、「1段階小さい文字サイズ」、「1段階大きい文字サイズ」にする指定方法です。
< 表示例 >
|
便利な指定方法ですが、上記と同様、微調整したい場合には適していません。例えば、「0.5段階分小さくしたい」と思っても無理です＾＾
■ 数値 + 単位
数値に単位を付けて文字サイズを指定する方法です。
単位には px、ex、in、cm、mm、pt、pc などがあります。
< 表示例 >
|
文字サイズの指定にptやpxなどの単位を使用すると、ブラウザの種類や設定によっては、ユーザー側で文字の大きさを変更できなくなる場合があります。ですので、ユーザビリティ・アクセシビリティ上、あまり望ましいとは言えません。
■ ％値（相対指定）
親要素の文字サイズに対する割合で指定する方法です。
< 表示例 >
|
上記のように「%」を使った割合の指定では、「元の文字サイズ」を「100％」とした相対サイズを指定できます。
x-small や x-large などの指定方法よりも、はるかに細かなサイズ指定が可能です。
■ em値（相対指定）
上記の「% 値」と同じような方法として、単位 em を使った文字サイズの指定方法もあります
< 表示例 >
|
「1em」とは「1文字分」の意味です。例えば、「1.2em」と指定すれば「1.2文字分の大きさ」で表示されます。これは、「120%」と指定した場合と同じです。
これらの指定方法は「相対指定」ですので、ブラウザの文字サイズ設定を変更すれば、それに合わせて表示サイズも拡大・縮小されます。ユーザビリティ上も問題ありません。
ですので、文字サイズの指定を行う場合は、できるだけ em や ％ などの相対的な単位を使用し、必要に応じて文字のサイズを変更できるようにしておく方が望ましいですね。
ただし、ユーザー側で文字サイズを変更すると、レイアウトが崩れてしまう場合などは、文字サイズの変更をできなくするために、フォントサイズの指定に pt や px などの単位を使用するということもあります。
絶対サイズ・相対サイズの単位
絶対サイズと相対サイズの各単位は、下記のような意味ですので、参考にしてください。
| 絶対サイズ | 意味 |
| in | インチ。1in = 25.4mm |
| cm | センチメートル |
| mm | ミリメートル |
| pt | ポイント。1pt = 1/72in |
| pc | パイカ。1pc = 12pt |
| px | ピクセル。表示上の1ドット幅 （※正確にはデバイス依存の相対サイズ） |
| 相対サイズ | 意味 |
| em | 基準書体の文字の高さ （英字の「M」の高さを基準とした大きさ） |
| ex | 基準書体の文字の高さ （英字の「x」の高さを基準とした大きさ） |
| % | 基準書体のサイズに対する百分率 |
エントリー本文以外の文字サイズの変更
文字サイズの変更について、エントリー本文の文字サイズを例として説明しましたが、エントリー本文だけでなく、他の部分の文字サイズを変更したい場合、例えば、ブログのタイトルやエントリーの日付などを変更したい場合は、その該当するクラスの「font-size」を編集することで変更できます。
livedoorBlog「デフォルト2005（ブルー）」の主なクラスは、下記の通りですので、参考にしてください。
＜livedoorBlog 「デフォルト2005（ブルー）」テンプレート＞
| クラス | 該当箇所 |
| .blogtitle | ブログのタイトル |
| .description | ブログの説明 |
| #content | エントリー全体 |
| .date | エントリーの日付 |
| .title | エントリーのタイトル |
| .main,.mainmore | エントリーの本文 |
| .posted | 投稿者・投稿時間・コメントなど |
| #left | サイドメニュー全体（左側） |
| #right | サイドメニュー全体（右側） |
| side | サイドメニュー |
| .sidetitle | サイドメニューのタイトル |
| .link-note | RSSへのリンクや検索ボックス |
| .calendarhead | カレンダーのヘッダ |
| .caltblwk td | カレンダーの週 |
| .caltblday td | カレンダーの日 |
以上、文字サイズの変更、指定方法について説明しました。
是非、参考にして、ユーザーアビリティを考慮した文字サイズにカスタマイズしてください。
ブログカスタマイズ講座では、望ましい文字サイズの指定方法についても説明していますので、是非、参考にしてくださいね。
[ブログカスタマイズ講座] → 望ましい文字サイズの指定方法とは
[次の講義へ] → フォントの変更
参考になりましたら、応援お願いします。
パーマリンク
| コメント (4)
| トラックバック (0)
はてなブックマークに追加
|
』
→
』
→