きまぐれAWA's Life

アクセスカウンタ

zoom RSS CSS(スタイル編)第1回 タイトル画像を変更する♪

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

なるほど(納得、参考になった、ヘー) ブログ気持玉 1 / トラックバック 2 / コメント 6

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

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






 まずは準備から♪ 

まず用意するものはタイトルに使用する画像です。
うちは、幅 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{
}



入力(貼り付け)が出来たら、設定ボタンをポチッと押して完了です(ういんく)
これで記事ページの画像も替わります♪
トップと記事のページはそれぞれ違う画像でもオーケーですね (oゝω・)b

画像
 


今回のCSS編集で各ページのタイトル画像が変わりました(はーと)
これだけでもブログの変わった感じがしますね♪

それでは、今回はこのくらいで(わら)
次はブログ全体のイメージを変えてみたいと思いますd(・ω・*)


|ω・)ノシ See you♪

|彡 サッ




■ ブログをいじっちゃおぅ♪ 〜 ブログのレシピ 〜 ■



テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 1
なるほど(納得、参考になった、ヘー)

トラックバック(2件)

タイトル (本文) ブログ名/日時
ブログトップページ、記事ページのタイトル画像を変更☆
ついにやってみました〜{%虹webry%} ブログのトップページ・記事ページのタイトル部分の画像を変更{%キラキラwebry%} ...続きを見る
Mixture 
2009/05/28 11:51
ブログスタイル変更・・・・・失敗?。。゛(ノ><)ノ ヒィ
ブログ内にいくつか訂正したい所があったれきです ...続きを見る
れきの歩み
2010/06/20 17:58

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(6件)

内 容 ニックネーム/日時
質問です(うる)ブログのトップページのSSなんですが、現在私は
ここでも紹介しているタイトル大の部分にSSの上の方を指定し
SSの下側をプロフィールの所で指定しているのですが、
Firefoxで表示させると上と下がずれるのです(むぅ)
↑これは本日中に記事にする予定です・・・・・・・・アクマデヨテイデス(あせ)。

またIEでも互換モードでなければズレます(わーん)

おまけに、上の指定のとき、作成したSSのpxサイズのままで高さ指定を行うと上下のSSの間に10px程の隙間が出来ます。
現在これは上のSSの高さ指定を作成サイズより10px小さく指定して
それっぽく繋げてますが、なんでこんなことになるのでしょうか?
れき
2010/06/20 13:14
> れきさん
まずは、スタイルシートの記述ミスの修正からです。
6行目、11行目の文字列のお尻に全角スペースがあるので消去してください。
こちらの記述ミスでブログ幅900pxの指定がされなくなってます。

次に画像のズレについてです。
タイトルとプロフィールではデフォルトの位置指定が違います。
そのためズレが生じますので背景画像の位置指定をします。
「#banner{}」と「#profile{}」にそれぞれ以下の文字列を追加してください。

background-position: top left;

上記文字列で背景画像を左上を基準にして配置します。
これで背景画像のズレがなくなります。

さて、隙間についてです。
これはタイトル画像領域に指定されている余白の指定が悪さをしています。
「#banner{}」に以下の文字列を追加して余白の指定をキャンセルします。

padding: 0px;

以上です(にこ)
がんばってね〜♪
mairis
2010/06/20 16:30
早速の回答ありがとう御座いますヽ(*´∀`)ノ

ぬぉ 全角スペース・・・・・・・・それは 落とし穴・・・・・・(ん)
落とし穴ッテカ・・・・・・・ダメな事自体知らなかった(あせ)

ズレも解消出来そうで早速改定してきます ε=ε=┏( ・_・)┛ すたこら

ε=ε=ε=ε=ε=ε=┌( ̄ー ̄)┘



アタヽ( ̄△ ̄ゞ=ヾ ̄△ ̄)ノフタ




キャー(≧∇≦)bー  ヽ(*´∀`)ノヽ('ヮ'*)ゝ

直りました。見事にどちらのブラウザでも綺麗に表示されるようになりました。
さすがmairisさんです  d(・ω・*)☆スペシャルサンクス☆(*・ω・)b(ぺこ)
れき
2010/06/20 17:22
>> れきさん
お疲れ様でしたー(にこ)
全角スペースは落とし穴的ミスになりますねぇ。
簡単に言うと全角文字は日本語だからアウトって感じです。
見えてないけど「あいうえお〜」って書くのと同じコトですね(気まずい)

見た目でミスが見当たらない時はコレを疑って見てください。

mairis
2010/06/21 09:51
こんにちは(わら)
いつもCSS編集の記事拝見してます(わら)
ヘッダー画像と背景画像が出来たので、
さっそく参考にさせていただきました(ぶーん)
mairisさんのおかげで私にもできました(拍手)
ありがとう!!
まだまだ変な所&変更したい所ありますが、
これからも mairisさんの記事見て
マイペースでやっていきます(三角帽子)
絵文字 かわいいですね〜(うひょー)

ひろたん
2011/02/20 17:16
ひろたんさん、いらっしゃいませ(ん)
設定お疲れ様でした〜(たいよう)
とてもステキな画像を使われててとってもいい感じに仕上がってますね♪
CSS編集も楽しく続けていってください(ん)
ご尽力ながらお手伝いできたら嬉しいです☆

絵文字はうちのブログの必須アイテムなのですw(うひょー)(@うひょー)

mairis
2011/02/20 18:47

コメントする help

ニックネーム
URL(任意)
本 文
  現在の閲覧者数:

* ぱにゃステ *

『ぱにゃステ』 customized by mairis
 
 
ふぉろーみー

CSS(スタイル編)第1回 タイトル画像を変更する♪ きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる