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

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

コメントの投稿者名と日付をコメントタイトルの右に表示する

記事の右下にあるコメントの投稿者名と日付を、コメントタイトルの右側に表示する方法を紹介します。

HTMLを編集します。
赤い部分を加え、青い部分を削除してください。

【standardの場】

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

<p><strong><a name="comment<%comment_no>" id="comment<%comment_no>"><%comment_title></a> <%comment_url+name> [ <%comment_year>/<%comment_month>/<%comment_day> <%comment_hour>:<%comment_minute> ] </strong></p>
<%comment_body>
<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>

【lightframeの場合】

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

<div class="comment_outline">
<div class="comment_title"><a name="comment<%comment_no>" id="comment<%comment_no>">[ <%comment_no> ] <%comment_title></a> <%comment_url+name> [ <%comment_year>/<%comment_month>/<%comment_day> <%comment_hour>:<%comment_minute> ] </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>

これでコメントの投稿者名と日付をコメントタイトルの右に表示することができます。

関連記事

アイコン付きサイトマップ（親子カテゴリ対応） (2009/06/09)
アイコン付きサイトマップ（親子カテゴリ非対応） (2009/06/09)
親子カテゴリの折りたたみ (2009/06/02)
コメントの投稿者名と日付をコメントタイトルの右に表示する (2009/05/31)
コメントに番号（通番）を表示する (2009/05/26)
コメント投稿欄を記事のすぐ下に表示する (2009/05/26)
便利ナビのリンク先を個別記事にする (2009/05/19)

[ 2009/05/31 23:33 ] カスタマイズ共通カスタマイズ | TB(0) | CM(23)

≪ 親子カテゴリの折りたたみ | HOME | プラグインの間隔 (standardシリーズ) ≫

[ 4558 ]

ありがとうございます。参考にさせてもらいます。

それと編集して思ったのですが、URLを入れた人は名前からリンクされますがこの時の文字色は全体で決めてあるリンク色になりますよね？
このコメントのリンク色を個別に変更するにはどうすれば良いのでしょうか。

それとコメント番号ではとても参考になったのですが、数字が通番ではなく
記事ごとに１～のようにはできるのでしょうか。
通版でも満足しているのですが総コメント数が分かってしまうのがなんとも…

欲張りで記事違いな返答ですがよろしくお願いします。

[ 2009/06/01 19:51 ] [ 編集 ]

[ 4559 ]

頑張ってますねーーー。
本当に充実してきましたね。

いたおさん、そのうち本当お会いしましょうね。
最近近隣のウェブ運営者の方と二人お会いしたんですが、
とても楽しかったです。
掲示板とかでは話してたので、
まるで同窓会のようでした。

[ 2009/06/01 22:45 ] [ 編集 ]

[ 4562 ]

HTMLの
<%comment_url+name>
を
<span class="namelink"><%comment_url+name></span>
として

スタイルシート末尾に

