ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > カスタマイズをしよう! > title - 文字の行間を広げたい!

文字の行間を広げたい!

文字の間隔が狭すぎて、見にくいからなんとかしたいなぁーと思っている人がいると思うので、広げ方を紹介したいと思います。

まず狭いのが2種類あると思います。 それは行間(縦の幅)が狭いのと、文字の間(横の幅)が狭い2種類です。今回は「本文記事の行間(縦の幅)を変える事」を例にして説明していきます。

行間の広げ方(感覚編)

テンプレートの設定から「スタイルシートの編集」を開いて下さい。
スタイルシートに説明が書いてあって説明を見れば、大体どこが本文に当たるのかがわかる人は、該当箇所からline-heightを探してください。
見つかりにくければ、Ctrl+Fなどの検索で探してみてください。

見つかったら、例えばline-height: 150%;だったらline-height: 180%;などの様に数字を変えて見て下さい。
数字を大きくすればするほど、行間も広くなります。
他にもline-height: 1.5em;のような単位などもあります。

行間の広げ方(理論編)

もし説明書きがなくて全然どこを変えればわからない人は、まずHTMLの編集を見て下さい。変数一覧を見ると、本文記事は
<%topentry_body>で囲まれている事がわかります。

そこでHTMLの<%topentry_body>を探してみてください。
僕の場合は・・・
<div class="entry_body">
<%topentry_body>
となっており、<div class="entry_body">が<%topentry_body>を囲っているのがわかります。

そこで今度はスタイルシートを見てみます。entry_bodyで検索してみると・・・
/* line-height */
div.entry_body,
dl.section dd { line-height: 1.5em; }

line-heightentry_bodyという名前で指定してある所を見つけました。この1.5em;を変えれば本文記事の文字行間は変わります。
でもここで注意です。本文記事の他にもentry_bodyで指定してある所がHTMLにあったらそこも一緒に変わってしまうので注意しましょう!

名前が2つあった場合

では、もう1つ公式テンプレのmame-peopleを例にしてみてみたいと思います。

HTMLの<%topentry_body>を探してみると・・・
<div class="mainEntryBase">
<div class="mainEntryBody">
<%topentry_body>

という様に2つも囲われている物がありました。

どっちの名前を見ていいのかわからないので両方ともの名前をスタイルシートで探してみましょう。
.mainEntryBase
{
color: #6e6e6e;
font-size: 12px;
line-height: 150%;
margin: 10px 0 0;
padding: 0;
width: 538px }

.mainEntryBody
{
margin: 0;
padding: 0 }
と言う事で、mainEntryBaseの方にline-heightがありました。この150%;を変えれば、行間が広がります。
名前をつけて指定してある事がわかれば、そこまで苦にならずに探せるのではないでしょうか?

次は文字の間(横の幅)の広げ方を紹介します。
<文字の間隔を広げたい!へつづく>
関連ページ)
画像と文字の間隔をあけたい!
・文字の行間を広げたい!
文字の間の広げたい!


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
初めまして
初めて質問します。

今、使用しているテンプレートの行間の幅が広すぎるので、
変更しようと思い、こちらに書いてあるやり方を試したのですが
私のやり方が間違っているのか、数字を変えてもなんの変化もなく困っています。

どうすれば、よいでしょうか?
申しわけありませんが、教えてください!


ぴかママさんへ
初めまして。スタイルシートの編集にある下記の部分の

.mainEntryBody {
padding: 10px 15px;
font-size: 10pt;
line-height: 150%;
color: #4c6b73;
}

150%を80%などの様に数字を小さくすれば行間も縮まりますよ。
ありがとうございました!!
るんばばさんの言う通りにしたら、簡単に出来てしまいました!!
私はいったいどこを見ていたのか‥ど素人ですみません!
くだらない質問で、大変お手数をおかけしました。
丁寧に答えて頂き、ほんとうに、ありがとうございました!!
ぴかママさんへ
無事にできて何よりです!!ヾ(=^▽^=)ノ
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/134-ecee6a7c   

Template Designed by DW99