はてなダイアリーのCSSをいじってみる

コンピュータ

まずは、デフォルトのCSSを取得。ここの場合hatena_waterを使っているので、
http://d.hatena.ne.jp/theme/hatena_water/hatena_water.css
をブラウザで表示してみる。

それと、
CSSリファレンス
はてなダイアリーガイド「CSSではてなダイアリーの見栄えを変えとは - はてなキーワード
この辺を参考にして、詳細設定のスタイルシートにいろいろ追加してみる。


1.全体の背景画像を固定する

body {
background-attachment: fixed
}

2.日記本文の背景を設定する

div.body {
background-image: url(http://f.hatena.ne.jp/images/fotolife/a/abyssal-fish/20051024/20051024054755.gif);
}

背景に魚が表示された。


3.日記本文の背景を透明にしようとしたが、透明にならなかった。

div.body{
background-color:transparent;
}


4.これも変化なし。

div.body{
background-color:inherit;
}


5.これで日記本文の背景が透明になった。div.bodyを透明にしても、その下にdiv.dayがあるんだな。ただ、タイトルと見出し先頭の記号が元のままで見栄えが悪い。

div.day{
background-color:transparent;
}
div.body{
background-color:transparent;
}


6.タイトルはこれで透明になった。

h2 {
background:transparent;
}
div.day{
background-color:transparent;
}


7.サイドバーのモジュールに背景を入れる。

div.hatena-modulebody {
background-image: url(http://f.hatena.ne.jp/images/fotolife/a/abyssal-fish/20051024/20051024054755.gif);
}

ただし、これだけだと題名とリストの先頭の"・"が元のままで見栄えが悪い。


8.「ページのフッタ」に定義されているサイドバーでは、"hatena-modulebody"が使われている。自分で"hatena-modulebody2"を定義し、サイドバーのモジュールを"hatena-modulebody2"に置き換えてみる。

hatena_water.cssでは、hatena-modulebodyに関する定義が4つあるので、それと同じ定義をしてみる。
下の4つの定義を「スタイルシート」追加するとすると、hatena-moduleと同じ効果のhatena-module2ができる。hatena_water.cssから変更したのは画像に関してのみ。hatena_water.cssでは、画像のところにファイル名しか書いていないが、自分で定義した場合は絶対URLを入れる。

.hatena-modulebody2 {
padding:5px;
font-size:90%;
background:bottom center url(http://d.hatena.ne.jp/theme/hatena_water/modulebody.gif);

}
.hatena-modulebody2 ul {
padding:0px;
margin:0px;
list-style-type:none;
}

.hatena-modulebody2 ul li {
padding:5px 5px 5px 25px;
margin:0px;
border-bottom:1px dotted #CCCCCC;
background:url(http://d.hatena.ne.jp/theme/hatena_water/li.jpg) no-repeat;
}

.hatena-modulebody2 ul li a {
text-decoration:underline;
}

とりあえず今日の実験はここまで。