訪問者コメントにユーザーアイコンを表示
ずっとずっと、出来たら良いなぁ～と思っていた「管理人以外のコメントにユーザーアイコンを付ける」…。これを叶えてくれる！しかも自動で！！
無いものを作ってくれる有志の方が居るって、本当に有難い事です。m(__)m
コメントしてくれた方のユーザーアイコンが表示されたら、きっと訪問するのもコメントするのも楽しくなるだろうな～と、予てから思っておりました。
過去に私も色々方法を考えた事も有ります。
<%comment_name>とコメント投稿者の名前を使ってclassを設け、入力してもらったURLのプロフィール画像を背景指定してアイコンのように表示する…とか。
管理人コメントのブロック変数が出来る前、当方のテンプレートに『管理人コメントの背景色変更』として同様の方法を使っていましたが、訪問者のコメントアイコンとして使うとなると人数分の名前のclassが必要になってしまうので、せいぜいご常連の方で精一杯だなと諦めていました。。
そんな時にこちらの有益な記事を発見！訪問者毎に自動でユーザーアイコンを表示するプログラムを記事にされております。(^-^)
要約すると「コメント投稿者URLのOGP画像を画像リサイズAPI経由で表示」（簡潔過ぎですが^^;）という方法です。
mochi1999.blog.fc2.com
プログラムとテンプレート内で使用するclass等を合致させるよう改変。
ただ、先方記事に書いてある「Lazysizes」の組み込みについては、当方テンプレに使用している画像遅延JavaScriptがぶつかって表示されない不具合が有ったのでJSの該当部分を削除。
当方のテンプレートで使用できるよう調整し、製作者mochi様に承諾を頂きましたので、カスタマイズ方法として記事掲載致します。
'20/06/08のテンプレート更新で、コメント表示部分を改変致しました。
そのまま下記JavaScriptを追加して頂く事で訪問者アイコンが表示可能になります。（JSを加えなければ管理者コメントのみアイコンが表示されます。）
【 ご注意 】
（'20/06/08 更新日以降のテンプレートにカスタマイズを加える場合は、②のみ追記して下さい。①と③は必要ありません。）
① 先ず、ご利用のテンプレートHTML編集枠内に有る下記の部分を探して下さい。
検索方法：PCのキーボードで『Ctrl＋Fキー』を押して開いた窓に↓を入れて検索します。
見付かった場所 <!--コメント表示--> から <!--/コメント表示--> までの部分を下記に差し替えて下さい。
但し、下記のカスタマイズ
・ コメント投稿欄の位置を上下変更（１）
・ コメント投稿欄の位置を上下変更（２）
をされている場合は、このHTMLを使用せず記事最下段の 『Read More』 をクリックして表示されたHTMLソースを貼り換え、その後②と③の作業をお願い致します。
（'20/06/08 更新日以降のテンプレートにカスタマイズを加える場合は、このJSのみ追記して下さい。①と③は必要ありません。）
② 次に、HTML編集枠内最下に有るJavaScript群の一番下（</body>の上）に、下記JavaScriptを追記して下さい。
（'20/06/08 更新日以降のテンプレートにカスタマイズを加える場合は、②のみ追記して下さい。①と③は必要ありません。）
③ 最後に、スタイルシート編集枠内最下に下記スタイルを追記して［更新］ボタンを押して下さい。
（ご利用のテンプレート名をクリックして表示して下さい。）
後は『更新』ボタンを押して完了です。
不具合が有った時のために『複製』を作ってから作業する事をお勧め致します。
製作者のmochi様、この度は「皆が待ち望んでいた形のご提供」有難うございました！
mochi1999.blog.fc2.com
①の部分、コメントの投稿欄を上下変更するカスタマイズをされている場合はこちらのHTMLをご利用下さい。
↓
コメント投稿欄の上下を変更するカスタマイズをされている場合は<!--コメント表示--> から <!--/コメント表示--> までの部分を下記に差し替えて下さい。
その後、②と③の作業をお願い致します。
表示位置に不具合が有った場合はお問い合わせ下さいませ。m(__)m
無いものを作ってくれる有志の方が居るって、本当に有難い事です。m(__)m
コメントしてくれた方のユーザーアイコンが表示されたら、きっと訪問するのもコメントするのも楽しくなるだろうな～と、予てから思っておりました。
過去に私も色々方法を考えた事も有ります。
<%comment_name>とコメント投稿者の名前を使ってclassを設け、入力してもらったURLのプロフィール画像を背景指定してアイコンのように表示する…とか。
管理人コメントのブロック変数が出来る前、当方のテンプレートに『管理人コメントの背景色変更』として同様の方法を使っていましたが、訪問者のコメントアイコンとして使うとなると人数分の名前のclassが必要になってしまうので、せいぜいご常連の方で精一杯だなと諦めていました。。
そんな時にこちらの有益な記事を発見！訪問者毎に自動でユーザーアイコンを表示するプログラムを記事にされております。(^-^)
要約すると「コメント投稿者URLのOGP画像を画像リサイズAPI経由で表示」（簡潔過ぎですが^^;）という方法です。
FC2ブログの訪問者コメントで、自動で訪問者ごとにユーザーアイコンを表示してみました。
クロスドメインの向こう側には、どんな情報が何が待っているのかしら？訪問者判別とクロスドメイン問題。現状FC2ブログの一般的なテンプレートにおいて、訪問者コメントのユーザーアイコンは誰が書き込んでも同じデザイン画像を表示させています。同じFC2ブロガーがログイン状態でコメントを書き込んでくれたとしても、管理者以外のコメント者を判別するようなシステムとなってはおらず、テンプレート変数などによ...
プログラムとテンプレート内で使用するclass等を合致させるよう改変。
ただ、先方記事に書いてある「Lazysizes」の組み込みについては、当方テンプレに使用している画像遅延JavaScriptがぶつかって表示されない不具合が有ったのでJSの該当部分を削除。
当方のテンプレートで使用できるよう調整し、製作者mochi様に承諾を頂きましたので、カスタマイズ方法として記事掲載致します。
'20/06/08のテンプレート更新で、コメント表示部分を改変致しました。
そのまま下記JavaScriptを追加して頂く事で訪問者アイコンが表示可能になります。（JSを加えなければ管理者コメントのみアイコンが表示されます。）
【 ご注意 】
- 訪問者の画像の表示は、コメント投稿時のURL記述と事前のOGP設定が必須です。これが無いと表示されません。
OGPの設定は、FC2ブログ管理画面左のメニュー『環境設定』→『ブログの設定』→『メタタグの設定』でOGP設定を有効にし、OGP画像を設定して下さい。 - カスタマイズの利用についてはあくまでも自己責任で行って下さい。
- API経由ですので、サーバー次第でアイコン画像が表示されない事も有ります。
OGPの画像を変更した場合、画像反映に時間を要しますので暫くお待ち下さい。 - 当方テンプレートにおいての不具合等は、先方に直接問い合わせをしないで下さい。
- 使用して何らかの不具合が生じた場合は、速やかにJavaScript部分を削除し利用を停止して下さい。
（'20/06/08 更新日以降のテンプレートにカスタマイズを加える場合は、②のみ追記して下さい。①と③は必要ありません。）
① 先ず、ご利用のテンプレートHTML編集枠内に有る下記の部分を探して下さい。
検索方法：PCのキーボードで『Ctrl＋Fキー』を押して開いた窓に↓を入れて検索します。
<!--コメント表示-->見付かった場所 <!--コメント表示--> から <!--/コメント表示--> までの部分を下記に差し替えて下さい。
但し、下記のカスタマイズ
・ コメント投稿欄の位置を上下変更（１）
・ コメント投稿欄の位置を上下変更（２）
をされている場合は、このHTMLを使用せず記事最下段の 『Read More』 をクリックして表示されたHTMLソースを貼り換え、その後②と③の作業をお願い致します。
<!--コメント表示-->
<!--comment-->
<div class="com2" id="comment<%comment_no>"></div>
<div class="com_block<!--comment_author--> author-comment<!--/comment_author-->">
<div class="border-container">
<div class="user-icon">❦
<!--comment_author--><img class="author-icon" src="<%image>" alt="<%author_name>"><!--/comment_author--></div>
<h2 class="com_title"><%comment_title></h2>
<%comment_body>
<div class="com_state">
<%comment_year>-<%comment_month>-<%comment_day><!-- 投稿時間不要の場合は ここから-->-<%comment_hour>:<%comment_minute><!-- 投稿時間不要の場合はここまでを削除 --><span class="visitor-name"> <%comment_name><span id="com-no<%comment_no>"></span><br>
<!--comment_author--><!-- <!--/comment_author--><script>var a="<%comment_url>";if (a!="") var target=document.getElementById("com-no<%comment_no>").insertAdjacentHTML("beforebegin", '<a href="'+a+'" target="_blank" rel="noopener noreferrer"> URL</a>');</script><!--comment_author--> --><!--/comment_author--></span> [ <!--comment_author--><!-- <!--/comment_author--><a href="#blogcomment" onClick="changeTextValue('Re: <%comment_name> 様へ')" title="このコメントに返信する">返信</a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a href="#blogcomment" onClick="changeTextValue('Re: <%author_name> 様へ')" title="このコメントに返信する">返信</a><!--/comment_author--> <!--comment_edit-->* <a href="<%comment_edit_link>" title="<%template_edit_comment>">編集</a><!--/comment_edit--> ]<span style="text-align:right;margin-left:10px;font-size:10px;"><a href="#blogcomment" title="投稿欄へ">▲</a></span></div>
</div>
</div>
<!--/comment-->
<!--/コメント表示-->（'20/06/08 更新日以降のテンプレートにカスタマイズを加える場合は、このJSのみ追記して下さい。①と③は必要ありません。）
② 次に、HTML編集枠内最下に有るJavaScript群の一番下（</body>の上）に、下記JavaScriptを追記して下さい。
<!--permanent_area-->
<script>
document.addEventListener("scroll",function(e){$(function(){$(".border-container").each(function(){var e=$(".visitor-name",this).children("a").attr("href"),t=$(".user-icon",this).children("img").attr("src");e&&!t&&$.ajax({type:"GET",url:"https://api-cdn.embedly.com/1/extract?key=fd92ebbc52fc43fb98f69e50e7893c13&url="+e,dataType:"json",cache:!1,crossDomain:!0,context:this,timeout:5e3,success:function(e){var t="";e.authors.length&&(t=e.authors[0].name),e.images.length&&$(".user-icon",this).append("<img class='author-icon' src='https://i-cdn.embed.ly/1/display/resize?width=64&compresspng=true&quality=60&key=fd92ebbc52fc43fb98f69e50e7893c13&url="+e.images[0].url+"' alt='"+t+"' data-sizes='auto'>")}})})}),e.target.removeEventListener(e.type,arguments.callee)});
/* -reference source web page- https://mochi1999.blog.fc2.com/blog-entry-1834.html */
</script>
<!--/permanent_area-->（'20/06/08 更新日以降のテンプレートにカスタマイズを加える場合は、②のみ追記して下さい。①と③は必要ありません。）
③ 最後に、スタイルシート編集枠内最下に下記スタイルを追記して［更新］ボタンを押して下さい。
（ご利用のテンプレート名をクリックして表示して下さい。）
youth_resp2,3c
genial_resp2c,3c
serene_resp2c,3c
ct_responsive
al_responsive2c,3c
dt21_ryo,ryo_2c
candy,green2c3c
lace-al,lace-dc
後は『更新』ボタンを押して完了です。
不具合が有った時のために『複製』を作ってから作業する事をお勧め致します。
製作者のmochi様、この度は「皆が待ち望んでいた形のご提供」有難うございました！
富士宮で貯蓄と資産運用
定期預金や投資など資産運用をアニメぬり絵画像とともに紹介。
①の部分、コメントの投稿欄を上下変更するカスタマイズをされている場合はこちらのHTMLをご利用下さい。
↓
コメント投稿欄の上下を変更するカスタマイズをされている場合は<!--コメント表示--> から <!--/コメント表示--> までの部分を下記に差し替えて下さい。
その後、②と③の作業をお願い致します。
<!--コメント表示-->
<!--comment-->
<div class="com2" id="comment<%comment_no>"></div>
<div class="com_block <!--comment_author-->author-comment<!--/comment_author-->">
<div class="border-container">
<div class="user-icon">❦
<!--comment_author--><img class="author-icon" src="<%image>" alt="<%author_name>"><!--/comment_author--></div>
<h2 class="com_title"><%comment_title></h2>
<%comment_body>
<div class="com_state">
<%comment_year>-<%comment_month>-<%comment_day><!-- 投稿時間不要の場合は ここから-->-<%comment_hour>:<%comment_minute><!-- 投稿時間不要の場合はここまでを削除 --><span class="visitor-name"> <%comment_name><span id="com-no<%comment_no>"></span><br>
<!--comment_author--><!-- <!--/comment_author--><script>var a="<%comment_url>";if (a!="") var target=document.getElementById("com-no<%comment_no>").insertAdjacentHTML("beforebegin", '<a href="'+a+'" target="_blank" rel="noopener noreferrer"> URL</a>');</script><!--comment_author--> --><!--/comment_author--></span> [ <!--comment_author--><!-- <!--/comment_author--><a href="#blogcomment" onClick="changeTextValue('Re: <%comment_name> 様へ')" title="このコメントに返信する">返信</a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a href="#blogcomment" onClick="changeTextValue('Re: <%author_name> 様へ')" title="このコメントに返信する">返信</a><!--/comment_author--> <!--comment_edit-->* <a href="<%comment_edit_link>" title="<%template_edit_comment>">編集</a><!--/comment_edit--> ]<span style="text-align:right;margin-left:10px;font-size:10px;"><a href="#blogcomment" title="投稿欄へ">▼</a> <a href="#blogcomment-top" title="CommentTopへ">▲</a></span></div>
</div>
</div>
<!--/comment-->
<!--/コメント表示-->表示位置に不具合が有った場合はお問い合わせ下さいませ。m(__)m
↻
Re: 徳川たぬこ 様へ
で、早速見に伺いましたら…ちょっとズレておりました。^^;修正箇所をコメントしておきましたので、お手数ですが調整してみて下さい。
お手数をお掛け致します。m(__)m
[ 返信 * 編集 ]▼ ▲