今回と次回で、今使っているスキンのカスタマイズ記事は終了の予定です。このシリーズの次はネットショップ開店篇をメインに、JavaScriptなどもやります。
女性が楽しめるエロサイトも作りたいので、やることはいっぱいです。とりあえず、今日のお題「コメント欄のカスタマイズ」です。
スタイルシートの中から、次の部分を探します。
これのbackground（背景）、border（枠）、color（文字色）を自分の好きなように変更します。
このスキンではこうしました。
青い文字が追加です。
元々書いてあったものは、行頭に//（スラッシュ２個）をつけて、コメント（注釈）扱いにしています。もし、元に戻したい時はこのコメントを復活させてください。
今のままでは、タイトルだけが加工されています。次はコメント本文の領域をいじります。
場所はさっき直した部分のすぐ下です。
正直に言います。この下は訂正後の状態、つまり今の状態です。
が、直す前がどうだったか忘れちゃった！ゴメン
この記事のとおりにやると、このスキンと同じになるはずなんですが、忘れて抜かしているところがないとは限りませんのです！おかしくなったら教えてね！
次回最終回！
女性が楽しめるエロサイトも作りたいので、やることはいっぱいです。とりあえず、今日のお題「コメント欄のカスタマイズ」です。
トラックバックとコメントのタイトルを加工する
スタイルシートの中から、次の部分を探します。
/* トラックバック */
h3#trackbackTitle {
border: 1px solid #eee;
margin-top:15px;
padding: 6px;
background:#eee;
color:#666;
font-weight:bold;
}
#trackbackText {
padding: 5px;
}
/* コメント */
h3#commentTitle {
border: 1px solid #eee;
margin-top:15px;
padding: 6px;
background:#eee;
color:#666;
font-weight:bold;
}
h3#commentPosts {
border: 1px solid #eee;
margin-top:15px;
padding: 6px;
background:#eee;
color:#666;
font-weight:bold;
}
これのbackground（背景）、border（枠）、color（文字色）を自分の好きなように変更します。
このスキンではこうしました。
/* トラックバック */
h3#trackbackTitle {
//border: 1px solid #eee;
border: 1px solid #0f0;
margin-top:15px;
padding: 6px;
//background:#eee;
//color:#666;
background:#efe;
color:#0c0;
font-weight:bold;
}
#trackbackText {
padding: 5px;
}
/* コメント */
h3#commentTitle {
//border: 1px solid #eee;
border: 1px solid #0f0;
margin-top:15px;
padding: 6px;
//background:#eee;
//color:#666;
background:#efe;
color:#0c0;
font-weight:bold;
}
h3#commentPosts {
//border: 1px solid #eee;
border: 1px solid #0f0;
margin-top:15px;
padding: 6px;
//background:#eee;
//color:#666;
background:#efe;
color:#0c0;
font-weight:bold;
}
青い文字が追加です。
元々書いてあったものは、行頭に//（スラッシュ２個）をつけて、コメント（注釈）扱いにしています。もし、元に戻したい時はこのコメントを復活させてください。
コメント本文の表示をカスタマイズ
今のままでは、タイトルだけが加工されています。次はコメント本文の領域をいじります。
場所はさっき直した部分のすぐ下です。
正直に言います。この下は訂正後の状態、つまり今の状態です。
が、直す前がどうだったか忘れちゃった！ゴメン
.comment_layer {
padding:4px 4px 0 4px;
border-top:1px solid #ff0;
border-right:1px solid #ff0;
border-left:1px solid #ff0;
border-bottom:none;
background:#ffe;
color:#888;
}
.posted2 {
border-top:none;
border-right:1px solid #ff0;
border-left:1px solid #ff0;
border-bottom:1px solid #ff0;
background:#ffe;
color:#fb0;
margin-bottom:10px;
padding:3px 2px 4px 0;
text-align:right;
}この記事のとおりにやると、このスキンと同じになるはずなんですが、忘れて抜かしているところがないとは限りませんのです！おかしくなったら教えてね！
次回最終回！