INTEREST

---

FC2ブログ コメント欄の編集方法

1. 1.コメントへの返信方法　-　「コメントの管理」から返信するのが便利です♪
2. 2.コメントの表示を変更　-　このブログのコメント表示のカスタマイズ内容ですっ!!
   • 2-1.コメント表示部分のHTML
   • 2-2.コメント表示部分のCSS
   • 2-3.自分のコメントは背景色を変更
   • 2-4.投稿者名に“敬称”を付けて、自分の名前には“@管理人”を付ける
   • 2-5.自分のコメントは名前の色を変更
3. 3.コメントの入力欄を変更　-　このブログのコメント入力欄のカスタマイズ内容ですっ!!
   • 3-1.コメント入力欄のHTML
   • 3-2.コメント入力欄のCSS

---

1.コメントへの返信方法

まずコメントへの返信方法ですが、FC2ブログのマニュアルを確認してみたところ、特に定まったルールは無く、ブログの管理人も自分の記事へコメントを付ける感じで返信すれば良いとの事。

「FC2ブログ > マニュアル > コメント機能について 」←でも、このマニュアルの内容は古い...ｗ

今では「管理画面」の「コメントの管理」に返信フォームが用意されており、そちらから返信する事で、コメントの件名には自動的に「Re:」が付き、元のコメント本文にも一行ずつ「>」が付いて引用される形になるので、どのコメントに対しての返信なのかが分かりやすくなってる

※元のコメント本文を引用する必要が無い場合は、返信フォームのコメント本文内でキーボードの「Ctrl」+「A」を押して、入力されてる内容を全選択して削除すればOK♪

■コメント返信の流れ

簡単な説明でしたが、以上がコメントへの返信方法です。
すごい基本的な事なんだろうけど... 知らなかった・気付いてなかったって人も居るはず... 私のようにｗ

---

2.コメントの表示を変更

コメントの表示は使ってるテンプレートや、ブログのデザインによって人それぞれ♪
また、表示を変更したい場合は「HTML」や「CSS」を編集する必要があるので、多少知識が無いと難しいかもですが、元々のベースをちょっと変更する位なら、案外簡単に出来ちゃうと思います
このブログでは、下記のようにカスタマイズしてみました♪

　「HTML」や「CSS」を編集する場合は “テンプレートの複製” を作ったりなど、念の為にバックアップを取ってから作業される事をお勧めします。

2-1.コメント表示部分のHTML

具体的な編集箇所はテンプレート次第で異なりますが、「テンプレートの設定」のHTML編集内で
「<!--comment-->」 ～ 「<!--/comment-->」で囲まれてる部分を探せば分かり易いと思います。
※キーボードの「Ctrl」+「F」で検索すればすぐ見つかります ♪
↓カスタマイズしたこのブログのコメント表示部分のHTMLです。

