はてなダイアリーの行間の調整(CSS)

この記事は、CSSを使ってはてなダイアリーのレイアウトの調整をする人にのみ意味があると思われるので、他の人はあまり読む価値がないかも。
というか、HTMLのことを知らない人は読んでもチンプンカンプンかもしれない。
他のブログサービスを使っている人でも、CSS（Cascading Style Sheets、スタイルシート）のことで参考になる部分も、もしかしたらあるかもしれないが。
ブログを書くような人は、CSSのことは知っていて絶対損はないから、勉強してみるのも良いかもしれない。

最近自サイトのWeb制作をやっていて、HTMLとCSSでWebページの細かい調整をしている。
そうすると、自分のブログのレイアウトも気になり始めた。
以前から気に入らなかったのは、行間のスペースが広すぎること。
たぶん読んでいる人も、間が空きすぎていると感じたことだろう。

タグがくせ者

蛇足だけど、私が1996年頃にHTMLの勉強を始めた頃にはCSSなんていうのはまだなくて、導入するのがかなり遅かった。
最初は戸惑ったけれど、CSSを使うと、Webページがたくさんあるほどメンテが楽になって助かるものだ。

はてなダイアリーでは、日記を書いていて改行を入れると、HTMLのタグが自動的に入る。
このタグがくせもので、行間が広くなりすぎるのだ。
タグを無効にするワザもあるのだが、そうすると今度は、改行のたびに タグを自分で打ち込まなければならず、私のようなものぐさには耐えられないことだ。

行間を狭くする

というわけで、ネットで調べてみると、参考になるブログ記事があった。

http://d.hatena.ne.jp/hate123/20090730/1248957612

これを参考に、CSSのmarginとpaddingプロパティを調整することにした。
marginというのは、コンテンツボックスの周辺の余白（マージン）の値を指定するもの。
paddingの方は、コンテンツボックスの枠の内側の余白を指定する。
コンテンツボックスとは、文字などを入力するための文字通りの箱みたいな領域だと思えば良い。
上記の記事ではmarginとpaddingの値をすべて0にしていて、これだと自分的に狭くなりすぎる。
それで、自分に最適な値を試行錯誤して見つけることに。
何度も何度もタグの値を変更してはプレビューを繰り返して、次のような指定をしたところ、やっと最適化できた。



div.section p {

    margin-top: 2px;

    margin-bottom: 4px;

    padding-top: 2px;

    padding-bottom: 2px;

    line-height: 150%;

}

上記を、メニュー「管理 > デザイン」画面の「スタイルシート」の入力枠に挿入すれば良い。
もっとも、これは読む人の好みやブログを書く人の文章スタイルによっても条件が異なるので、誰にとっても最適なものとは限らないだろう。
私の場合、ほとんど1センテンス毎に改行を入れる癖がある。
そして、1センテンスが非常に短い。
というか、いままでネット上の文章作法というものを試行錯誤して、たどり着いたスタイルなのだ。
このような文章スタイルの場合、段落間が空きすぎているとページ全体が間延びして見えるのだ。
ネット上での文章スタイルについては、いずれ別の記事でまとめて書くことにしたい。

ちなみに、このブログのCSSは、はてなが用意したCSSを、かなりいじってアレンジしている。
このスタイルシートを修正する時には、慎重になる。
プログラムのソースコードと同じで、1文字でも間違いがあると、レイアウトがグチャグチャになってしまう恐れがあるので。
必ずプレビューして確認してから、保存するようにしている。

この記事で「タグ」とか書いているけれど、普通にタグを打ったのでは、表示されない。
"<"のキャラクタをエスケープする（無効にする）必要がある。
そのためには、「<」と記述する必要がある。

HTMLとCSSのリファレンス本

私が愛用しているHTMLのリファレンスブックは、こちらです。
平成15年に出た第4版で、まだなんとか使えてます。
もちろんCSSのことも書かれている。
このシリーズは、VBAやVBScriptなども持っているけれど、コンパクトで値段もそんなに高くないので愛用しています。
Amazonで見ると最新の改訂第6版が2009年に出ている。
累計30万部を突破しているというから、シリーズ全体でだろうけど、この手の本にしてはすごいな。
たぶん私がもっている版よりもスタイルシートのことが詳しくなっているのではないかと推測する。
そろそろ私も買い替え時かな。
『改訂第5版オールカラー HTML ポケットリファレンス』