はてなダイヤリーのCSS（スタイルシート）改変作業。

タイトルの部分以外、ブログのデザインをいじってみました。

chepookaさん作の「chameleon」のデザインを基に、
なんとか納得できる所まで持っていく事ができました・・・

以下、やった事メモ

- - - - -

①デザインを探す

　デザイン→デザイン管理→公開デザイン一覧で
　ユーザー作成のブログデザインを探しました。
　（こくさんのコメント情報が無かったら
　すぐには気付かなかったと思います。
　情報提供ありがとうございました。）

②「すぐに使えるブログカスタマイズブック」を読んで、
　CSS（スタイルシート）を改変する

　偶然にも以前購入してた本です。
　確か購入当初はあんまり読まないうちに
　カスタマイズを諦めた覚えがあります。

　この本には、7種類分のブログサービスの
　カスタマイズ方法が掲載されていました。
　解説付きで分かりやすかったので
　難解なCSSの文体にかろうじで付いていけました。

　多分ググったりなんだりやってたら
　もっと時間かかってた事でしょうｗ
　（ググりもしましたが、古い情報が多い為
　　情報の真偽を確認するのが大変でした。
　　おかげでCSSの理解は深まりましたがｗ）

　☆以下、変更箇所
　　

　　テンプレートの最後に下記CSSを追加。

　　
/* 背景 */
body{ background-color: #aaddaa; }
/* ダイアリータイトル、サイドバー背景、商品詳細 */
h1,.hatena-module,.hatena-asin-detail{ background-color: #ccffcc; }
/* サイドバー部タイトル */
.hatena-moduletitle{ background-color: #aaddaa; }
/* アンカー */
span.sanchor{color:#999999;}
h4,.section h3.title,
.section p.sectionheader{border-color:#ff8800;}

H1{background-color:aaddaa;font-size:20pt;text-align:center}
div.body{background-color:f0f0f0;font-size:12pt;line-height:0.5}
div.comment{background-color:fafafa;}

　　
　　上半分は、テンプレート作成者が
　　色を変更できるように準備してくれたCSS。
　　上の行から順に、それぞれ

　　・背景色
　　・タイトル・サイドバーの背景色
　　・サイドバー部タイトル背景色
　　・アンカーの色
　　　（記事タイトル左横にあるオレンジ色の棒）

　　
　　を変えられるようになっています。
　　「♯」の後に続く6桁の数字（16進数表示）を
　　いじっていけば、色の変更が可能となります。

　　そして下半分は、自分が調べて書いたCSS。
　　上の行から順に、

　　・タイトル：背景色をさらに変更、濃い緑に
　　　　　　　　フォントを20ptへ大きくする
　　　　　　　　左揃え→中央揃えに変更
　　・記事本文：背景色を灰色に変更
　　　　　　　　フォントを12ptへ大きくする
　　　　　　　　行間を0.5へ狭くする
　　・コメント欄：背景色を灰色へ変更

　　と、変更しています。
　　命令分毎に改行しなかったりと、文体が
　　正しく無いですが、別に個人で改変する分には
　　動けばよかろうなのだ〜！ですし、、
　　むしろ自分がどこをいじったのかが
　　ハッキリするので、こっちのが良いと思っています。
　　

　　配色については、淡い緑と灰色をベースにして
　　目の疲れにくい配色にしてみました。
　　（配色が某巨大掲示板に似通ってますが
　　気のせいだと思います。）
　　

　　今回の改変で唯一残念なのは、
　　タイトルの枠のサイズを縮められなかった事。

　　本当なら、縦幅をもうちょっと縮めて
　　タイトルを左詰めにしたかったのですが・・・
　　

　　枠の角を丸くする+色は背景色依存にする為に、
　　白い額縁+枠内は透過処理（透明）とした
　　「画像」で作られているようです。
　　

　　色々と画像改変を試みたのですが、
　　ペイントでは透過処理ができない事に気づき、
　　「SAIなら…SAIならきっとやってくれる！」
　　という思いで、先程SAIを購入したのですが、
　　使い方が全く分からずにもうだめぽ状態。

　　という訳で、結局あんな感じになってしまいました。
　　センスの無さが良い感じにほどばしっておりますorz
　　早い内に改善しないといけないですね。

- - - - -

ブログの移設だけで、
結局一日かかってしまいましたが・・・
まぁそこそこの出来になったので良しとします。

あ〜疲れたｗ

主に記事書くのに疲れたｗｗｗ

まぁ、もう一つのブログの方にも反映させないと
いけないので、覚書きついでに
記事書いただけですけどねｗ

ブログ読んでくれた方にも、
CSS改変の参考になるならこれ幸い。