【CSS編集】タイトルに画像を入れる。

タイトルに画像を入れる手順をご紹介。基本的にクリア系テンプレートでの方法です。

まず、最初に私のテンプレートのタイトル部分をご紹介。

/* ヘッダーの指定 */ #header { background-color: #79B6F9; padding: 35px; border-bottom: 1px solid #B6CEE7; background-color: #CAEDF5; background-image: url(http://www.geocities.jp/blue_sky_homepage/tools/ted_title_back.gif); background-repeat: no-repeat; background-position: right bottom; }

クリア系テンプレートだとタイトルを制御している部分は#headerという部分になります。

次にクリア系テンプレートのオリジナルCSSのヘッダー部分を見てみましょう。

/* ヘッダーの指定　*/ #header { background-color: #FFDE9B; padding:35px; border-bottom: 1px solid #FFD57D; background-image: url(/images/tmp_sm_or_ｌ/head_bg.gif); }

違いがわかりますでしょうか？1行ずつ紐解いて見ましょう。

background-color: #FFDE9B;

まず、1行目ですが、画像を指定しない場合や画像が無い部分（もしくは透明部分）の背景色を指定しています。
background-color－スタイルシートリファレンス

padding:35px;

これは、文字の入る部分をヘッダー部分の端からどれぐらい離すかを指定しています。
1つしか指定が無い場合は全周囲35ピクセル（pxのこと）開けるということを意味します。

上下左右別々の間隔を指定することも可能です。その場合の処理方法は下記のリンクをご覧下さい。
padding－スタイルシートリファレンス

border-bottom: 1px solid #FFD57D;

これは、ヘッダー部分を囲む線の指定ですね。
ヘッダ部分の下部に色が#FFD57D（オレンジ）で高さ1ピクセルで直線を描くという指定になります。
solidというのが実線を表しています。
他にもいろんな線があります。詳しくは下記のリンクをご覧下さい。
border－スタイルシートリファレンス

background-image: url(/images/tmp_sm_or_ｌ/head_bg.gif);

background-imageというのが背景画像を指定するスタイルシートのプロパティですね。url( )の括弧内に画像のURLを記述すると背景画像として使われます。

ですが、「/images/tmp_sm_or_ｌ/head_bg.gif」って変なURLでしょ。http://がありませんからね。これは、gooブログ内のみ有効なアドレスで、gooブログ側で自動的にhttp://blog.goo.ne.jp/を追加して処理されるんです。

つまり、本来のアドレスは先頭にhttp://blog.goo.ne.jp/を追加した
http://blog.goo.ne.jp/images/tmp_sm_or_l/head_bg.gifですね。

えっとコレをクリックしても、どこに画像があるか分からないぐらい小さいです。

ということで1600倍してみますと


という感じになります。上の1ピクセルだけが濃いオレンジになっています。
ではなぜ縞模様に見えるかというと、リピート（繰り返し）処理がされてるんですね。
これは次の項目で説明します。

background-image－スタイルシートリファレンス

background-repeat: no-repeat;

これは、私のテンプレートで指定している背景画像のリピートに関するプロパティーですね。
クリアオレンジ左メニューのオリジナルのCSSにはリピート処理に関する部分が省かれていますのでデフォルトの処理である、縦横に繰り返すという処理がされます。ちょうど、デスクトップの壁紙の「並べて表示」と同じような感じと考えてください。

私のテンプレートでは画像が横幅一杯ですし、縦に繰り返しても変なだけなので
background-repeat: no-repeat ;
と記述して画像を繰り返し表示しません。

他にも横だけに繰り返したり縦だけに繰り返したりが出来ます。詳しくは下記のリンクをご覧下さい。
background-repeat－スタイルシートリファレンス

background-position: right bottom;

私のテンプレートのみに指定してあるプロパティーですね。
私のテンプレートでは、Yahooのジオシティーズにおいたgif画像をタイトル部の背景として使ってます。

ブログ幅が760pxなんでそれにあわせて画像を加工しています。水色の部分は透明化しているので残った部分には背景色が透けて見えます。なぜこんなことをしているかというと、テンプレートを弄ってタイトル部の高さが変わっても画像を処理しなおさなくても良いようにしているわけですね。



注意
YahooジオシティーズはYBBユーザーもしくはジオシティープラスユーザーでないと直リンクできません。

次に、no-repeatの場合は画像の配置も決めてあげる必要が出てきますね。（まあrepeat-x,yでも必要な場合もあるでしょうが）

タイトル部の左側に画像をおきたいとか右側に画像をおきたいとかを指定するわけです。
もちろん、タイトル部全体に画像を指定したい場合は不要ですが、サイズが小さい画像を配置する場合には指定が必要になってきます。

そのプロパティーがbackground-positionになるわけです。
私の場合は右下に配置したいのでright bottomと指定しています。

詳しい記述のしかたに関しては下記のリンクをご覧下さい
background-position－スタイルシートリファレンス

---

以上
タイトル部の処理関してはこんな感じですね。
ご質問はコメント欄にどうぞ。私のわかる範囲で回答させていただきますよ。