人気ブログランキングの応援
をして戴けると励みになります。
文字を読み易くする簡単な方法は、
文字の行間、文字幅、文字サイズ等について
CSSで設定しておくことです。
前もって設定しておけば、その都度考えなくてもよいので、
とても楽です。
では、ケースバイケースで文字を読み易くする方法をまとめてみましょう。
ＣＳＳでメッセージボード上の文字の行間と文字幅を設定する場合ＣＳＳを次のように設定します。
/* メッセージボードの行間と文字幅 */
#message .contents{
line-height:1.5;/*行間*/
font-size:1.0em; /*文字サイズ*/
letter-spacing: 0px;/*文字幅*/
}
ＣＳＳで記事の文字の行間と文字幅を設定する場合ＣＳＳを次のように設定します。
/* 記事の行間と文字幅 */
.entry .contents {
line-height:1.5;/*行間*/
letter-spacing: 0px;/*文字幅*/
}
#main .entry .contents {
font-size: 1.2em; /*文字サイズ*/
}
ＣＳＳでサイドバーの文字の行間と文字幅を設定する場合ＣＳＳを次のように設定します。
/* サイドバーの行間と文字幅 */
#recent_entries .menu_frame li,/*最近の記事*/
#theme_list .menu_frame li,/*テーマ一覧*/
#reader .menu_frame li,/*ブログの読者*/
#bookmark .menu_frame li,/*ブックマーク*/
#favorite .menu_frame li,/*お気に入りブログ*/
#archives .menu_frame li/*アーカイブ*/
{
padding:5px 0px 3px 3px;/*上 右 下 左のスペース*/
border-bottom:1px dotted #cccccc;/*下線のスタイル*/
line-height:1.5;/*行間*/
font-size:1.0em; /*文字サイズ*/
letter-spacing: 0px;/*文字幅*/
}
以上がCSSで設定しておく方法です。
その都度、部分的に設定したい場合その時にはどうしたらよいのでしょうか？
［具体例］
タグを使って次のように設定します。
<p style="line-height: 1.5; letter-spacing: 10px;">ここの文字の行間と文字幅を<br/>
タグで設定します。</p>
今回は、以上です。
最後まで読んでいただき、
ありがとうございました。
少しでもお役に立ちましたら、
応援お願いします!!
