変えたいポイントを挙げてみる
デザインいじりの下準備が終わったので、次に「どのようにいじりたいのか？」を決めます。ゴールが決まってないと、どうしたらいいのかもわかりませんからね。
で、昨日の間違い探しの答えあわせ、というわけでもありませんが、ぼくが変更したいと思った点は、以下のとおりでした（思いついた順番に挙げてみます）。
- 字と字の間隔をもう少しあけたい。（ａ）
- 段落の先頭に１文字分スペースを入れたい。（ｂ）
- サイドバーを左でなく右に置きたい。（ｃ）
- サイトのタイトルをもう少し中央側に寄せたい。（ｄ）
以上が、実際にやってみた変更点です。
思ったけど結局やらなかったこともついでに挙げときましょう。のちのち気が変わることもあるかもしれませんから。
- 本文の文字のサイズをやや大きくする。
- タイトルの書体を変える。
- 各エントリを枠で囲う。
スタイルシートをいじってみる
それでは実行開始です。
表示されたページのソースを見て、変更したい部分が含まれている<div>タグを探します。（ａ）の変更は、見出しを含めた文章全体に適用したい。そのようなタグを探すと、すぐに見つかりました。<div class="section">です。見出しの上にちょこんとあって、エントリ全体を大きく囲っています。
次に、前回用意したテーマのスタイルシートを見ます。<div>タグの設定は「div.クラス名」というところに書かれているようです。これをマネして、（ａ）では設定の頭にdiv.sectionと書いておきます。
そして、スタイルを変更するための“コマンド”を調べます。……（ａ）のような設定の場合に使うものを、ぼくはたまたま元から知ってましたが、知らない場合もあるので、一般的な探し方について。
Googleなどの検索エンジンで「css したいこと」と書いて検索します。「該当するページが見つかりませんでした」と言われたら、この“したいこと”の文言を少しだけ切りつめます。（ａ）の場合なら、「字と字の間隔をあける」としたら見つからなかったので、次に「字と字の間隔」で引いてみます。少しヒットしましたが、あまり関係なさそうなので、さらに検索語を「字の間隔」に縮めてみます。いくつかそれらしいページがヒットしました。実は、「字間」で探すとよかったのですが、そんなこと事前に知ってるとは限りませんからね（＾＾；
こうしてようやく、「letter-spacing: 字の間隔;」と指定すればよいことがわかりました。デフォルトではこれが「0」なので、少しだけあけてみます。ぼくは「0.1em」と指定してプレビューし、なかなかよさそうだったのでそのまま登録しました。ちなみに、「1em」というサイズの単位は「文字一文字分」を指します。今回は字の間隔を「0.1文字分」だけあけてみたということになります。
結局、（ａ）の設定は次のように書きました。
div.section {
letter-spacing: 0.1em;
}
というところで、また次回につづきます。
