スポンサーサイト

 

--.--.--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!
-------- | スポンサー広告 | | | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/36-b6ec4d8c

「スポンサーサイト」へのトラックバック

- TrackBack -


「スポンサーサイト」へのコメント

- Comment -

ここがコメントの件名ですっ!!

コメントの表示と入力スペースがちょっと大きかったかな?
まぁいっか...^^;

ちなみにタグを入力した場合は、そのまま表示されます。
<p>あああああ</p>

URLを入力した場合は、自動的にリンクになります。(クリックすると別窓で開きます)
http://interest2014.blog.fc2.com/

↓コメントをくれた方のお名前や、URLが分かり易いように、ちょっと意識してみました♪
  • 2014-10-10 23:53
  • あると♪さん@管理人
  • 編集

あると♪さんはじめまして!

当ブログに来場とコメントありがとうございました。

あると♪さんも頑張っておられますね! 私も頑張らなければ・・・と再認識いたしました^^

記事を拝見させていただきましたが私同様に初心者さんのようで親しみを感じました。

今後ともお互いに頑張って「切磋琢磨」していきましょう。

また立ち寄らせていただきますので宜しくお願いいたします。
  • 2014-10-11 23:55
  • T.Oさん@管理人
  • 編集

Re: あると♪さんはじめまして!

> T.Oさん

ご丁寧にありがとうございます♪
私はこんな感じでマイペースな更新頻度ですが、まずは3ヶ月継続を目標に頑張ってみますので
またいつでもお立ち寄り下さい^^

T.Oさんのブログにもまたお邪魔させて頂きますね♪
  • 2014-10-12 00:25
  • あると♪さん@管理人
  • 編集

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
  • 2015-07-06 12:24
  • -さん@管理人
  • 編集

承認待ちコメント

このコメントは管理者の承認待ちです
  • 2015-09-25 08:58
  • -さん@管理人
  • 編集

承認待ちコメント

このコメントは管理者の承認待ちです
  • 2016-09-27 22:14
  • -さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

コメントの表示と入力欄をカスタマイズ

 

2014.10.10

コメントの表示と入力欄をカスタマイズ  FC2ブログ コメント欄の編集をやってみたっ!! 

先日このブログに「初コメント」を頂きましたぁ~♪w
しかし、今まで色んなとこをカスタマイズした割りに「コメント」部分はノーマークでした...  なんせ返信方法さえ分かって無かった...^^;
そんな状況だったので、これを機に管理画面からの“コメントの返信”や“コメントの表示及び入力欄のカスタマイズ”をやってみました
個人的にはイイ感じの表示に出来たと思うし、コメントの返信もバッチリ覚えたので、後はコメントを貰える位の内容を...w(それが問題



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


  1. 1.コメントへの返信方法 - 「コメントの管理」から返信するのが便利です♪
  2. 2.コメントの表示を変更 - このブログのコメント表示のカスタマイズ内容ですっ!!
  3. 3.コメントの入力欄を変更 - このブログのコメント入力欄のカスタマイズ内容ですっ!!



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


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

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

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

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


■コメント返信の流れ
① コメントの管理をクリック FC2ブログの管理画面
② 本文/詳細・返信をクリック コメントの管理
③ 返信内容を入力して送信 コメントの詳細と返信フォーム

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




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つが設定されてる状態です。




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なので、あまり参考にならないかもですが...w
変更箇所はキーボードの「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; }


以上が、このブログのコメント表示と入力欄のカスタマイズ内容でした
説明が下手でうまく伝わってないかもなので...  実際の表示はこの記事下にあるコメントでも見れるようにテストで書き込みを行ってみましたので、そちらをご確認頂ければと思います^^;
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!


関連記事
2014-10-10 | その他 | コメント(6) | トラックバック(0) | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/36-b6ec4d8c

「コメントの表示と入力欄をカスタマイズ」へのトラックバック

- TrackBack -


「コメントの表示と入力欄をカスタマイズ」へのコメント

- Comment -

ここがコメントの件名ですっ!!

コメントの表示と入力スペースがちょっと大きかったかな?
まぁいっか...^^;

ちなみにタグを入力した場合は、そのまま表示されます。
<p>あああああ</p>

URLを入力した場合は、自動的にリンクになります。(クリックすると別窓で開きます)
http://interest2014.blog.fc2.com/

↓コメントをくれた方のお名前や、URLが分かり易いように、ちょっと意識してみました♪
  • 2014-10-10 23:53
  • あると♪さん@管理人
  • 編集

あると♪さんはじめまして!

当ブログに来場とコメントありがとうございました。

あると♪さんも頑張っておられますね! 私も頑張らなければ・・・と再認識いたしました^^

記事を拝見させていただきましたが私同様に初心者さんのようで親しみを感じました。

今後ともお互いに頑張って「切磋琢磨」していきましょう。

また立ち寄らせていただきますので宜しくお願いいたします。
  • 2014-10-11 23:55
  • T.Oさん@管理人
  • 編集

Re: あると♪さんはじめまして!

> T.Oさん

ご丁寧にありがとうございます♪
私はこんな感じでマイペースな更新頻度ですが、まずは3ヶ月継続を目標に頑張ってみますので
またいつでもお立ち寄り下さい^^

T.Oさんのブログにもまたお邪魔させて頂きますね♪
  • 2014-10-12 00:25
  • あると♪さん@管理人
  • 編集

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
  • 2015-07-06 12:24
  • -さん@管理人
  • 編集

承認待ちコメント

このコメントは管理者の承認待ちです
  • 2015-09-25 08:58
  • -さん@管理人
  • 編集

承認待ちコメント

このコメントは管理者の承認待ちです
  • 2016-09-27 22:14
  • -さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

▼クリックすると配色が変更されます  
このボタンの設置方法は こちら♪

White
Black

プロフィールClick

プロフィール画像

Author:あると♪
ブログ開始: 日目
公開記事数:

Webサイト製作の勉強にと思ってブログのカスタマイズに挑戦してる初心者です♪その他にも気になった事、興味がある事などを気ままに書いてますっ!!

当ブログのご案内は こちら♪

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。