以下の内容はhttp://10plate.blog44.fc2.com///blog-entry-153.htmlより取得しました。


スポンサーサイト

[ --/--/-- --:-- ] | TB(-) | CM(-)

standardシリーズのコメント欄を一つずつ枠で囲み分ける

standardシリーズのコメント欄を一つずつ枠で囲み分けるカスタマイズを紹介します。

HTMLを編集します。

<!--▼コメント表示▼-->
<!--comment_area-->
<a name="comment_list"></a><br />
<div class="article">
<!--comment-->

<div class="comt">
<p><strong><a name="comment<%comment_no>" id="comment<%comment_no>"><%comment_title></a></strong></p>
</div>

<div class="comb">
<%comment_body>
<div class="comment_navi">

</div><!--/comment_navi-->
</div><!-- /comb -->

<!--/comment-->
<!--▲コメント表示▲-->


上記の赤い部分を加えてください。
次にスタイルシートを編集します。


/* コメントナビゲーション */
.comment_navi {
text-align: right;
margin-top:8px;
margin-bottom: 0px;
padding: 5px;
border-top: #dddddd 1px solid; /* 記事下ナビ区切り線 */
}



.comt {
border:solid 1px #000000; /* コメントタイトル枠 */
background:#000000; /* コメントタイトル背景色 */
color:#ffffff; /* コメントタイトル色 */
padding:5px;
}

.comb {
border:solid 1px #000000; /* コメント本文枠 */
margin-bottom:10px; /* 次のコメントまでの間隔 */
padding:5px;
}



comment_naviのmargin-bottomを0にして、スタイルシートの末尾にcomtとcombを加えてください。
これで各コメントを枠で囲むことができます。

【2009/09/21 追記】上記HTMLの記述に誤りがあったので修正しました。
誠に申しわけありませんm(__)m 以前の記述は以下になります。

<!--▼コメント表示▼-->
<!--comment_area-->
<a name="comment_list"></a><br />
<div class="article">
<!--comment-->

<div class="comt">
<p><strong><a name="comment<%comment_no>" id="comment<%comment_no>"><%comment_title></a></strong></p>
</div>

<div class="comb">
<%comment_body>
<div class="comment_navi">

</div><!--/comment_navi-->
</div><!-- /comb -->

<!--/comment-->
<!--▲コメント表示▲-->

関連記事



以上の内容はhttp://10plate.blog44.fc2.com///blog-entry-153.htmlより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14