.namelink a:link { color: #000000; }
.namelink a:visited { color: #000000; }
.namelink a:hover { color: #000000; }
.namelink a:active { color: #000000; }

と加えてください。

この記事も参考にしてください。

リンクのスタイルを変える
http://10plate.blog44.fc2.com/blog-entry-23.html

[ 2009/06/02 02:18 ] [ 編集 ]

[ 4563 ] > あなろぐさん

ネットで交流してる方とお会いするのって楽しそうですね！
小心者なのでドキドキしますが私も挑戦したいです＾＾

あなろぐさんと会ったときのためにネタを集めておきますね。

[ 2009/06/02 02:40 ] [ 編集 ]

[ 5498 ] お世話になってます

「コメントタイトルの右側に表示」はできたのですが、記事のタイトルのように、タイトルバーの右端に表示するようにはできないのでしょうか?
「記事のタイトルバーの右端に日付を表示する」を参考に色々やってみましたが、あたりまえの様に私ではできませんでした。
ヨロシクお願いいたします。

[ 2009/08/18 08:30 ] [ 編集 ]

[ 5499 ] ▼さくらいさん

タイトルは左、日付は右にするのなら

【スタイルシートでタイトルと日付を左右に振り分け】
http://tanpoko.blog70.fc2.com/blog-entry-683.html
こちらの方法で出来ます。

[ 2009/08/18 12:09 ] [ 編集 ]

[ 5500 ] ちゃんさんありがとうございます。

ちゃんさんからコメント頂けるとは…ありがとうございます。

HTMLのコメント表示の下に
<div class="comment_date">
<%comment_url+name> [<%comment_month>/<%comment_day>]</div>
入れて、

CSSに
/*コメント横日付*/
.comment_date{
float: right;
font-size:10pt;
color:#ffffff;
}
.namelink a:link { color: #ffffff; }
.namelink a:visited { color: #ffffff; }
.namelink a:hover { color:#DCDCDC; text-decoration:none; }
.namelink a:active { color:#ffffff; text-decoration:none; }

入れてますが、ダメ？みたいなんですね。
いま、ダメなままにしてあります。
ヨロシクお願いいたします。

[ 2009/08/18 12:21 ] [ 編集 ]

[ 5502 ] ▼さくらいさん

コメント欄用は
【続・スタイルシートでタイトルと日付を左右に振り分け】
http://tanpoko.blog70.fc2.com/blog-entry-835.html
になります。
さくらいさんのやりたいカスタマイズ(コメントタイトルに投稿者名)とは違ってしまうのですが…

ただ私が現在このカスタマイズをしていないので、Firefoxとsafariの最新バージョンでの動作確認をしていません(^^;)
申し訳無いです。

今晩あたり試してみますね

[ 2009/08/18 17:36 ] [ 編集 ]

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

本当に素早いご返事ありがとうございます。

だいぶ近づいてきましたが、
まだ、コメントタイトルと日付が、二行になるのですが?
これは、こちらのhtmlが悪いのでしょうか?

色々とお手数かけてすいません。

[ 2009/08/18 20:35 ] [ 編集 ]

[ 5509 ] > さくらいさん、ちゃんさん

> さくらいさん
左右に余白を取りすぎています。

comment_date{
padding: 0px 50px 0px 50px;/* 文字位置 (上･右・下・左) */
}

ここをもっと小さい値にしてみてください。

> ちゃんさん
いつもありがとうございます m(__)m
この記事もまたいつか紹介させてください＾＾

[ 2009/08/18 21:54 ] [ 編集 ]

[ 5510 ] いたおさん、こんばんは

何度もすいません。

ちゃんさんからは、
padding: 5px 20px 0px 0px;
と言われたのですが、直らず。

は、いま、
padding: 0px 0px 0px 0px;/* 文字位置 (上･右・下・左)
にしました。
でも、直らずです。トホホです。

[ 2009/08/18 22:13 ] [ 編集 ]

[ 5511 ] ▼さくらいさん

遅くなりましたm(__)m
ちょっと組んでみましたので、こちらと差し替えてみて下さい。



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

<div class="comment_outline">
<div class="comment_date">
<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>

<script type="text/javascript">
nw(<%comment_year>,<%comment_month>,<%comment_day>,<%comment_hour>)
</script>

</div>
<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">
[ <a href="<%comment_edit_link>" title="コメントを編集する">編集</a> ]
</div>
</div>
</div>



※スタイルシートは以下で

.comment_date{
font-size:10pt; /* 文字サイズ */
color:#ffffff; /* 文字色 */
padding: 5px 20px 0px 0px; /* 文字位置 (上･右・下・左) */
float: right;
}

ただしやはりFirefoxでの表示が…il||li＿|￣|○ il||li
記事タイトルのほうは大丈夫なんですけれど何故でしょう(泣)

[ 2009/08/18 22:42 ] [ 編集 ]

[ 5512 ] > さくらいさん、ちゃんさん

大きな見落としがありました。

スタイルシートのクラス名の前にはドット「.」をつけてください。これが無いためにスタイルが効いていなかったようです。

comment_date{
↓
.comment_date{

[ 2009/08/18 22:50 ] [ 編集 ]

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

まさかお二人からご返事頂けるとは、ありがとうございました。

[5511]に差し替えて、[5512]のようにドットを入れて、とりあえず改行はしなくなりました。
後は（オイオイ）、
記事が　　「タイトルNEW!　　　　日付」
コメントが「タイトル　　　　NEW!日付」
となってるのをどちらかに統一して、
文字色を丁寧に拾って、統一できるように
直してみたいと思います。

ありがとうございました。

[ 2009/08/18 23:17 ] [ 編集 ]

[ 5514 ] > さくらいさん

IEでは表示されるようになりましたが、Firefoxでは以前のままなのです。これを解決する方法が解ればまた記事にしますね。

[ 2009/08/19 00:31 ] [ 編集 ]

[ 5515 ] いたおさんへ

そうなんです…記事タイトル欄ではいけるんですが、コメント欄だとFirefoxで崩れてしまい…
元記事にも記載してありますが、どうにもこうにも出来ませんでしたorz

いたお師匠、いい解決策を是非お願い致します！
他力本願ですみません

[ 2009/08/19 00:45 ] [ 編集 ]

[ 5518 ] > ちゃんさん、さくらいさん

記事を掲載したのでこちらを参考にしてください。
多分これで解決すると思います＾＾

Firefox等でCSSが反映されないときは
http://10plate.blog44.fc2.com/blog-entry-278.html

[ 2009/08/19 02:47 ] [ 編集 ]

[ 5522 ] すっきりしました

深夜遅くまでありがとうございます。

先ほど、全角スペースは撤去して、
私としては、非常にすっきりしました。

原因は、「全角スペース」だったんですね。
また一つ勉強させて頂きました。
本当にありがとうございました。

[ 2009/08/19 09:42 ] [ 編集 ]

[ 5527 ] > さくらいさん

IEだけでなく、Firefoxでも表示されるようになりました。
解決して良かったです＾＾

[ 2009/08/19 19:50 ] [ 編集 ]

[ 5530 ] 本当にありがとうございました。

お礼と言っては何ですが、
今、コメントの背景色も、
管理人で色を変えてみました。

さすがに、タイトルの色変えは、
してませんが…

本当にありがとうございました。

[ 2009/08/19 20:30 ] [ 編集 ]

[ 5532 ] > さくらいさん

さらにカスタマイズが進んでますね＾＾
解決できないときもありますが、困ったことがあればまた何でも聞いてください。

[ 2009/08/19 20:46 ] [ 編集 ]

[ 6013 ] 質問です＾＾；

いつもお世話になってますг●
standard_monotoneを使っています。コメント欄の『題名』、『URL』、『PASS』、『コメント機能』、『管理人だけ表示』を消すことは出来ますか？
名前とコメント欄と送信だけが欲しいのですが。
あと、コメントNo,の付け方を教えて頂けたら嬉しいです。
よろしくお願いしますг●

[ 2009/09/12 16:36 ] [ 編集 ]

[ 6018 ] > もるたさん

以下の記事を参考にしてください。

コメント欄の不必要な項目を消す
http://10plate.blog44.fc2.com/blog-entry-305.html

コメントに番号（通番）を表示する
http://10plate.blog44.fc2.com/blog-entry-214.html

[ 2009/09/12 19:53 ] [ 編集 ]

コメントの投稿