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

このブログについて，

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

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

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

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

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

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

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

上記の記事や，

-Web文章を読みやすくするために心掛けなければいけないあれこれ:caraldo.net | MT Blog

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

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

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

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

-はてなダイアリーのヘルプ - スタイルシートを編集する -はてなダイアリーガイド「CSSセレクタ」 -はてなダイアリーTipsスタイルシートでデザイン編

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