コメント欄全体を枠で囲み各記事ごとにコメント番号をつける方法

締切済

質問者：a_krycek
質問日時：2008/11/28 12:43
回答数：1件

FC2ブログのテンプレート工房
http://10plate.blog44.fc2.com/
上記サイトのライトフレームを使っているのですが
各記事ごとにコメントに番号をつけ、
コメント欄全体を枠で囲む
簡潔なカスタマイズ方法をお教えください

ＨＴＭＬ部

<a name="comment_list"></a>

<div class="comment_outline">
<div class="comment_title"><a name="comment<%comment_no>" id="comment<%comment_no>"><%comment_title></a></div>
<div class="comment_body">
<div class="comment_text"><%comment_body></div>
<div class="comment_navi">
[ <%comment_year>/<%comment_month>/<%comment_day> <%comment_hour>:<%comment_minute> ]
<SCRIPT LANGUAGE="JavaScript">
v = "<%comment_url>";
iffunc(v);
function iffunc(b)
{
if (b) {
document.write("<a href='<%comment_url>' target='_blank'>"+"<%comment_mail>"+"</a> <a href='<%comment_url>' target='_blank'><%comment_name></a>");
} else {
document.write("<%comment_mail> <%comment_name>");
}
}
</SCRIPT>
[ <a href="<%comment_edit_link>" title="コメントを編集">編集</a> ]
</div>
</div>
</div>


シート部
.comment_outline {
border:#000000 2px solid;
background-color:#FFFFFF;
text-align:left;
margin-bottom:20px;
}
.comment_title {
font-size:10pt;
color:#ffffff;
font-weight:bold;
background-color:#000000;
text-align:left;
border-bottom:#666666 1px solid;
padding:5px 20px;
}
.comment_body {
font-size:10pt;
color:#000000;
border-top:#cccccc 1px solid;
}
.comment_text {
text-align:left;
margin:10px 20px;
}
.comment_navi {
text-align:right;
margin:0px 10px 3px;
}

現状の上記のHTMLでは各コメントが2pixの枠で囲まれ

「タイトル」
本文
（右寄せ）投稿日時投稿者[編集]

となります。
これを改変して

各コメントでなくコメント欄全体を枠で囲み

（左寄せ）コメント番号Titled by「タイトル」投稿者投稿日時[編集]
本文

と変更したいです

知識不足ゆえの質問ではございますが
お分かりの方がいらっしゃったらお答えしていただけると幸いです
どうかよろしくお願いましす

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： lesstia
回答日時：2008/11/28 14:09

各コメント枠は .comment_outline の border:#000000 2px solid; の部分を修正（というか削除）

コメント欄全体を囲むには  のさらに外側にdivを作って囲み、そのCSSに上記borderを設定してあげればよいかと思います。

コメントのレイアウトは<div class="comment_navi">内のものを<div class="comment_title">内に移動すればよいでしょう。