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

こんなふうにちょこちょことデザインをいじっていると、だんだんと欲がでてくるもので、もうちょっと全体的に明るい見栄えにしたいなあと思うようになってきました。

といっても、理由は単に私のパソコンの液晶バックライトが弱くなってきていて、どうしても画面が暗くみえてしまうんですよね。基本的にはさっさとバックライト交換をしろよってハナシなんですけれどもwww

えー、本末転倒は承知の上で background の画像をいじってみようかと思います。coffeetime.css を見た限り、変更が必要そうな画像は、

  • hatena-body-bg.gif => 基本的な background 画像
  • h1-bg.gif => タイトルバックの画像
  • day-inside-bg.gif => blockquote 内 background
  • hatena-module-middle.gif => hatena-module の middle
  • hatena-module-top.gif => hatena-module の top
  • hatena-module-bottom.gif => hatena-module の bottom
  • hatena-module-barcode.gif => ?


hatena-module-barcode って何？と思って Google 先生に訊いてみると 携帯電話向け QR コードを表示するモジュール なんだそうです。今のところは関係なさそうですが、どうせやるならいっぺんに終わらせた方がいいので、これも変更してしまいましょう。

作業の流れとしては、

  1. 上記の GIF 画像をローカルに保存
  2. Photoshop の色調補正で 20 くらい明るさを UP して保存
  3. HatenaFotolife にアップロード
  4. スタイルシートフォームでそれぞれの url の値をアップロードした画像の URL に変更
  5. その他、適宜調整


といったところでしょうか。それでは、作業開始！


単純作業：#### 20%（ふんふーん < 鼻歌まじり）
単純作業：####### 35%（ふんふんふーん < まだ鼻歌まじり）
単純作業：############ 60%（無言）
単純作業：################ 80%（ね、眠い････）
単純作業：#################### 100% Done！


で････できました（ぐったり）。

div.hatena-body { background: url(http://img.f.hatena.ne.jp/images/fotolife/n/n40y4/20100218/20100218225205.gif); }
h1 { background: url(http://img.f.hatena.ne.jp/images/fotolife/n/n40y4/20100218/20100218225204.gif) left top no-repeat; }
div.section blockquote, div.section pre, div.hatena-asin-detail { background: url(http://img.f.hatena.ne.jp/images/fotolife/n/n40y4/20100218/20100218225203.gif); }
div.hatena-module { background: url(http://img.f.hatena.ne.jp/images/fotolife/n/n40y4/20100218/20100218225208.gif) repeat-y; }
div.hatena-moduletitle { background: url(http://img.f.hatena.ne.jp/images/fotolife/n/n40y4/20100218/20100218225202.gif) no-repeat; }
div.hatena-modulebody { background: url(http://img.f.hatena.ne.jp/images/fotolife/n/n40y4/20100218/20100218225207.gif) no-repeat bottom; }
div.hatena-module-barcode, *:first-child+html div.hatena-module-barcode, *html div.hatena-module-barcode { background: url(http://img.f.hatena.ne.jp/images/fotolife/n/n40y4/20100218/20100218225206.gif) no-repeat; }


おお、けっこう明るくなりましたね。あ、タイトルバックの画像を明るくしたせいで、ヘッダ部分と色がずれちゃいました。後で直さなきゃ。