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

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

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-->
<!--▲コメント表示▲-->

関連記事
[ 1417 ] ありがとうございます
いたおさん、こんばんは。

前回に引き続き、再び記事にしていただいてありがとうございます。早速変更してみたんですが、とても見やすくなって大満足です。変更の際にソースをちょっとアレンジして、コメントの枠の幅と記事の枠の幅を揃えてみました。
[ 2007/03/17 01:32 ] [ 編集 ]
[ 1436 ] > *chel* さん
アレンジお見事です。*chel* さん。
コメント枠と記事枠の幅が揃うととても見やすいですね^^
[ 2007/03/19 00:09 ] [ 編集 ]
[ 1472 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2007/03/21 21:12 ] [ 編集 ]
[ 2788 ] 初めまして
こちらのサイトにはいつもお世話になっています。
今まで分からないことがあってもなんとか自己解決してきたんですが今回はお手上げです…

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

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

どうか解決策を教えていただけないでしょうか。
よろしくお願いいたします!
[ 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を使用させてもらっています。
この記事の通りにHTMLとスタイルシートを書き換えた所、コメントを枠で囲むことはできたのですが、コメントとコメントの間がぴったりとくっついてしまいます。
少し間隔を空けたいのですが、どこをいじれば宜しいでしょうか?
[ 2009/09/20 18:17 ] [ 編集 ]
[ 6131 ] > TKさん
申しわけありません。記事が不適切でした。

記事中の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 ] > TKさん
記事に不備があったことに随分ながいこと気が付きませんでした;
見やすくなって良かったです^^
[ 2009/09/22 20:18 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
09 | 2023/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

09 | 2023/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
ユーザータグ


△ ページトップへ戻る