CSS（スタイル編）第６回一覧の画像と罫線のサイズと色♪ きまぐれAWA's Life/ウェブリブログ

CSS（スタイル編）第６回一覧の画像と罫線のサイズと色♪

<< 作成日時： 2008/02/05 01:09 >>

トラックバック 0 / コメント 0

今回はページ本体部分に手を加えます。
まずはトップページの一覧の画像。
それと、各記事を区切っている罫線のサイズと色を変更します。

赤い枠の部分です

　トップページから♪　

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

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

/*------------------ 新着記事 ------------------*/
#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;
}

まずは一覧の画像です。
うちはこのような画像を用意しました。
幅456px × 縦21px のPNGファイルです。
サイズは386バイト

場所は『/* 一覧ヘッダセル */』
『 #contents #postlist th{ 』の後に次の文字列を入力します。

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

『画像のURL 』を画像のURLに置き換えます。

続けて罫線のサイズと色です。
場所は『/* 一覧データセル */』
『 background-repeat:no-repeat; padding:0px 0px 0px ▲px;』の後に
次の文字列を入力します。

border-bottom:■px ▲ solid;

『 ■ 』で罫線の太さを決めます。（例） 1px ，2px
『 ▲ 』にはカラーコードを入力してください。（例） #FFEEEE

※見出しアイコンを変更した時に入力した文字列が緑の部分になっています。

/*------------------ 新着記事 ------------------*/
#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{
background-image:url(画像のURL);
}

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

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

画像替わりました♪

　一覧ヘッダ　トラックバック、コメント領域♪　

同様に記事ページのトラックバック、コメント一覧の画像を変更をします。

赤い枠の部分です

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

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

/*-------- トラックバック、コメント領域 --------*/
#blog #trackback,
#blog #comment{
}

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

/* 見出し補足(トラックバック・コメント件数など) */
.supple{
}

/* 一覧ヘッダセル */
#blog #trackback th,
#blog #comment th{
}

場所は『/* 一覧ヘッダセル */』のところです。
『 #blog #comment th{ 』の後に次の文字列を入力します。

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

『画像のURL 』を画像のURLに置き換えます。

※見出しアイコンを変更した時に入力した文字列が緑の部分になっています。