CSS（スタイル編）第１回タイトル画像を変更する♪ きまぐれAWA's Life/ウェブリブログ

CSS（スタイル編）第１回タイトル画像を変更する♪

<< 作成日時： 2008/02/03 11:45 >>

ウェブリブログではいろんなデザインテンプレートが用意されていますが、
100％満足出来るというものが無いなんてことも…ありますよね。
まずはタイトル画像を替える事からはじめてみたいと思います。

【追記】（08/06/05）
ブログ管理のタイトルデザイン設定画面からタイトル画像の変更が出来るようになりました。
お手軽・簡単に変更したい場合はこちらから
CSS（スタイル編）　簡単♪　タイトル画像を簡単に変更する♪ ～タイトルデザイン設定

もう少し手を加えたい場合には下記の記事をご覧ください。

『 White Wiz 』好きなうちなので、ブログを始めてから雪っぽいイメージの
『キャラクター＞ブーメランマン１』を選択してました。

　
全体のイメージは悪くないんですが…。
よくタイトル画像の替わっていたりデザインが違ったりと、
いろいろ手を加えているブログをよく見かけます。
このさいパンヤの画像を使ったりかわいい素材などを使って、
ブログのデザインを変えてしまいます♪

※CSS編集については『キャラクター＞ブーメランマン１』での設定を基準にしています。
他のデザインテンプレートを選択している場合はデザイン指定がうまくいかない場合があります。

　まずは準備から♪　

まず用意するものはタイトルに使用する画像です。
うちは、幅 700px × 高さ 196px のものを用意しました。
タイトル画像をブログの幅にぴったりにしたい場合は、
2カラムは700px 、3カラムなら800px が良いようです。
高さはいくつでもかまいませんが、ブログ全体のバランスに注意してください。
設定する時に必要になるので、画像の大きさの確認をしておいてくださいね。
※ px（ピクセル）は画像の大きさの単位になります。

用意した画像をファイルマネージャでアップロードして、画像のURLを控えます。
ブログ管理ページから、設定 > オプション > CSS編集と進みましょう。

ここでCSS編集から設定までをおこないます。

ブラウザ上で編集するのも大変ですので、枠内の文を全コピして
テキストエディタ（メモ帳など）で編集した方が良いでしょう。

※CSS編集の際には元（前の設定）に戻せるように、変更を加える前に
以前の設定を必ずバックアップするようにして下さい。
バックアップしてあったもので元の設定にうまく戻らない場合は、
『初期値をフォームに入力』で一度設定し直してください。

CSSの全文を見てみましょう。 CSS 全体Map

CSS編集では編集をする場所が大きく三つに分かれています。
各場所でそれぞれのデザインを指定するようになっています。

A 『共通スタイル』
　ブログ全体に共通するデザインを指定します。
B 『トップ、月別、テーマ別ページ』
　トップページや月別、テーマ別ページに共通するデザインを指定します。
C 『記事ページ』
　記事ページのデザインを指定します。

CSS編集はまずデザインを命令文を入力する場所を探して命令文を入力、
そして設定ボタンで指定したデザインを適用する、といった作業を行います。

　トップページのタイトル画像を変更する♪　

それではトップページのタイトル画像を変更してみます。
この部分を探してください。　

　B 『トップ、月別、テーマ別ページ』　 CSS 全体Map

/*----------------------------------------------*/
/* トップ、月別、テーマ別ページ */
/*----------------------------------------------*/

/*---------------- タイトル(大) ----------------*/
#banner{
/* 包含要素を相対位置指定できるようにします */
}

/* タイトル領域内のアンカー */
#banner a{
}

この部分を見つけたら、『 #banner{ 』の後に下の文字列を追加します。

background-image:url(画像のURL);
height:▲px;

『画像のURL 』は用意した画像のURLに置き換えます。
URLを入力する際には改行を入れずに1行で入力してください。
アドレスの間に改行が入ると画像が表示されません。
テキストエディタやCSS編集のブラウザ上では自動的に改行が行われます。
コピーした文字列をそのまま貼り付ける作業でCSS編集は出来ます。

『 height:▲px; 』の▲には画像の高さになります。

文字列を追加するさいは、上の文字列をコピーして張り付けるのが簡単です。
編集の際に最後にある『 } 』を消さないよう注意してください。
{←ここから　～　ここまで→} 　この間に文字列が入るようにします。

それから、
/*←ここから　～　ここまで→ */
この間の文字はページには表示されません。
そのままで大丈夫です。

/*----------------------------------------------*/
/* トップ、月別、テーマ別ページ */
/*----------------------------------------------*/

/*---------------- タイトル(大) ----------------*/
#banner{
background-image:url(画像のURL);
height:▲px;
/* 包含要素を相対位置指定できるようにします */
}

/* タイトル領域内のアンカー */
#banner a{
}

入力（貼り付け）が出来たら、設定ボタンをポチッと押して完了です（ういんく）
すると、トップページの画像が変わっています（はーと）

　記事ページのタイトル画像を変更する♪　

続いて記事ページのタイトル画像を変更してみます。
この部分を探してください。

　C 『記事ページ』　　 CSS 全体Map

/*----------------------------------------------*/
/* 記事ページ */
/*----------------------------------------------*/

/*---------------- タイトル(小) ----------------*/
#subbanner{
/* 包含要素を相対位置指定できるようにします */
}

/* タイトル領域内のアンカー */
#subbanner a{
}

『 #subbanner 』の後に下の文字列を入力します。

background-image:url(画像のURL);
height:▲px;

『画像のURL 』は用意した画像のURLに置き換えます。
URLを入力する際には改行を入れずに1行で入力してください。
『 height:▲px; 』の▲には画像の高さになります。

/*----------------------------------------------*/
/* 記事ページ */
/*----------------------------------------------*/

/*---------------- タイトル(小) ----------------*/
#subbanner{
background-image:url(画像のURL);
height:▲px;
/* 包含要素を相対位置指定できるようにします */
}

/* タイトル領域内のアンカー */
#subbanner a{
}