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

さて、次に気になるところは、

1. タイトルを右に寄せたい
2. 年月日の文字をもうちょっと大きくしたい
3. リストをインデントしたい

の３項目です。また source と coffeetime.css を追っていきます。

1. についてはこないだ読んだ

ノンデザイナーズ・デザインブック [フルカラー新装増補版]

に『センタリング禁止！』と書いてあったので、それを実践しようかと。セレクタ h1 の text-align プロパティの値を right と上書きします。

2. については、まあとにかく小さい文字がツラいので。あと、数字は Georgia フォントが好みなので、ついでに変えちゃいます。それから下線も出て欲しくない。セレクタ h2 span.date の font-family プロパティの値を Georgia 、font-size を 90% 。セレクタ h2 a の text-decoration を none にします。

3. については･･･ちょっと行頭を下げたいってのは自然な感覚じゃないでしょうか？これはセレクタ ul li と ol li の margin-left プロパティの値を 2em に。

では、以上をスタイルシートフォームに追記します。

h1{ width:0; max-width:0; width: 800px; max-width: 800px; text-align:right; }
h2{ padding-bottom:3px; }
h2 a{ text-decoration:none; }
h2 span.date{ font-family:Georgia; font-size:90%; }
ul li{ margin-left:2em; }
ol li{ margin-left:2em; }

できました。

あ、p タグの行頭のインデントもしたいかも。あとでやろう。