読者です 読者をやめる 読者になる 読者になる

彼女からは、おいちゃんと呼ばれています

ウェブ技術や日々考えたことなどを綴っていきます

はてなダイアリーの公開デザイン「はてブ2」のスタイルシートを編集してみた

このブログについて,

何というテーマを使っているの?

とたまに訊かれるのですが,id:toguo さんの公開デザインはてブ2」を使わせていただいています。

ご覧のとおり,はてなブックマーク日記で使われているデザインをコピーしたもので,はてなユーザーとして親近感を覚えることと,main 部分の横幅が広いことが気に入って選びました。

ちなみに,main 部分の横幅が広いのがなぜ良いかというと,スーパーpre記法ソースコードを書いたときに,横スクロールしなくても全部表示されるのです。

1行あたりの文字数はどのくらいが最適か?

ところが最近気になりはじめたのは,“1行あたりの文字数はどのくらいが最適か?”ということです。

横書きの日本語文章を読む場合、目で内容を追いやすい文字数は1行あたり20〜35文字の間です。これ以上だと、ちょっと読む気が失せてしまいます。逆に少なすぎても、上下への視線移動が増えすぎてしんどいです。
(中略)
1行あたりの文字数を減らすためにはどうすればよいでしょうか?
1つは、文字サイズを大きくするという手が考えられます。
(中略)
もう1つは、余白を取って、文章の横幅を減らすことです。

上記の記事や,

など,他のサイトもいろいろと参考にしてみると,どうも自分のブログは,横幅が間延びしていて見づらいような気がする。

ソースコードの見やすさも踏まえつついろいろと検討した結果,main 部分を少し狭めてみることにしました。

はてなダイアリースタイルシート編集

はてなダイアリースタイルシート編集については,次のサイトがわかりやすく書いてくれています。HTML や CSS基本的な知識がある人もひととおりは目を通しておいたほうがいいでしょう。

ただ,上記サイト中の「全体の幅を固定して中央に配置する」の見本では,width プロパティを使用していますが,今回は main 部分の横幅編集には,width ではなく,max-width を使用しました(たぶん,ここがミソ。)*1

div.main {
  max-width: 700px; /* 追加 */
  /* margin-left: 0; 削除 */
  margin-right: 260px; /* 追加 */
  margin-left: 30px; /* 追加 */
}

また,main 部分の編集に伴って,以下の部分も編集しました。

div#simple-header {
  max-width: 990px; /* 追加 */
  margin: 0 auto; /* 追加 */
}

h1 {
  max-width: 870px; /* 追加 */
  /* margin: 0 0 10px 0; 削除 */
  margin: 0 auto; /* 追加 */
}

div.hatena-body {
  max-width: 990px; /* 追加 */
  margin: 0 auto; /* 追加 */
}

div#hatena-archive {
  max-width: 990px; /* 追加 */
  /* margin:0 30px 40px 30px; 削除 */
  margin: 0 auto; /* 追加 */
}

Before & After

編集後,こんな感じで,若干見やすくなったと思うのですが,どうでしょうか?

(編集前)

(編集後)


おまけ - その他の編集箇所

もう少しいうと,次の箇所も若干の手を加えました。ここからはもう,本当に好みの問題になってしまうのですが。(^ ^;

ブログのタイトルの文字を少し大きく。

h1 {
  font-size: 24px; /* 追加 */
}

エントリーのタイトルと本文との間隔を少し広げる。

div.main div.day div.body div.section p.sectionheader {
  /* margin-bottom: 1em; 削除 */
  margin-bottom: 3em; /* 追加 */
}

段落の前後のすき間をなくす。

div.main div.day p {
  /* margin-bottom: 0.7em; 削除 */
}

あ,あと,HTML や CSS の要素を調べるときには,Firefox アドオンの Firebug は必須ですね。

ではでは。

*1:ただし,max-width プロパティは,IE6 には対応していません。スタイルシート[CSS]/プロパティ一覧/max-width プロパティ - TAG index Webサイト