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

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

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

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

HTMLを編集します。

<a name="comment_list"></a><br />
<div class="article">


<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>
</div>

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

～
/* コメントナビゲーション */
.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　以前の記述は以下になります。


<a name="comment_list"></a><br />
<div class="article">


<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>
</div>

関連記事

プラグインの間隔 (standardシリーズ) (2009/05/27)
プラグインの下を伸ばす (standardシリーズ) (2009/05/15)
『最新の記事』の便利ナビを設置する (standard) (2007/05/05)
standardシリーズのコメント欄を一つずつ枠で囲み分ける (2007/03/16)
トップページのみ３カラム、他の個別記事ページ等を２カラムにする。 (2006/12/23)
便利ナビの背景を画像にする (2006/12/11)
プラグインカテゴリ３のデザインを変える (2006/09/10)

[ 2007/03/16 00:28 ] カスタマイズ standard 専用 | TB(0) | CM(15)

≪ プラグインの折りたたみの『Close』を上部に表示させる | HOME | トップページでは記事を表示させない ≫

[ 1417 ] ありがとうございます

いたおさん、こんばんは。

前回に引き続き、再び記事にしていただいてありがとうございます。早速変更してみたんですが、とても見やすくなって大満足です。変更の際にソースをちょっとアレンジして、コメントの枠の幅と記事の枠の幅を揃えてみました。

[ 2007/03/17 01:32 ] [ 編集 ]

[ 1436 ] > *chel* さん

アレンジお見事です。*chel* さん。
コメント枠と記事枠の幅が揃うととても見やすいですね＾＾

[ 2007/03/19 00:09 ] [ 編集 ]

[ 1472 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2007/03/21 21:12 ] [ 編集 ]

[ 2788 ] 初めまして

こちらのサイトにはいつもお世話になっています。
今まで分からないことがあってもなんとか自己解決してきたんですが今回はお手上げです…

margin-bottom:10px; /* 次のコメントまでの間隔 */

この命令を聞いてもらえなくて困っています。
現在、コメントとコメントの間隔はぴったりとくっついてしまっています。どこも見ても修正できる箇所が見当たらないのですＯrz

どうか解決策を教えていただけないでしょうか。
よろしくお願いいたします！

[ 2007/09/29 06:01 ] [ 編集 ]

[ 2789 ] まりもさんへ

アドバイスしようにも、
それだけではなんとも言えないんじゃないかな？

コメント関連のタグ全般をコピペするか、
ブログを実際に見させていただかないと…。

現時点で言えるのは、
「そのタグは問題ありません」
ということだけかと思いますよ。

[ 2007/09/29 17:42 ] [ 編集 ]

[ 2802 ] はじめまして

こちらのテンプレートを使用させて頂いているのですが
standardシリーズで「コメントの投稿」を「記事(本文)」の下に表示させたいのですが上手くいきません。

解決法を教えていただけないでしょうか。
よろしくお願い致します。

[ 2007/09/30 18:02 ] [ 編集 ]

[ 2820 ] 自己解決

自己解決しました。

お騒がせ致しました。

[ 2007/10/02 00:43 ] [ 編集 ]

[ 3136 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2008/02/26 11:42 ] [ 編集 ]

[ 3561 ] はじめまして

はじめまして。オサムといいます。このサイトを参考にブログのカスタマイズをしているのですが、コメント欄を枠つきにしたいのですができないので教えてください。よろしくお願いします。テンプレートは公式のsummerというテンプレートで一ページ目にあります。

[ 2008/10/21 14:00 ] [ 編集 ]

[ 3634 ] 質問です。

はじめまして。lightframeを使わせてもらってます。

lightframeのコメント欄を一つずつ枠で囲み分けないようにする方法を教えて下さい。

[ 2008/12/23 15:04 ] [ 編集 ]

[ 3636 ]

自己解決しました。

[ 2008/12/25 04:47 ] [ 編集 ]

[ 6126 ] 質問です。

いつもこのブログを参考にカスタマイズさせてもらっています。
standard_wide_whiteを使用させてもらっています。
この記事の通りにＨＴＭＬとスタイルシートを書き換えた所、コメントを枠で囲むことはできたのですが、コメントとコメントの間がぴったりとくっついてしまいます。
少し間隔を空けたいのですが、どこをいじれば宜しいでしょうか？

[ 2009/09/20 18:17 ] [ 編集 ]

[ 6131 ] > ＴＫさん

申しわけありません。記事が不適切でした。

記事中のHTMLの記述を修正したのでもう一度確認してください。もし以前の記述が必要なら追記部分に残してあります。

追記部分
http://10plate.blog44.fc2.com/blog-entry-153.html#a20090921

誠に申しわけありません m(__)m

[ 2009/09/21 00:49 ] [ 編集 ]

[ 6159 ] ありがとうございます

いたお様
早速のお返事ありがとうございます。前よりも幾分見やすくなりました。

[ 2009/09/22 15:11 ] [ 編集 ]

[ 6165 ] > ＴＫさん

記事に不備があったことに随分ながいこと気が付きませんでした；
見やすくなって良かったです＾＾

[ 2009/09/22 20:18 ] [ 編集 ]

コメントの投稿