アフィリエイト広告を利用しています

広告

posted by fanblog
「ここにブログの名前を入れます」は更新を終了しました。記事はすべて新ブログ「 Big Bang 」に移転済みです。記事のタイトルをクリックすると新ブログの該当記事に移動します。そちらでお楽しみください。

コメント欄のカスタマイズ

今回と次回で、今使っているスキンのカスタマイズ記事は終了の予定です。このシリーズの次はネットショップ開店篇をメインに、JavaScriptなどもやります。

女性が楽しめるエロサイトも作りたいので、やることはいっぱいです。とりあえず、今日のお題「コメント欄のカスタマイズ」です。

トラックバックとコメントのタイトルを加工する


スタイルシートの中から、次の部分を探します。



/* トラックバック */
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;
}

青い文字が追加です。
元々書いてあったものは、行頭に // (スラッシュ2個) をつけて、コメント(注釈)扱いにしています。もし、元に戻したい時はこのコメントを復活させてください。

コメント本文の表示をカスタマイズ


今のままでは、タイトルだけが加工されています。次はコメント本文の領域をいじります。
場所はさっき直した部分のすぐ下です。

正直に言います。この下は訂正後の状態、つまり今の状態です。
が、直す前がどうだったか忘れちゃった!ゴメン


.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;
}

この記事のとおりにやると、このスキンと同じになるはずなんですが、忘れて抜かしているところがないとは限りませんのです!おかしくなったら教えてね!

次回最終回!

新ブログ「Big Bang」で続きを読む

×

この広告は30日以上新しい記事の更新がないブログに表示されております。

Build a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: