はてなダイアリーのデザイン変更 - 1

久しぶりにブログというか日記を書くにあたって、せっかくなので気分一新。テーマデザインを変えてみました。

使ったテーマは『Coffeetime』。なかなかシックなデザインですね。

私はノートパソコン使い (Thinkpad X31 …長い付き合いだなあ) なので、ブラウザを最大化して使っています。となると、いささか body の幅が広い気がするのでもうちょっと狭くしたいんですよね。

source と coffeetime.css を追っていくと、セレクタ

  • div.hatena-body
  • div#*1simple-header
  • div.adminmenu
  • h1

の width と max-width プロパティを狭めてやれば良さそうです。ということで、ブログ管理 > デザイン > 詳細デザイン設定スタイルシートフォームに

div.hatena-body{ width:0; max-width:0; width:800px; max-width: 800px; }
div#simple-header{ width:0; max-width:0; width:800px; max-width: 800px; }
div.adminmenu{ width:0; max-width:0; width:800px; max-width: 800px; }
h1{ width:0; max-width:0; width:800px; max-width: 800px; }

と書きました。もともとは width:90% だったのを 800px に、max-width:910px だったのを 800px にしてます。いちいち初期化してるのは性格なので気にしないでくださいwww

で、『この内容に変更する』ボタンを押すと、

お、ちょっと締まった感じになりましたね。記事の文字数も 30 文字前後におさまったので、とりあえずはこれで OK です。

*1:# は id 属性セレクタ