はてなのデザインを修正
またまたはてなのデザインを変えてみました。テーマは Emboss のままで、スタイルシートに手を加え、日記の日付に曜日を入れてました。
スタイルシートを編集するには、日記のタイトルは h1、日記のサイドバーは div.sidebar だとかいう言葉がいっぱい必要なので、ここで調べました。http://d.hatena.ne.jp/keyword/%A4%CF%A4%C6%A4%CA%A5%C0%A5%A4%A5%A2%A5%EA%A1%BC%A5%AC%A5%A4%A5%C9%A1%D6CSS%A5%BB%A5%EC%A5%AF%A5%BF%A1%D7
まだまだ気に入らないところがいっぱいありますが、きりがないので、このへんにしておきます。また気分転換にやってみまーす。
【作業手順（概要）】
- デフォルトのスタイルシートをダウンロードし、どんな感じかながめる
- 追加したいところ、デフォルトの設定を打ち消したいところを修正する
【 1. デフォルトのスタイルシートをダウンロードする】
- Firefox で (InternetExplorer じゃあダメ)、ファイル→名前をつけてページを保存→ファイルの種類が "Webページ、完全" になっていることを確認して、適当な名前を入れて保存
- 適当な名前のフォルダの下に、スタイルファイルが保存されている。今回は emboss.css だった。
- このファイルを Editor で開く。漢字コードは EUC、改行コードは LFなので、メモ帳は開いてはダメ。私は NoEditor を使ったが、秀丸とかでもＯＫ
【 2. いざ修正する】
- 画面右上の管理→デザイン→詳細タブ、の下の方にあるスタイルシートの欄に記述を書く
- 実際に修正したのは次のとおり
【変更したところ】
- 両サイドにマージンを入れてみた
- 文字の色をグレーにした
- "-" "+" で itemize したときにフォントサイズがとっても小さくなってボールドになるのをやめた
- 行間を少し空けてみた
- 日付は %Y-%m-%d %a にした。%a を %W にするとフルスペルになる
現在のスタイルシートは↓こんな感じ。
div.section p {
color: #333333; 本文の文字を少しグレーに
line-height:160%; 行間をあける
}
body {
margin-left:50px; 左を空ける
margin-right:50px; 右を空ける
}
div.sidebar {
margin-right:50px; 右を空ける
background-color: #dcdcdc; サイドバーのバックグランドに色をつける
}
ul li {
font-size: 95%; itemize したときのフォントを90%に
font-weight: normal; デフォルトでボールドになるのを禁止
}
ol li {
font-size: 95%; itemize したときのフォントを 90%に
font-weight: normal; デフォルトでボールドになるのを禁止
}
div.body {
border-right: 1px solid lightgrey; body右側にラインを引く
border-bottom: 1px solid lightgrey; body下側にラインを引く
}
div.section {
border-bottom: 1px solid lightgrey; section下にラインを引く
}
