ちゃログホーム » テンプレートカスタマイズ講座 vol.3 「いよいよヘッダ部分がっ！」

ちゃログのテンプレートカスタマイズ講座も第3回になりました。
第2回までのご説明で、マイアルバムに少なくとも1点、イメージファイルがアップロードされていると思います。

第3回では、その画像を利用して、実際にヘッダ部分の背景を変更してみます。

いよいよヘッダを画像にします

1．マイアルバムに画像が登録されている事を確認し、画像をクリックします。

2．ブラウザが新規ウィンドウ（若しくは新規タブ）で開き直接イメージファイルを表示します。
その際アドレスバーにそのファイルのURLが表示されますので…、



あらかじめお手持ちのテキストエディタソフト等にコピー&ペーストしておきます。
3.メニューの「スキン」をクリックします。
4．左メニュー、スキン変更・確認の「スキン編集」をクリックします。
第1回目と同じようにcssが記述されているフォームが表示されます。
5．スクロールバーを下ろし、
/* Layout_Element
===========================================================*/
と記述してある部分を表示します。

その中の…、
div#header内のbackground:#fff;という記述を、

「背景画像は○○を使用します。
それをヘッダの左上を原点にして縦方向0ピクセル横方向0ピクセルの位置に
繰り返さないで表示します。
背景は白に指定します」に変えてあげます。

cssが理解出来る言葉で書くと、次のようになります。

background:url(httpから始まる画像ファイル○○のURL) 0 0 no-repeat #FFFFFF;

次の内容も同じ意味になります。

background-image:url(httpから始まる画像ファイル○○のURL);
background-position: 0 0;
background-repeat:no-repeat;
background-color:#FFFFFF;
2回目でヘッダの高さを150ピクセルに設定したままになっていると思いますので、
これを背景画像の高さ、今回使用する背景画像の高さは189ピクセルですので、そこも一緒に直してあげます。
すると…、
シンプルだったブログが、キレイな夕焼けが印象的なブログに大変身しちゃいます☆
いかがだったでしょう？
一つひとつの動作についてご説明して参りましたが、ご理解頂けたでしょうか？

ヘッダ部分のカスタマイズが出来ましたら、後にご説明するいろいろなカスタマイズについてもご理解頂けるものと思います。
ここまでご説明した事をよくお読み頂き、世界でたったひとつのブログにして頂けたら幸いです＾＾

さて、次回のテンプレートカスタマイズ講座ですが、
第1回で少しご説明したcssの構造について、少し掘り下げてご説明していこうと思っております。
それでは、次にお目に掛かるまで、ちゃログでのコミュニケーションを存分にお楽しみ下さいませ～m(_ _ )m
テンプレート追加班 担当の〝はにぃびぃ〟でしたー 
カスタマイズ講座 1
カスタマイズ講座 2
カスタマイズ講座 3
カスタマイズ講座 号外1
カスタマイズ講座 号外2

click!