初心者でもできる簡単FC2ブログの作り方

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

僕の場合なら・・・

---

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

---

なのでentry_bodyです。

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

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


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

この様に付け足します。数字が大きければ大きいほど文字間隔が広がります。
これで1つ目の方法は完成です。


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

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

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

僕の場合なら・・・
になります。
数字が大きければ大きいほど文字間隔が広がります。

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

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

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

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

---

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

◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。