新デザイン（グリーン）の変更ポイント

今回のデザインで使った（変更した）主なCSSタグを覚え書きも兼ねてアップしておく。

■背景
「NOION」さんで頂いた画像 （1024px×400px）を「画面下中央に固定」で設定。

body {
background-color: #ffffff;
background-image: url(画像のアドレス);
background-position: center bottom;
background-repeat: no-repeat;
background-attachment: fixed;
}

■タイトルバナー
背景画像に使った画像から815px×150pxの大きさを切り抜いて別名で保存。（PhotoShopLE使用）
そこにタイトル文字とサブタイトルを載せて上書き。（HPビルダー付属ウエブアートデザイナー使用）
これをココログ管理画面の「デザイン」→「スタイル」→「タイトルバナー」のオプション設定でアップロード。
「タイトルバナーに画像を使用する」にチェックを入れておく。
このままだと画像の上下と左に余白が出来てしまうため、CSSファイルを変更してその部分を削除。
（この余白の意味は何？）
a#banner-img部分を抜き出して、変更用のCSSファイルにコピー＆ペーストした後

a#banner-img {
display: block;
background: #FFFFFF url(タイトルバナーのアドレス) no-repeat 0px 0px;
padding: 15px;
height: 150px;
 }

変更前は赤字の部分が15px15pxになっているのでこの数値を「0」に変更して保存。

※自ブログのCSSファイルの取り出しは「るるが株式会社」 さんのこの記事を参考にさせて頂きました。
　 普通に「ソース」を表示して出てくるのとは違うファイルなのね^^;
　 この中から該当箇所を見つけるのがまた大変…。
　

■サイドバーのタイトル画像
画像をアップロードして、.sideber h2の部分に反映させる。

.sidebar h2 {background-image: url(画像のアドレス);
background-repeat: no-repeat;height: 28px;padding-left: 23px;}

赤字の部分は実際の画像の大きさに合わせて。
今回のピンは実際には28px×20pxだったが、20pxだと文字との間隔がキツキツになってしまったので23pxに設定。

■カレンダーのタイトル画像
前回サイドバーのタイトルに画像を入れた時、カレンダーだけは反映されないので「む～(T"T)」と思っていたのを今回は何とか対応。
CSSファイルの#calendar captionに対応しているらしいのでこの部分を抜き出して、

#calendar caption {
 color: #336600;
 font-family: 'Trebuchet MS', Verdana, sans-serif;
 font-size: medium;
 border-bottom: 1px solid #849284;
 text-align: left;
 padding: 3px;
 letter-spacing: .3em;
 background-image: url(画像のアドレス);
background-repeat: no-repeat;
height: 28px;padding-left:23px}

と、サイドバーのタイトル画像の設定と同じ一文を追加したら無事成功。

■引用部分

blockquote {
background-color:#ffffff;
border:1px solid #5a755a;
padding: 5px; }

赤字の部分を変更すると好きなように引用符を設定できる。

■記事タイトルの背景
画像を使ったり、グラデーションにしてみたりといろいろ試してみたけど、結局付箋紙風味のボーダーに落ち着いた。

.content h3{padding: 5px;
background-color: #ffffff;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 15px solid #adb27b;
width: 300px;position: relative;left: -20px;}

右と下にグレーの細い直線、左に濃い色の太い直線を持ってくることで付箋紙を貼ってあるみたいに見せちゃうところが面白い。
更に、positionをマイナスにすることで記事本文よりもちょっと手前から表示されているのがポイント。

以上が、今回手を加えた部分。
もし使える部分がありましたら、ご自由にどうぞ。
但し、私は自力でCSSを記述することは全く出来ないので、 上記の変更部分は全てどこかよそのブログ様やカスタマイズ用書籍からの頂き物です。
かつ、自分で勝手に改変しているので、正式な記述として正しいかどうかも不明…^^;
自分で使った分には思った通りに表示されているようなので大きなミスはないと思いますが、 ご自分のブログへの適用については自己責任でお願いいたします。

---

最後にいつもお世話になっているブログ、本のご紹介。

ブログについてはあまりにも色んなところを回ってちょこちょこ使わせて頂いているので、全てを覚えているわけではないので （申し訳ありません（汗））記憶やブックマークにある分のみで。

★「詞織」さん
★「埼玉住人」 さん
★「ケセラセラ」 さん
★「KOROPPYの本棚」 さん
★「るるが株式会社」 さん

などなど。
いつもありがとうございます。

本は「ポータル、プロバイダ別 blogデザインカスタマイズ辞典」（毎日コミュニケーションズ）が大活躍中。
「ココログ」だけでなく、「Movavle Type」「はてな」「Livedoorブログ」「エキサイトブログ」「JUGEM」 「Doblog」「2ちゃんブログ」 の計8つのブログに対応してそれぞれの変更方法が書いてあるので1,000ページを超える電話帳のような厚さで値段も2,980円（税別）と安くはないけど、 やりたいことを探してそこをそのまま書き写すだけで反映されるので簡単！
「ウェブログ・デザイン」（エムディエヌコーポレーション刊。「ココログ」「Movavle Type」「Blogger」の3つに対応） がココログのプランの区別をきっちり守った「純正品」なのに対して、「ポータル、プロバイダ別～」は裏技満載の「海賊版」 （と言う言い方はあんまりか…^^;）と言う感じだけど、私のようなCSSの知識はないし「プロ」 プランじゃないけど自分のオリジナルなデザインにしたいなあと思っている人には最適かと。

ポータル、プロバイダ別 blogデザインカスタマイズ事典 外間 かおり by G-Tools

ウェブログ・デザイン こもり まさあき by G-Tools

※「ポータル、プロバイダ別blogデザインカスタマイズ事典」の内容はこちらのページで確認出来ます。