CSS（スタイル編）第４回アイコンを変更する♪ ～ページヘッダ部分きまぐれAWA's Life/ウェブリブログ

CSS（スタイル編）第４回アイコンを変更する♪ ～ページヘッダ部分

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

前回の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{
}