ぼくの詳細デザイン設定(2)〜変更点の拾い出しと字間

変えたいポイントを挙げてみる

デザインいじりの下準備が終わったので、次に「どのようにいじりたいのか?」を決めます。ゴールが決まってないと、どうしたらいいのかもわかりませんからね。
で、昨日の間違い探しの答えあわせ、というわけでもありませんが、ぼくが変更したいと思った点は、以下のとおりでした(思いついた順番に挙げてみます)。

  • 字と字の間隔をもう少しあけたい。(a)
  • 段落の先頭に1文字分スペースを入れたい。(b)
  • サイドバーを左でなく右に置きたい。(c)
  • サイトのタイトルをもう少し中央側に寄せたい。(d)

以上が、実際にやってみた変更点です。
思ったけど結局やらなかったこともついでに挙げときましょう。のちのち気が変わることもあるかもしれませんから。

  • 本文の文字のサイズをやや大きくする。
  • タイトルの書体を変える。
  • 各エントリを枠で囲う。

スタイルシートをいじってみる

それでは実行開始です。
表示されたページのソースを見て、変更したい部分が含まれている<div>タグを探します。(a)の変更は、見出しを含めた文章全体に適用したい。そのようなタグを探すと、すぐに見つかりました。<div class="section">です。見出しの上にちょこんとあって、エントリ全体を大きく囲っています。
次に、前回用意したテーマのスタイルシートを見ます。<div>タグの設定は「div.クラス名」というところに書かれているようです。これをマネして、(a)では設定の頭にdiv.sectionと書いておきます。
そして、スタイルを変更するための“コマンド”を調べます。……(a)のような設定の場合に使うものを、ぼくはたまたま元から知ってましたが、知らない場合もあるので、一般的な探し方について。
Googleなどの検索エンジンで「css したいこと」と書いて検索します。「該当するページが見つかりませんでした」と言われたら、この“したいこと”の文言を少しだけ切りつめます。(a)の場合なら、「字と字の間隔をあける」としたら見つからなかったので、次に「字と字の間隔」で引いてみます。少しヒットしましたが、あまり関係なさそうなので、さらに検索語を「字の間隔」に縮めてみます。いくつかそれらしいページがヒットしました。実は、「字間」で探すとよかったのですが、そんなこと事前に知ってるとは限りませんからね(^^;
こうしてようやく、「letter-spacing: 字の間隔;」と指定すればよいことがわかりました。デフォルトではこれが「0」なので、少しだけあけてみます。ぼくは「0.1em」と指定してプレビューし、なかなかよさそうだったのでそのまま登録しました。ちなみに、「1em」というサイズの単位は「文字一文字分」を指します。今回は字の間隔を「0.1文字分」だけあけてみたということになります。
結局、(a)の設定は次のように書きました。

div.section {
 letter-spacing: 0.1em;
}


というところで、また次回につづきます。