<!--comment-->
<div class="commentfield <%comment_name>1" id="comment<%comment_no>">
<h4 class="comment-header"><!-- ↓吹き出しのアイコン部分 -->
<span class="mark"><i class="fa fa-comment fa-flip-horizontal"></i></span> 
<%comment_title></h4><!-- コメントの件名 -->
<div class="comment-body"><%comment_body></div><!-- コメント本文 -->
<ul class="comment-state">
<li class="comment-date">
<i class="fa fa-pencil-square-o"></i> <!-- アイコン部分 -->
<%comment_year>-<%comment_month>-<%comment_day> ;<!-- コメントの年-月-日 -->
<%comment_hour>:<%comment_minute><!-- コメントを投稿した時間 -->
</li>
<li class="comment-author <%comment_name>3">
<i class="fa fa-user"></i> <!-- アイコン部分 -->
<%comment_name><!-- コメントの投稿者名 -->
<span class="<%comment_name>">さん</span><!-- 投稿者名に敬称を付ける -->
<span class="c <%comment_name>2">@管理人</span><!-- 自分には@管理人を付ける -->
</li>
<li class="comment-author-site">
<script type="text/javascript"><!-- URLのリンクを別ウインドウで開く ここから -->
a="<%comment_url>";
if (a!="") document.write('<a href="'+a+'" target="_blank">
<i class="fa fa-external-link"></i> URL</a>')
</script>
<noscript>
<a href="<%comment_url>" target="_blank">
<i class="fa fa-external-link"></i> URL</a>
</noscript><!-- URLのリンクを別ウインドウで開く ここまで　-->
</li>
<li class="comment-edit">
<a href="<%comment_edit_link>"><!-- コメント編集画面へのリンク -->
<i class="fa fa-pencil-square"></i> <!-- アイコン部分 -->
<%template_edit></a><!-- 「編集」の表記部分 -->
</li>
</ul>
</div>
<!--/comment-->

※アイコン部分には、アイコン型Webフォント「Font Awesome 」を利用してます。
「Font Awesome」のページは英語なので使い方が分からない場合は、下記のブログが参考になります。
「これは便利！アイコン型WebフォントのCDN「Font Awesome」 / Webpark 」様

---

2-2.コメント表示部分のCSS

上記のHTMLに合わせて、CSSも下記のようにカスタマイズしました♪
※CSSの編集は「テンプレートの設定」からスタイルシート編集内で行えます。

div.commentfield {/* コメントの表示スペース */
margin:1.5em 0px 1.5em 15px;
box-shadow:1px 1px 2px 0 #000;
padding:5px 13px 14px 13px;
border:1px #aaa solid;
background:#3d3d3d;
border-radius:5px;
font-size:14px;
}
h4.comment-header {/* コメントの件名 */
margin:0.5em 0;
font-size:16px;
}
h4.comment-header span.mark {/* 吹き出しのアイコン部分 */
margin:0 0.2em;
color:#ffa722;
font-size:20px;
}
ul.comment-state {
margin-top:0.5em;
list-style-type:none;
}
ul.comment-state li {
display:inline;
font-size:15px;
text-shadow:1px 1px 2px #000;
}
li.comment-date { margin-right:0.5em; }/* コメント日時 */
li.comment-author { margin:0 0.5em; }/* コメント投稿者 */
li.comment-author-site { margin:0 0.5em; font-weight:bold; }/* URL */
li.comment-edit { margin:0 0.5em; }/* 編集 */

div.あると♪1{background:#2d2d2d;}/* 自分のコメントは背景色を変更 */
.c{ display:none; }/* 自分以外の投稿者名に@管理人を付けない */
.あると♪{ display:none; }/* 自分のコメントは投稿者名に敬称を付けない */
.あると♪2{ display:inline; } /* 自分のコメントは投稿者名に@管理人を付ける */
.あると♪3{ color:#ffa722; }/* 自分のコメントは投稿者名の色を変更 */

※あると♪＝自分のニックネームです。

---

2-3.自分のコメントは背景色を変更

上記でも説明した通り、テンプレートによって異なるので、一概にここを編集すればOKとは言えませんが、このブログの場合はHTMLソースの2行目にあるdivタグのclass属性に「<%comment_name>1」を付けたし、CSSは34行目にある「div.あると♪1{background:#2d2d2d;}」を追加してます。
<%comment_name>＝コメント投稿者の名前を表示する変数なので、私のニックネーム「あると♪」でコメントをした場合は、CSSの「div.あると♪1」が適用されて背景色が変わると言う感じです。
「background:#2d2d2d;」の部分が変更される背景色なので、ここを変更すれば好きな色に出来ます。

※HTMLソースの2行目にあるdivタグのclass属性は、半角スペースで区切って「commentfield」と「<%comment_name>1」の２つが設定されてる状態です。

---

2-4.投稿者名に“敬称”を付けて、自分の名前には“@管理人”を付ける

上記HTMLソースの「16行目」と「17行目」にある部分で、「<%comment_name>」のすぐ後です。

※このブログでは、自分以外の投稿者名に「さん」を付けて、自分の名前には「@管理人」を付けてます（文字を変更する場合は、HTMLソース内の「さん」と「@管理人」の部分を書き換えればOK）

<%comment_name><!-- コメントの投稿者名 -->
<span class="<%comment_name>">さん</span><!-- 投稿者名に敬称を付ける -->
<span class="c <%comment_name>2">@管理人</span><!-- 自分には@管理人を付ける -->

そして、CSSの部分は「35行目」～「37行目」にある部分です。

.c{ display:none; }/* 自分以外の投稿者名に@管理人を付けない */
.あると♪{ display:none; }/* 自分のコメントは投稿者名に敬称を付けない */
.あると♪2{ display:inline; } /* 自分のコメントは投稿者名に@管理人を付ける */

---

2-5.自分のコメントは名前の色を変更

2-3.「自分のコメントは背景色を変更する」と同じような感じで、投稿者名の色を変更してます。
上記HTMLの「13行目」にある「<li class="comment-author <%comment_name>3">」の部分で、class属性に「<%comment_name>3」を追加してます。
そして、CSSは「38行目」にある「.あると♪3{ color:#ffa722; }」を追加して、投稿者名に適用される色を指定してます。「color:#ffa722;」を変更すれば好きな色に変更出来ます。

投稿者名に敬称を付けたりする方法は、下記のページを参考にさせて頂きました。
分かり易い説明がありますし、他にも色々とカスタマイズする方法が紹介されてます
「 初心者でもできる簡単FC2ブログの作り方 コメント欄周りをカスタマイズしたい！ 」

---

3.コメントの入力欄を変更

カスタマイズ前は各入力欄が縦に並んでるだけの状態だったので、別に必要ないかな？と思ったメールアドレスの入力欄を削除し、残りの入力欄を無駄な空きスペースが出来ないように組み換えてみました

　「HTML」や「CSS」を編集する場合は “テンプレートの複製” を作ったりなど、念の為にバックアップを取ってから作業される事をお勧めします。

3-1.コメント入力欄のHTML

このブログのデザインに合わせた入力欄のHTMLなので、あまり参考にならないかもですが...ｗ
変更箇所はキーボードの「Ctrl」+「F」を使って、「テンプレートの設定」のHTML編集内にある「<form method="post" action="./"」を検索すれば大体分かると思います。

<form method="post" action="./" class="comment-form">
<input type="hidden" name="mode" value="regist" />
<input type="hidden" name="comment[no]" value="<%pno>" />
<div class="wrap-l comment-input-l"><!-- 入力スペース左側 ここから -->
<label for="subject">件名：</label><br />
<input id="subject" type="text" name="comment[title]" value="<%edit_title>" 
class="field comment-space" /><br />
<label for="name">お名前：</label><br />
<input id="name" type="text" name="comment[name]" value="<%cookie_name>" 
class="field comment-space" /><br />
<label for="url">URL：</label><br />
<input id="url" type="text" name="comment[url]" value="<%cookie_url>" 
class="field comment-space" /><br />
<label for="pass" title="任意のパスワードを設定する事で、投稿後にコメントの
修正・削除が可能になります">パスワード：</label><br />
<input id="pass" type="password" name="comment[pass]" size="20" 
class="field comment-space" /><br />
<label for="himitu">非表示にする</label><br />
<input id="himitu" type="checkbox" name="comment[himitu]" />
<%template_private_check><br />
<div class="button">
<input type="submit" value="コメントを投稿する" class="btn" /></div>
</div><!-- 入力スペース左側 ここまで -->
<div class="wrap-l comment-input-r"><!-- 入力スペース右側 ここから -->
<label for="comment">コメント：</label><br />
<textarea id="comment" name="comment[body]" class="field"></textarea>
<p class="comment-Annotation">
※コメントを投稿する際に、任意の編集用パスワードを設定する事で投稿後にコメントの
修正・削除が可能になります。</p>
</div><!-- 入力スペース右側 ここまで -->
<div class="clear"></div><!-- 回り込みの解除 -->
</form>

---

3-2.コメント入力欄のCSS

上記のHTMLに合わせて、CSSも下記のようにカスタマイズしました
※CSSの編集は「テンプレートの設定」からスタイルシート編集内で行えます。

form.comment-form { padding:15px 0px 15px 15px; }
input.comment-space{ margin-bottom:10px; }
div.comment-input-l{ width:235px; }
div.comment-input-r{ width:420px; margin-left:20px; }
p.comment-Annotation{ margin-top:25px; padding-left:1em; text-indent:-1em; }
input.field, textarea.field {/* 入力欄の装飾 */
color:#eee;
padding:6px;
border-radius:5px;
border:solid 1px #bbb;
background:#444;
box-shadow:1px 1px 1px 0px #000 inset;
}
input.field:hover, textarea.field:hover{/* 入力欄にマウスを乗せた時 */
border1px solid #09F;/* 枠線の色を変更 */
}
input#subject,input#name,input#url { width:220px; }
textarea#comment { width:405px; height:220px; }
input#himitu { margin-right:0.5em; }
input.btn {
padding: 5px 10px 5px 10px;
box-shadow:2px 2px 2px 0 #000;
cursor:pointer;
}
.wrap-l { float:left; }
.wrap-r { float:right; }
.clear { clear:both; }

以上が、このブログのコメント表示と入力欄のカスタマイズ内容でした
説明が下手でうまく伝わってないかもなので... 　実際の表示はこの記事下にあるコメントでも見れるようにテストで書き込みを行ってみましたので、そちらをご確認頂ければと思います^^;