きまぐれAWA's Life

アクセスカウンタ

zoom RSS CSS(スタイル編)第4回 アイコンを変更する♪ 〜 ページヘッダ部分

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

ブログ気持玉 0 / トラックバック 0 / コメント 2

前回のCSS編集ではコンポーネント領域のアイコンの画像を替えました。
今回はトップや記事ページ本体部分のアイコンを替えてみます。
 

画像






 トップページ記事本体にあるアイコン画像を変更する♪ 

まずはトップページのアイコンの変更をします(ん)
『新着記事』の前にあるアイコン。
そして、『記事の題名』の前にあるアイコンの2箇所です。

『新着記事』のアイコンは 幅 32px × 縦 32px のGIFイメージ
『記事の題名』のアイコンは 幅 15px × 縦 15px のGIFイメージ
それぞれ、このような大きさのアイコンを用意しました。


それでは、この部分を探してください。

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

/*------------------ 新着記事 ------------------*/
#contents{
}

/* 見出し */
#contents #postlist h2{
}

/* 一覧ヘッダセル */
#contents #postlist th{
}

#contents #postlist a{
color:color=#0066ff;
}

/* 一覧データセル */
#contents #postlist td{
}

/* 一覧概要表示 */
#contents #postlist blockquote{
}

/* 月別リンク項目 */
#contents #archives li{
}




『新着記事』の前にあるアイコンの変更をします。
場所は 『/* 見出し */』 のところです。

#contents #postlist td{ 』の後に次の文字列を入力します。

background-image:url(画像のURL);
background-repeat: no-repeat;
padding:0px 0px 0px ▲px; height:●px; border-left:none;


画像のURL 』を画像のURLに置き換えます。
には画像の横幅、には画像の高さを入力します。



次に『記事の題名』のアイコンの変更をします。
ここでは、2箇所にそれぞれ文字列を書き込みます

ひとつ目の場所は 『/* 一覧データセル */』 のところです。
#contents #postlist td{ 』の後に次の文字列を入力します。

background-image:url(画像のURL);
background-repeat:no-repeat; padding:0px 0px 0px ▲px;



ふたつ目は『/* 月別リンク項目 */』 のところです。
『 #contents #archives li{ 』 の下の 『 } 』 の後に入力します。
ここの入力は『 } 』の後になります。他と違うので注意してください。

#contents #postlist td.date{
background-image:none;
}



画像のURL 』をそれぞれの画像のURLに置き換えます。
URLを入力する際には改行を入れずに1行で入力してください。
padding:0px 0px 0px ▲px; 』のには画像の横幅を入力します。
アイコンの位置調整については前回の要領で行ってください。

/*------------------ 新着記事 ------------------*/
#contents{
}

/* 見出し */
#contents #postlist h2{
background-image:url(画像のURL);
background-repeat: no-repeat;
padding:0px 0px 0px ▲px; height:●px; border-left:none;

}

/* 一覧ヘッダセル */
#contents #postlist th{
}


/* 一覧データセル */
#contents #postlist td{
background-image:url(画像のURL);
background-repeat:no-repeat; padding:0px 0px 0px ▲px;

}

/* 一覧概要表示 */
#contents #postlist blockquote{
}

/* 月別リンク項目 */
#contents #archives li{
}
#contents #postlist td.date{
background-image:none;
}



入力(貼り付け)が出来たら、設定ボタンをポチッと押して完了です(ういんく)

画像






 記事ページ本体部分のアイコンを変更する♪ 

続いて記事ページのアイコンを変更してみます。

画像




この部分を探してください。

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

/*----------------- 記事ヘッダ -----------------*/
#blog-head{
}

/* 記事タイトル */
#blog-head h2{
}

/* トラックバック数/コメント数 */
#blog-head .response{
}





『/* 記事タイトル */』 のところです。
#blog-head h2{ 』の後に次の文字列を追加します。

background-image:url(画像のURL);
background-repeat: no-repeat;
padding:0px 0px 0px ▲px; height:●px; border-left:none;


画像のURL 』を画像のURLに置き換えます。
には画像の横幅、には画像の高さを入力します。

/*----------------- 記事ヘッダ -----------------*/
#blog-head{
}

/* 記事タイトル */
#blog-head h2{
background-image:url(アイコン画像のURL);
background-repeat: no-repeat;
padding:0px 0px 0px ▲px; height:●px; border-left:none;

}

/* トラックバック数/コメント数 */
#blog-head .response{
}



入力(貼り付け)が出来たら、設定ボタンをポチッと押して完了です(ういんく)

画像



だんだんブログもオリジナルっぽくなってきました♪
次回は、トラックバック、コメント欄のところをカスタマイズしたいと思います♪

それでは、続きはまたの機会に(わら)


|ω・)ノシ See you♪

|彡 サッ




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



テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


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

タイトル
本 文

コメント(2件)

内 容 ニックネーム/日時
(*・д・*)コ(*・з・*)ン(*・ェ・*)ニ(*・Θ・*)チ(*・Д・*)ワーー!
またブログのCSS編集に使わせていただきましたヽ(・ω・)ノ

本当に自分だけのブログっぽくなったのでとっても嬉しいです(*´ω`*)

ありがとぉございましたヽ(・ω・)ノ
ぷー(ほし)ちん
2009/06/14 13:00
ぷー(ほし)ちんさん、いらっしゃいませ(わぁ)

オリジナルっぽいデザインに仕上がると嬉しいですよね〜(ん)
うちも久々にデザイン変更しましたよ(やるお)

これからもいろいろがんばってくださいね〜(わら)
mairis
2009/06/14 17:44

コメントする help

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

* ぱにゃステ *

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

CSS(スタイル編)第4回 アイコンを変更する♪ 〜 ページヘッダ部分 きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる