今回は上部の共通ヘッダーに手を加えるカスタマイズ方法です。
タイトル画像に自然の写真を使うと微妙にグラデーションがかかったり、色にムラができたりします。なので、ヘッダーが単一カラーだとちょっと浮いちゃうんですよね。
共通ヘッダーのカスタマイズ方法はいろんなところに書かれていると思うので、今さら需要があるかどうかはわかりませんが、今回わたしのやったことを簡単に書き残しておきます。
ただ、今回の方法はカッチリしたものではなく、ぱっと見で自然な雰囲気に見えればいいやという初心者さん向きです。よ～く見ると切り貼り部分にズレができることもあるけど、それでもOKであればお試しになってみてください。
ベースにしたのは「ブログメディア（2ch,グレイ,2カラム）」。他のデザインだと表現や記載位置が異なるかもしれません。
※あくまで自分のためのメモです。間違いがあっても責任は取れないので、トライする方は必ずバックアップを取ってからお試しください。
まずはタイトル部分の背景にする画像とその上部に続く共通ヘッダー用の画像を用意します。
わたしはタイトル背景用として1280×122の画像、共通ヘッダー用として1280×20の画像を用意しました。
今回ベースにした「ブログメディア」デザインの幅は996pxなので、元の写真をカットする際に996px幅のエリアが表示されるものと仮定して場所を決め、その左右142pxずつを「余白（実際には続きの画像が表示されることになりますが）」として用意しました。
ま、タイトルの背景の大きさなどは好きに変えられるので、このあたりは適当に。
要は、タイトル背景画像と共通ヘッダー画像が連続して見えるようにくっつければ良いわけです。
ではCSSの書き換えです。
全てデフォルトのサイズをそのまま使っていますので、とっても簡単です♪
（１）タイトル画像を変更する。
「03. Title – ブログタイトルエリア」部分の一番上、
div.blog-title-outer {
のところに以下を追記します。
background: url( タイトル画像のURLを指定) top center no-repeat;
ブログタイトルの文字の色を変えたい場合には、CSSの最初の方にある「01. Text – フォント・リンク」の下記の部分、
h1#blog-title a:link
, h1#blog-title a:active
, h1#blog-title a:visited {
の箇所で、次のように指定します。
color: （色のコードを指定）;
またブログの説明部分の色を変えたい場合には、更にその下にある下記の部分、
p#blog-description {
の箇所で、こちらも次のように指定します。
color: （色のコードを指定）;
（２）共通ヘッダーのデザインを変更する。
「09. Header & Footer – ヘッダー・フッター」の上部にある「Header」部分
table#header {
のところに以下を記載します。
background: url( 共通ヘッダー用の画像のURL) top center no-repeat;
background-attachment:fixed;
共通ヘッダーの画像とタイトル画像が連続しているように見えるでしょうか？
こちらも文字の色を変えたい場合には、その下の部分で色を指定しておきます。
color: （色のコード）;
（３）蛇足ですが、フッターの変更のやり方も追記。
※1280×35の画像を用意しました。
同じく「09. Header & Footer – ヘッダー・フッター」の下部にある「Footer」部分、
div.footer-outer {
のところに下記のように記載します。
background: url( フッター用画像のURLを指定) center no-repeat;
ここも文字の色を変えたい場合には、その下の部分で色を指定しておきます。
color: （色のコード）;
（４）ついでにサイドバーの各タイトル画像も変えちゃおう！
※300×28の画像を用意しました。
「02. Layout – レイアウト（全体の枠組み）」ってトコロの
div.calendarheadbody div.calendarhead,
div.sidetitle {
の部分にコレを入れてやるだけです。
background: url( サイドタイトル用画像のURLを指定) no-repeat left top;
お疲れ様でした！ 綺麗に仕上がったでしょうか？
カスタマイズして自分好みのデザインに♪
今回のデザインのポイントは、個人的なこだわり（白背景、紺使い、明るい満月の写真、ラベンダー）を全部詰め込んだってところです。今回入れなかったのは猫のモチーフくらいかなぁ。
ちなみに今回のカスタマイズで使用した美しい月夜の写真は神戸観光壁紙写真集様でお借りしたものです。
イメージにぴったりでしたし、大好きな神戸の写真ってところも嬉しかったです。ありがとうございました。
今回カスタマイズを行うにあたってちょっと気になったのが、割と最近追加になった「メッセージボード」機能。
わたしはブログ下方にツイッターを配置するために使いましたが、これ、アイディア次第でかなりいろんなことができそうですよ。
ところで、実はデザインをリニューアルするに至る顛末っていうのがあるわけなんですが、その過程の中でライブドアブログ、アメブロ、はてなダイアリー、FC2ブログなど無料の各ブログサービスをざっくり比較したりもしました。
その模様は備忘録代わりの別館に随時記録してたりするので、近いうちにそれもまとめてみたい（もしくはそのまま転載しようかな）と思います。
