ヘッダカスタマイズ ブログタイトル部分
ブログのタイトル部分（header）をカスタマイズします。
やり方は沢山ありますが、それは追々…。
まず、どんなデザインにしたいかをイメージし素材を集めます。
素材屋から借りてくるもよし、自作すれば加工も出来るので便利です。
では今回私がイメージするヘッダですが
このようなものにしてゆきたいと思います。
このようにするには、このような素材が必要です。
こうして作ってみたはいいものの…。
アメブロではヘッダ用の大きな画像をアップロードする事が出来ません。
最大640pxに縮小されてしまうのです。
これをヘッダの背景画像に乗せても…。
横幅が足りません…。
ブログの幅を640pxにしてしまえば問題はありませんが、ブログの幅は700～800pxが通常。
この時、アメブロで使用できる（コタン）を利用すれば大きな画像もアップロードできますが、それはまた追々…。
ではどうするか！！？？
このような二つの画像に分けてイメージしたヘッダにしていきます。
画像をアメブロにアップロードした後、画像フォルダーで画像のＵＲＬを調べます。
ＵＲＬを知りたい画像の上で右クリックし、プロパティーを選びます。
出てきた「アドレス（URL）」という部分がその画像のＵＲＬになります。
http://blog.ameba.jp/user_images/22/50/10003500769_s.png
ですが、ここで注意が必要なのは、この画像も幾分か縮小されているという事です。
元々の画像というのは、このアドレス部分の最後の「_s」を覗いたものになります。
http://blog.ameba.jp/user_images/22/50/10003500769.png
それぞれのＵＲＬが判ったところで、ＣＳＳ編集してゆきます。
まず、「グラデーション」の画像ですが、１つのボックスの背景には１つの画像しか使用する事が出来ません。
なのでheaderとは別のボックスを使用します。
ＨＴＭＬを見てもらえればわかるのですが（参照 ）「frame」「subFrame」内にヘッダが存在しています。
なので、今回ヘッダが重なっている「frame」部分を利用しヘッダをカスタマイズしてゆきます。
ＣＳＳ編集画面で「#frame」と検索（Ctrl+F)してみましょう。
いくつか見つかると思いますが、「background」指定がある場所です。
「/*--common--*/」内や「background-color-control」内や「type_c.css」内にあります。
/* ----------------------- background-color-control ----------------------- */
body {
background-color: #FFFFFF;
}
#frame {
background-color: #FFFFFF;
}
皆さんのスキンでどのようになっているかは解かりませんが、「#frame」という部分を見つけられたでしょうか。
そこにグラデーション画像の背景を指定していきます。
http://blog.ameba.jp/user_images/d4/e2/10003500694.png
まず、背景画像を指定するＣＳＳは
background : url(画像ＵＲＬ) ;
です。
このＣＳＳを「#frame」に指定します。
既にある場合は削除して書き換えてください。
#frame {
background:url(http://blog.ameba.jp/user_images/d4/e2/10003500694.png);
}
プレビューしてみると、#frameのボックス全部にグラデーション画像が繰り返されてしまいました。
イメージでは、上の一列のみに繰り返したいわけです。
ですので「repeat-x」という横方向のみに繰り返すという指定をします。
#frame {
background:url(http://blog.ameba.jp/user_images/d4/e2/10003500694.png ) repeat-x;
}
イメージ通りになりました。
今度は雪だるまの画像を指定します。
http://blog.ameba.jp/user_images/22/50/10003500769.png
次は「#header」と検索（Ctrl+F）してください。
/* ----------------------- header ----------------------- */
#header{
display:block;
position : relative ;
top : 0 ;
left : 0 ;
width : 800px ;
height : 100px ;
background-color:#ffffff;
}
色々な指定がしてあるわけですが、見つかったでしょうか？
そこに背景画像を指定するＣＳＳを記述します。
他のＣＳＳはそのままで、既に記述されている「badground」のＣＳＳのみ書き換えてください。
#header{
display:block;
position : relative ;
top : 0 ;
left : 0 ;
width : 800px ;
height : 100px ;
background:url(http://blog.ameba.jp/user_images/22/50/10003500769.png );
}
すると、このようにヘッダボックスいっぱいに繰り返されてしまいました。
イメージでは画像１つを右端に置きたい。
ですので「no-repeat」繰り返さないと指定してみます。
#header{
display:block;
position : relative ;
top : 0 ;
left : 0 ;
width : 800px ;
height : 100px ;
background:url(http://blog.ameba.jp/user_images/22/50/10003500769.png ) no-repeat;
}
すると、このように繰り返さず一つだけ表示されたものの左上に表示されました。
今度は画像の位置です。
右上に表示したいので「top right」という指定をしたいと思います。
#header{
display:block;
position : relative ;
top : 0 ;
left : 0 ;
width : 800px ;
height : 100px ;
background:url(http://blog.ameba.jp/user_images/22/50/10003500769.png ) no-repeat top right;
}
これで、イメージ通りのヘッダが完成です。
この応用で、グラデーション画像の高さを大きくすると記事とサイドバーに重なったデザインになります。（参照 ）
関連記事