教えてはてなダイアリーという活動が始まったようです。早速質問( id:kanryo:20040220#p4 )を見つけました。知っている範囲で書きます。
1. まず簡単な色を変えてみましょう
配色はスタイルシートで変更できます。以下のようなスタイルシートを使うことで文字の配色が変わります。
body{
color : #ff0000;
}
上のコードを設定画面から「スタイルシート」入力欄の一番下に追加すれば、ほぼ画面全体の文字の色が変わります。
- colorは文字の色を変えます。
- #xxyyzz は色を指定します。xx:赤 yy:緑 zz:青。x,y,zに許される文字は数字とabcdef。例: #f100c7
色の指定方法は以下のサイトを参考にしてください。間違った指定をすると、自分のところは正しく見えてもブラウザによっては正しく表示されません*1。
2. 文字以外の色も変えてみましょう
もっといろいろな要素を変えることも出来ます。
body{
color : #ff0000;
background-color:#cccccc;
border-color : red;
}
- background-colorは背景の色を変えます。
- border-color : は周囲の枠線の色を変えます。
- redのような色の名前が許されていることもあります。
3. 日記の一部の色を変えてみましょう
上のコードの"body"のところを変えれば、日記の一部の配色を変えることが出来ます。この"body"の部分をセレクタと呼びます。- div.day div.body
- 毎日の日記の本文
- div.day div.comment
- 毎日の日記のコメント
- div.day h2
- 毎日の日記のタイトル部分（日付など）
下の例は日記の本文の部分だけを変えます。
div.day div.body{
color : #ff0000;
background-color:#cccccc;
border-color : red;
}
4. サイドバーを使っている場合
サイドバーの作り方は人それぞれだと思いますのでこれだという方法はありません。が、私の場合は以下のようにセレクタを変更するとサイドバーと本文とで色を分けることが出来ます。- div.main div.day div.body
- 日記本体のみの色を変える
- div.sidebar div.day div.body
- サイドバーの枠内の色を変える
5. そのむこう
スタイルシートは奥が深いのですべてを説明することはできません。しかし、セレクタの組み立て方をある程度覚えればはてなダイアリーの配色は制御できるはずです。まず、セレクタの構造です。x.y となっているときは、yというクラスを持っているxというタグです。たとえばdiv.dayは <div class="day">というタグを選び取って、そこに波括弧内の規則を当てはめます。どの部分にどういうタグやクラスが使われているかは、ブラウザでページのソースを表示させれば知ることが出来ます。なお、省略も許されています。
- div と書くとすべてのdivタグが対象
- .day と書くとdayクラスを持つすべてのタグが対象
セレクタが入れ子になっている場合はどうでしょう。たとえば田中さんというと社内には20人くらいいても、営業部の海外営業課の田中さんといえばどの田中さんかを厳密に指定できます。スタイルシートでは、このような場合セレクタを空白で区切って並べます
- div.day div.body は<div class="day">の中に現れる<div class="body">
- div.day div.body pre は<div class="day">の中に現れる<div class="body">の中に現れる<pre>
です。
ちょっとしたヒント
背景の色をページ内で変えまくると自分の首を絞めてしまいます。これは普通の人はリンクやタイトル、罫線で色をほぼ使い切ってしまうためです。あまり考えずに背景色をいろいろにすると、必ずどこかで読めない色の文字が出てきます。いちばん多いのはリンクが見えなくなるケースでしょう。これを避けるには
- 背景色は同系色で同じ程度の明るさの範囲で使いわける（落ち着いた感じになる）。
- 背景色を大胆に使い分けたいときには、その部分の文字の色、リンクの色をまとめて配色しなおす。この場合はスタイルシートの記述量が増えることになる。
*1:本当は自分のブラウザが間違って表示している
