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

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

文字の間隔を広げたい!

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

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

文字の間の広げ方

ここでも「本文記事の文字間隔を広げる事」を前提に説明していきます。
上の行間で説明したHTMLで<%topentry_body>を囲っている物を探します。

僕の場合なら・・・

<div class="entry_body">
<%topentry_body>

なのでentry_bodyです。

わかったらスタイルシートをentry_bodyで検索してみます。
文字と文字の間を広げるタグはletter-spacingなのですが、どの.entry_body{ ~~~ }を探してもありませんでした。

こうなると最初から指定してある物の数字を変える事ができないので、自分で新しく記入するしかありません。

元からある物を使う方法

指定する方法は2種類あります。まず1つ目は元からある他の.entry_body{ ~~~ }の中にletter-spacing: 数字px;と記入する方法です。
div.entry_body{
font-size: 85%;
line-height: 1.5em;
}
この様に.entry_bodyで指定してある{~~~}の中に付け足して記入する方法です。

div.entry_body{
font-size: 85%;
line-height: 1.5em;
letter-spacing: 3px;
}
この様に付け足します。数字が大きければ大きいほど文字間隔が広がります。
これで1つ目の方法は完成です。

新しく自分で作る方法

2つ目はまったく新しくスタイルシートに作ってしまう方法です。
ここでスタイルシートをじっくり観察してみるとこのブログの場合はほとんどがdiv.名前{ ~~~ }となっているのがわかりました。
前回、説明した公式テンプレのmame-peopleの場合はdivはなくて.名前{~~~}だけでした。

ここで大事なのが.です。これによって名前で指定した物に実際反映させるという事を決めます。

なのでそれがわかったら、スタイルシートの一番下に(どこでもいいけど一番下だと自分で追加した物が後から確認する時にわかりやすい)
.指定してある名前 { letter-spacing : 3px;}を入力します。

僕の場合なら・・・
.entry_body{ letter-spacing : 3px;}
になります。
数字が大きければ大きいほど文字間隔が広がります。

「.」は小さくて、見逃しがちなので注意しましょう。「.」がないだけで反映しないのでとても重要なんです。
「.」の他にも「#」の人もいると思います。その人は忘れずに「#」をつけましょう。

ちなみにスタイルシートで「.」の場合はHTMLで「class」という属性で名前を指定して、スタイルシートで「#」の場合はHTMLで「id」という属性で名前を指定します。
他に文字の大きさを変えたいでふれたh1などの、そのままの要素で指定して名前をつけないものもあります。

これを覚えたらHTMLを見て属性が「class」なら、いちいち上の様にスタイルシートで検索しなくても「.」で指定してあげればいいから楽ですよ。

次回は文字の色とリンクの色の変え方を紹介します。
<文字の色を変えたい!へつづく>

関連ページ)
画像と文字の間隔をあけたい!
文字の行間を広げたい!
・文字の間の広げたい!


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

http://rgrg.blog61.fc2.com/tb.php/135-83d160a8   

Template Designed by DW99