FC2ブログのテンプレート工房

いつもお世話になっております
今lightframeを使わせていただいてますが、
コメント欄のカスタマイズについてお伺いしたく書き込みました。

現在のコメントの仕様を某掲示板のように簡素化させたいと思っています。
タイトルにナンバリングと名前、URLを名前にリンクさせ、
ボディは外枠線は無し、コメント投稿欄は枠線で囲うスタイルにしたいのですが、
現状のCSSなどの変更点を教えてください。

某掲示板ていうのは2chを指してますか？、そもそもそこが違うと話がずれて細かいカスタマイズ出来ないので・・・(苦笑)。

でも文面から察するに、多分そうであろうと勝手に予測してカスタマイズ試して見ました（lightframe_whiteで）。

ウチの既存記事で試しましたがこんな感じになります。
http://blog-imgs-30.fc2.com/y/a/s/yassee/20100213-2.jpg

結構手を加えるので必ず元のバックアップを取ってから自己責任でお願いしますm(__)m。

まずテンプレートの<!--▼コメント表示▼--> の下、
<!--comment-->で始まる箇所から

<!--/comment-->
<!--▲コメント表示▲-->
までのテンプレートを以下のように変更します。

<!--comment-->

<a name="comment<%comment_no>" id="comment<%comment_no>"></a>
<div class="comment_title"><%comment_no> 名前：<script type="text/javascript">
a="<%comment_url>";
if (a!="") { document.write('<a href="'+a+'" target="_blank"><%comment_name></a>') } else {
document.write("<%comment_name>"); }
</script>
<noscript>
<a href="<%comment_url>" target="_blank"><%comment_name></a>
</noscript>：<%comment_year>/<%comment_month>/<%comment_day>(<%comment_wayoubi>) <%comment_hour>:<%comment_minute>：<%comment_second> [<a href="<%comment_edit_link>" title="コメントを編集する">編集</a>]</div>
<div class="comment_body">
<div class="comment_text"><%comment_body></div>
<div class="comment_navi">


</div><!--/comment_navi-->
</div><!--/commnet_body-->

<!--/comment-->

[編集]っていうのがいらないなら [<a href="<%comment_edit_link>" title="コメントを編集する">編集</a>]を削ればいいです。
ちなみに題名は表示しないように抜きましたけど必要なら<%comment_title>を入れたいところに書き加えればＯＫ。
それとオマケで曜日と秒も加えておきました。

スタイルシートは▼ コメント ▼ からの以下の部分を書き換えました。

.comment_outline {
border:#666666 1px solid; /* 外枠の/色太さ/実線 */
background-color:#FFFFFF; /* 背景色 */
text-align:left; /* 左寄せ */
margin-bottom:20px; /* 次のコメントまでの間隔 */
}
.comment_title {
font-size:10pt; /* 文字サイズ(タイトル) */
color:#000000; /* 文字色 (タイトル) */
font-weight:bold; /* 太字 (タイトル) */
background-color:#ffffff; /* 背景色 (タイトル) */
text-align:left; /* 左寄せ (タイトル) */
border:#ffffff 0px solid; /* 枠 (タイトル) */
padding:5px 20px;
}
.comment_body {
font-size:10pt; /* 文字サイズ(コメント本文) */
color:#000000; /* 文字色 (コメント本文) */
border-top: #e0e0e0 0px solid; /* 枠(上) (コメント本文) */
border-left: #666666 0px solid; /* 枠(上) (コメント本文) */
border-right: #666666 0px solid; /* 枠(上) (コメント本文) */
border-bottom:#666666 0px solid; /* 枠(上) (コメント本文) */
}

コメント入力側はいじってません。

> 人参さん
なんとそのやり方をやっすぃぃぃーさんが紹介してくれました。

> やっすぃぃぃーさん
ここまでしてくれるとは本当にありがとうございます m(__)m
この情報も記事として紹介させてください。

おぉ、、記事にまとめるのですか・・。

いたおさんのテンプレはコードが読みやすいのでカスタマイズは非常にやりやすかったです(^^)。

ご利用されている皆さんも自分でいろいろいじってみることをオススメします。私もそれで覚えました。

やっすぃぃぃーさん、スクショまでわざわざ作っていただいて
ありがとうございます。思った通りの感じです。

相談前にデフォのテンプレとCSSいじってみたのですが、
タイトル部分が2段になってしまって悩んでました。

また質問になってすみませんが、ナンバリングはその記事ごとに1から、といううふうにはできるのでしょうか？

いたおさんへ
最初のプラグインの折りたたみの件ではお世話になりました。

<ol>を使ったリスト構造ならば記事ごとの連番も可能です。
やっすぃぃぃーさんが教えてくれたものとは構造が変わってきてしまいますが、時間ができたら記事にするのでもうしばらくお待ちください。

なかなかうまくいかずハマりました(苦笑)。
でも基本的な構造を変えずにできました。変えたところだけ色つけておきます。

<ol>
<!--comment-->

<a name="comment<%comment_no>" id="comment<%comment_no>"></a>
<div class="comment_title"><li> 名前：<script type="text/javascript">
a="<%comment_url>";
if (a!="") { document.write('<a href="'+a+'" target="_blank"><%comment_name></a>') } else {
document.write("<%comment_name>"); }
</script>
<noscript>
<a href="<%comment_url>" target="_blank"><%comment_name></a>
</noscript>：<%comment_year>/<%comment_month> /<%comment_day>(<%comment_wayoubi>) <%comment_hour>:<%comment_minute>：<%comment_second> [<a href="<%comment_edit_link>" title="コメントを編集する">編集</a>]</div>
<div class="comment_body">
<div class="comment_text"><%comment_body></div>
</div><!--/commnet_body-->
</li>
<!--/comment-->
</ol>

※いたおさんへ

<!--comment--><!--/comment-->エリア外に<ol>を置くのがミソです。イジくっても番号が増えていかずこれを見つけるまでハマってしまいました(+_+)。

またもやありがとうございました。
テンプレとCSSをいじってみたのですが
何故かスクショ通りにはならず、
いじっては戻しを繰り返しています。
もうすこし自分なりにいじってみますね。

試行錯誤中でしたか・・。いろいろいじってみると次第に覚えていきますし今後に必ず活きますからがんばってください。

また具体的な質問があればわかる範囲でフォローしますので。

このコメントは管理者の承認待ちです

やっすぃぃぃーさんの某掲示板風設定を使わせていただきました。
ありがとうございます。
ただ、

<ol>

の部分を

<ol style="padding: 0; margin:0;">

といった感じで指定しておかないと左に変な空白ができてしまいますね。
自分はかなりこの部分で手こずってしまいました。

ありがとうございます。そのような有用な情報をコメントに残してもらえると皆で情報共有できるので助かります。

やっすぃぃぃー さんにもとても助けられました。

題名:

名前:

URL:

COMMENT:

現在休止中で管理人はコメントに答えることが出来ないことをご了承くださいm(__)m

PASS: SECRET:管理者にだけ表示