きまぐれAWA's Life

アクセスカウンタ

zoom RSS CSS(スタイル編) 第6回 一覧の画像と罫線のサイズと色♪

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

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

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









 トップページから♪ 


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

 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ファイルです。


場所は 『/* 一覧ヘッダセル */』
#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に置き換えます。

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

/*-------- トラックバック、コメント領域 --------*/
#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{
background-image:url(画像のURL);
}



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








 トラックバック、コメントの罫線は? 


トラックバック、コメントを区切っている罫線についても
同じようにサイズと色を変更しようと思ったんですが…




思っていなかった余計な箇所まで罫線が入っってしまいました。
今回はここの罫線については保留にしておきます。



|ω・)ノシ See you♪

|彡 サッ




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



テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

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

トラックバック(0件)

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

トラックバック用URL help


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

タイトル
本 文

コメント(2件)

内 容 ニックネーム/日時
こんばんは(わら)実は「お久しぶり」です。
最近またCSS編集に手を出し、このブログにも大変お世話になっております。
とても分かりやすくて重宝してます。感謝!

さて、こちらの記事に質問というか相談・・・宜しいでしょうか(うる)
現在、一覧トップの「タイトル 日時」の部分の画像を替えようとしているのですが、タグと画像URLを貼っても、ページに画像が出てきません。
何がいけないのでしょうか・・・。
状況としてどこを説明すれば良いかも分からず、お手数お掛けしますが、何卒ご指導を!(根本的な問題等、無理な場合はこちらで頑張ります。)

それでは一旦失礼します。乱文で申し訳ありません。(なみだ)
眉上市子松
URL
2011/10/24 23:03
眉上市子松さん、いらっしゃいませ(にこ)
CSS編集がんばってらっしゃるのですね(ん)
少しでもお役に立てると嬉しいです♪

さて、ご質問の件です(にや)
スタイルシートを見させて頂きましたトコロ「/* 一覧ヘッダセル */#contents #postlist th{}」の部分ですね。
こちらの『background-image』の『()』が抜けているのが原因のようです。
以下のように書きなおしてみてください。

background-image:url(http://tsu.ptu.jp/myg/itrn.jpg);

これで画像が表示されます。
※反映されない時は『F5』キーを押してリログしてみてください。






mairis
2011/10/25 00:05

コメントする help

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

* ぱにゃステ *

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

CSS(スタイル編) 第6回 一覧の画像と罫線のサイズと色♪ きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる