Top Page › Template › カスタマイズ › 訪問者コメントにユーザーアイコンを表示

訪問者コメントにユーザーアイコンを表示

2020-06-08 (Mon) 23:57

ずっとずっと、出来たら良いなぁ~と思っていた「管理人以外のコメントにユーザーアイコンを付ける」…。これを叶えてくれる!しかも自動で!!
無いものを作ってくれる有志の方が居るって、本当に有難い事です。m(__)m

コメントしてくれた方のユーザーアイコンが表示されたら、きっと訪問するのもコメントするのも楽しくなるだろうな~と、予てから思っておりました。
過去に私も色々方法を考えた事も有ります。
<%comment_name>とコメント投稿者の名前を使ってclassを設け、入力してもらったURLのプロフィール画像を背景指定してアイコンのように表示する…とか。
管理人コメントのブロック変数が出来る前、当方のテンプレートに『管理人コメントの背景色変更』として同様の方法を使っていましたが、訪問者のコメントアイコンとして使うとなると人数分の名前のclassが必要になってしまうので、せいぜいご常連の方で精一杯だなと諦めていました。。

そんな時にこちらの有益な記事を発見!訪問者毎に自動でユーザーアイコンを表示するプログラムを記事にされております。(^-^)
要約すると「コメント投稿者URLのOGP画像を画像リサイズAPI経由で表示」(簡潔過ぎですが^^;)という方法です。

FC2ブログの訪問者コメントで、自動で訪問者ごとにユーザーアイコンを表示してみました。

クロスドメインの向こう側には、どんな情報が何が待っているのかしら?
訪問者判別とクロスドメイン問題。
現状FC2ブログの一般的なテンプレートにおいて、訪問者コメントのユーザーアイコンは誰が書き込んでも同じデザイン画像を表示させています。
同じFC2ブロガーがログイン状態でコメントを書き込んでくれたとしても、管理者以外のコメント者を判別するようなシステムとなってはおらず、テンプレート変数などによ...

プログラムを使用するにはjQueryが必要になりますが、弊テンプレートには初めから入っておりますので利用は可能。
プログラムとテンプレート内で使用するclass等を合致させるよう改変。
ただ、先方記事に書いてある「Lazysizes」の組み込みについては、当方テンプレに使用している画像遅延JavaScriptがぶつかって表示されない不具合が有ったのでJSの該当部分を削除。
当方のテンプレートで使用できるよう調整し、製作者mochi様に承諾を頂きましたので、カスタマイズ方法として記事掲載致します。

'20/06/08のテンプレート更新で、コメント表示部分を改変致しました。
そのまま下記JavaScriptを追加して頂く事で訪問者アイコンが表示可能になります。(JSを加えなければ管理者コメントのみアイコンが表示されます。)

【 ご注意 】
  • 訪問者の画像の表示は、コメント投稿時のURL記述と事前のOGP設定が必須です。これが無いと表示されません。
    OGPの設定は、FC2ブログ管理画面左のメニュー『環境設定』→『ブログの設定』→『メタタグの設定』でOGP設定を有効にし、OGP画像を設定して下さい。
  • カスタマイズの利用についてはあくまでも自己責任で行って下さい。
  • API経由ですので、サーバー次第でアイコン画像が表示されない事も有ります。
    OGPの画像を変更した場合、画像反映に時間を要しますので暫くお待ち下さい。
  • 当方テンプレートにおいての不具合等は、先方に直接問い合わせをしないで下さい。
  • 使用して何らかの不具合が生じた場合は、速やかにJavaScript部分を削除し利用を停止して下さい。




① 先ず、ご利用のテンプレートHTML編集枠内に有る下記の部分を探して下さい。
検索方法:PCのキーボードで『Ctrl+Fキー』を押して開いた窓に↓を入れて検索します。
<!--コメント表示-->

見付かった場所 <!--コメント表示--> から <!--/コメント表示--> までの部分を下記に差し替えて下さい。
但し、コメントの投稿欄を上下変更するカスタマイズをされている場合は このHTMLを使用せず、記事最下段の 『Read More』 をクリックして表示されたHTMLソースを貼り換え、その後②と③の作業をお願い致します。
コメント投稿欄の位置を上下変更(1)
コメント投稿欄の位置を上下変更(2)

<!--コメント表示-->
<!--comment-->
<p class="com2" id="comment<%comment_no>"></p>
<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>
<h3 class="com_title"><%comment_title></h3>
<%comment_body>
<div class="com_state">
<%comment_year>-<%comment_month>-<%comment_day><!-- 投稿時間不要の場合は ここから-->-<%comment_hour>:<%comment_minute><!-- 投稿時間不要の場合はここまでを削除 --><span class="visitor-name"> <a href="<%comment_url>" target="_blank" rel="noopener"><%comment_name></a> </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-->
<!--/コメント表示-->



② 次に、HTML編集枠内最下に有るJavaScript群の一番下(</body>の上)に、下記JavaScriptを追記して下さい。
'20/06/08 更新日以降のテンプレートにカスタマイズを加える場合は、このJSのみ追記して下さい。①と③は必要ありません。

<!--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-->



③ 最後に、スタイルシート編集枠内最下に下記スタイルを追記して[更新]ボタンを押して下さい。
(ご利用のテンプレート名をクリックして表示して下さい。)









後は『更新』ボタンを押して完了です。
不具合が有った時のために『複製』を作ってから作業する事をお勧め致します。
製作者のmochi様、この度は「皆が待ち望んでいた形のご提供」有難うございました!

富士宮で貯蓄と資産運用

定期預金や投資など資産運用をアニメぬり絵画像とともに紹介。



コメント投稿欄の上下を変更するカスタマイズをされている場合は<!--コメント表示--> から <!--/コメント表示--> までの部分を下記に差し替えて下さい。
その後、②と③の作業をお願い致します。

<!--コメント表示-->
<!--comment-->
<p class="com2" id="comment<%comment_no>"></p>
<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>
<h3 class="com_title"><%comment_title></h3>
<%comment_body>
<div class="com_state">
<%comment_year>-<%comment_month>-<%comment_day><!-- 投稿時間不要の場合は ここから-->-<%comment_hour>:<%comment_minute><!-- 投稿時間不要の場合はここまでを削除 --><span class="visitor-name"> <a href="<%comment_url>" target="_blank" rel="noopener"><%comment_name></a> </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


Comments

大満足★★★★★

私はヤプログの時はコメ欄を閉じており、FC2を始めてから初めてコメント欄を設置しました。
このカスタマイズは、訪問者様のアイコンが表示され、より皆様に親近感を感じられるので、大変気に入っております。
生まれ変わったコメント欄に大満足で文句なしの星5です。
(楽天か)


※今のところ不具合はありません。
発案者のmochi先生、記事を書いてくださったaki様、リクエストしてくださったやぴこさん、皆さんに感謝感謝です˖✧


追記
このカスタマイズ、返信する時に管理人と訪問者様の敬称が変えられるのがツボです
(*´艸`*)
2020-06-09-08:53  徳川たぬこ
[ 返信 * 編集 ]

aki

Re: 徳川たぬこ 様へ

で、早速見に伺いましたら…ちょっとズレておりました。^^;
修正箇所をコメントしておきましたので、お手数ですが調整してみて下さい。
お手数をお掛け致します。m(__)m
2020-06-09-11:17  aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-06-09-11:48  -
[ 返信 ]

akiさん、こんにちは!

早速設置してみました。
ひたすら感動しております✨✨
ワガママリクエストに対応してくださり、ありがとうございます
╰(*´︶`*)╯


一旦ログアウトして、鍵コメしたり、自分の他ブログURLを入力してみたりテストコメントやってみてます。

で、気づいたのですが…
私はタイトルの「No Subject」を削除しているためか、そのまま空欄のままにすると アイコンとコメント本文と少し被ってしまうようです。
(スマホでは大丈夫です)

「No Subject」を表示させるよう戻せばよいのでしょうが、訪問者様が削除してしまうとやはり被ってしまうのですよね…?

ちなみにテストしたのは
https://kinako.fc2.net/blog-entry-448.html

この記事です
最初にコメントくださった、たぬこさんのコメントの所がわかりやすいかと思います。

お手数ですが、確認していただけませんでしょうか、、、

試すようですみません、このコメントもタイトル空欄にして送信してみます。



追記
あれ?私のアイコンがでませんね…
なにか作業中でしたら、邪魔してしまい申し訳ないです
2020-06-09-13:45  やぴこ
[ 返信 * 編集 ]

aki

Re: t 様へ

非常に良い案ですね♪
早速採用です!この記事のコメント表示部HTMLに入れてみました。
有難うございます!(^o^)丿
2020-06-09-14:50  aki
[ 返信 * 編集 ]

aki

Re: やぴこ 様へ

ゴメンナサイ。まだちょっと色々やってたもので。^^;
追記したCSSに、更にpaddingを追加してみて頂けますか?
.com_title{
margin:-35px 0 20px 30px;
}
これを↓こんな感じに。
.com_title{
margin:-35px 0 20px 30px;
padding-bottom:10px;
}

padding-bottom値で調整して下さい。
ただ、タイトルが入る前提(無ければNo Subjectになる)で作っていたので、数値を大きくし過ぎるとバランスが悪くなっちゃうので10から15px位まで…かなぁ。(^^;
タイトルが無いと(たぬ子さんが彼方で言っておられるように)警告案件となるので何かしら入れたいのですが…確かに消して投稿する方もいらっしゃいますよね。

それと、他のURLで画像が表示されないのはOGP設定が無いからだと思います。
プログラムでOGP画像を表示する仕様なので、私には何とも出来ませんしAPIサーバー次第なので表示されない事も有る、とご理解下さい。m(__)m
2020-06-09-15:15  aki
[ 返信 * 編集 ]

すみません

2つ質問をさせてください(。-人-。)

まずひとつ、コメント入力者様のサイトへのリンクですが、
別窓で開くようにはなりませぬでしょうか…
(その場合、どこをどうすればよいのやら…)

あとひとつ、同じくコメント入力者様のサイトへのリンクで、マウスホバーした時のタイトルを表示されないようにしたいのですが、(これも、どこをどうすればよいのやら…)


Σハッ もしやJSの部分をどうこうするのでしょうか
(それなら諦めがつくというものです^^;)
2020-06-09-15:37  徳川たぬこ
[ 返信 * 編集 ]

aki

Re: 徳川たぬこ 様へ

えっとですね、ブログのブロック変数で一度に名前+リンクが付けられるものが有って、短くて楽なのでそれ使ってたのです。^^;
<%comment_url+name> URLリンク付き投稿者名を表示
これで出力すると
<a href="リンク先URL" title="リンク先URL" >投稿者名</a>
という表示になって、自力での別タブ表示やタイトル属性削除が出来ない仕様になっています。
なので、これを取り払ってその部分に下記を入れて下さい。
記述場所を探す場合は、<%comment_url+name> で検索して下さい。m(__)m

<a href="<%comment_url>" target="_blank" rel="noopener"><%comment_name></a>

これで別タブで開き、且つホバー時のタイトル属性値を外せます。
title="表示したい文字列" は対象の補足情報をツールチップで表示してくれるので、必要であれば追加して下さい。
(例えば、title="<%comment_name>のブログへGO!" で名前と文字列とか。)
2020-06-09-16:59  aki
[ 返信 * 編集 ]

ありがとうございます( ;∀;)˖✧

好みのタイプの表示ができようになりました˖✧
わがままを申してすみませんでしたorz

(*´꒳`*)ありがとうございます♡
さすがakiさんです!˖✧
2020-06-09-17:31  徳川たぬこ
[ 返信 * 編集 ]

ありがとうございます

akiさん、早速お手数おかけしました。

padding-bottom:10px;
を追加して数値も調整してみたりしたのですが、タイトルが空欄のままだとどうしても被ってしまいます(>_<)

何かしらのタイトルが入れば被らないようなので、
value="No Subject"の部分を戻して、とりあえずタイトルに絵文字(🍀)を表示させるようにしてみました。(No Subjectの代わりになるようなものが思いつかなかっただけです…)


他ブログのURLの件は、設定項目に「OGP設定」というものがあったのでもしかしたら表示されるかな?とあわよくば…なお試しでした。スミマセン。


そうこうしているうちに気づいたのですが、
管理画面からテンプレートの設定をクリックすると「保護されていない通信」になってしまいましたTT
2020-06-09-17:45  やぴこ
[ 返信 * 編集 ]

Re: やぴこ 様へ

あ、本当だ。テンプレートの設定画面が『Mixed Content』になってますね。
Mixed Content: The page at 'https://admin.blog.fc2.com/control.php?mode=design' was loaded over HTTPS, but requested an insecure image 'http://static.fc2.com/image/blog/view/album/loading_black.gif'. This content should also be served over HTTPS.
ですって。
管理画面の話なので、私達にはどうにもできません。FC2にメール送って聞いてみますね。

それとpaddingの件ですが、デベロッパーツールでCSS拝見しましたら padding-bottom:10px; の前に全角スペースが入っているようで、invalid property value と出ております。(プロパティと値が無効、という意味です。)
反映させるには、文字列の前の全角スペースを削除して下さい。(文頭合わせは必ず半角英数で。)
2020-06-09-21:25  aki
[ 返信 * 編集 ]

テスト投稿です。
2020-06-09-21:36  aki
[ 返信 * 編集 ]

akiさんへ

再び…

いろんな方の記事を読み漁りながら、ずーーっとにらめっこしてました…
要らんとこを弄ったりして…

あぁ自力では無理なのですねTT

css全角スペースまたやっちゃってましたか~
見つけてくださりありがとうございます。
2020-06-09-22:58  やぴこ
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-06-10-07:06  -
[ 返信 ]

aki

Re: - 様へ

こんにちは。(^-^)
そちらに後程お返事致しますね。
2020-06-10-11:06  aki
[ 返信 * 編集 ]

No Subject

テストコメントです。
2020-06-10-11:28  管理人投稿
[ 返信 * 編集 ]

No Subject

管理人によるテスト投稿です。
2020-06-10-12:11  テストです
[ 返信 * 編集 ]

(⁰▿⁰)やぴこ姫のアイコンが出ていますね˖✧

陰ながらハラハラしながら見ておりました

(。-人-。)˖✧無事に解決されたようで本当に良かったです˖✧mochi先生、akiさん、さすがです˖✧



そしてそんな中、新たな問題が発生したようなので、報告に参りました

https://oops0011.blog.fc2.com/blog-entry-419.html

毎度aki様に頼りっぱなしで(報告のみで)スミマセン
(。-人-。)鬼滅のカラスみたいなわたくしです笑
2020-06-10-12:32  徳川たぬこ
[ 返信 * 編集 ]

FC2ブログURLでのテストコメントです

akiさん、コメントをありがとうございました

先ずは、fc2ブログのURL(末尾に/?p=1を追加)にてテストコメントさせてください。

コメント欄お借り致します。
2020-06-10-13:35  やぴこ
[ 返信 * 編集 ]

やぴこさんのアイコン

、、勝手に直っている気がします


あのブログカードって、1度ファビコンやプロフ画のキャッシュを読み込むと画像を変更をした時に反映されるのが遅いのですよね
☝️☝🏻☝🏼☝🏽☝🏾☝🏿はよ言えや!

すみません
。゚(゚^ω^゚)゚。 mocii先生のコメント欄で思い出した次第です泣

何はともあれ直ってよかったですね♡
ハラハラしながら見ておりました(邪魔で申し訳ないです、スルーしてください)

ちなみにgooブログさんからのコメントは
プロフ画像ではない画像がキャッシュされたようです(どうでもいいですね)
2020-06-10-13:43  徳川たぬこ
[ 返信 * 編集 ]

他ブログURLでのテストコメントです

他ブログURL(末尾に/?p=1を追加)にてテストコメント

すみません、もう一度お借りします
2020-06-10-13:49  やぴこ
[ 返信 * 編集 ]

No Subject

/?p=1追加



https://blog.goo.ne.jp/kenkenholland/?p=1

リンク先に飛んでいっても
/?p=1自体が反映されません
さすがGoogle先生のおひざ元のブログ…

人様のコメント欄でテストをして申し訳ございませんorz
2020-06-10-13:58  徳川たぬこ
[ 返信 * 編集 ]

末尾に/?p=1を追加なし

fc2のURLに末尾に/?p=1を追加しなくても、表示されているとのことなので

すみませんもう一回お借りします
2020-06-10-14:10  やぴこ
[ 返信 * 編集 ]

aki

楽しいコメント欄になってます♪

コメント欄が賑やかになりました。画像が出るって嬉しいですね~♪

OGPの画像が問題無くキャッシュされれば/?p=1、付けなくても良いですよ。
表示させる!という手段のようです。(^_^)
それと、mochi様の所で修正箇所教えて頂いたのでJavaScript(②の部分)もアップデートして有ります。
不具合回避のために、再コピペを是非お願い致します。m(__)m
(因みに③も修正致しました。タイトルが無い場合に画像が文面に被ってしまうのを防ぐために、.com_titleに min-height:30px; を追加しました。)

どうぞ皆様遠慮無く、コメント欄で色々試してみて下さいね♪

たぬこさん、gooブログもやってたんですね~。
やぴこさんのlivedoorブログといい、この度の表示テストでは 皆様お世話になりました。(^-^)
2020-06-10-14:27  aki
[ 返信 * 編集 ]

すみませんでした

何度もどうでもいいコメントをしてすみませんでした(一部重要なお知らせも混ざっております)←ややこしい

gooブログさんはヤプログさんから引っ越した過去記事の倉庫に使わせていただいております(ここだけの話です笑)

②の再コピペ、承知いたしました♪

いつもありがとうございます˖✧
2020-06-10-14:33  徳川たぬこ
[ 返信 * 編集 ]

あらためまして

コメント欄お借りしてテストさせていただきました。
自分のコメ欄でもタイトル空欄のケースをテストしてみました。本文と全く被らず表示されてます。(PC、スマホともに確認済)

/?p=1追加しなくても表示できるようになっております。(他ブログの方も)

再度コピペも完了しました。

プロフ画像が表示されなくなった原因も詳しく説明してくださり、ありがとうございました。

画像表示されたのが嬉しくて、欲が出てしまい設定し直ししてしまったのが事の始まりのようで、ホントにホントに申し訳ないことでした、、、。

mochi先生さまとのやりとりも読ませてもらいました。遅くまでご対応してくださっていたことに深く感謝しております。
(mochi先生さまのおブログでもテストしていただき、有り難すぎることでした)

呼吸を整えて、後程お礼に行って参りたいと思います。


akiさん、この度もお騒がせお手数おかけし申し訳ありませんでした。
いつもながらご親切な対応をありがとうございました。
コメ荒らしすみませんでした
2020-06-10-14:41  やぴこ
[ 返信 * 編集 ]

aki

Re: 徳川たぬこ 様へ

重要なお知らせ、ですね。
後で彼方に伺ってみます。有難うございます。(^-^)

p.s. jQueryのバージョンですが、手打ちで3.4.1に変更して頂ければ使えます。
ただ、直しても脆弱性が3→2になるだけで Highest Severity が Medium なのは変わらないし…3.5.1は出たばかりなので様子見、という感じです。
結局外せないのですよね。^^;ドロワーメニューで使っているし、この度のコメント投稿者のアイコン表示でも必要ですし。
取り敢えず個人的な見解です。m(__)m
2020-06-10-14:52  aki
[ 返信 * 編集 ]

aki

Re: やぴこ 様へ

いえいえ、色々な所で検証して頂き有難い限りです。
この度教えて頂かなければ、後に同様の不具合が有った時に騒ぎます。← 一番私が騒ぎます。(^^ゞ
記事の流布から早い段階で対応が出来て良かった♪と思います。だから問題無しです。

また何かお気付きの点が有りましたら教えて下さいね。(^_^)
2020-06-10-15:02  aki
[ 返信 * 編集 ]

No Subject


akiさん、こんばんは。
先日は対応をありがとうございました。
手違いがありまして申し訳ありませんでした。

こちらの記事、私も楽しみにしておりました。
ですが、私の場合は管理人の画像表示がズレています。
かつて、他者様の投稿コメントより枠を少し右にずらしたからだと思います。
元に戻すにはどうしたらよろしいですか?
自己都合のわがままばかりでごめんなさい。(T_T)
2020-06-10-21:50  kotori*
[ 返信 * 編集 ]

aki

Re: kotori* 様へ

こんばんは。コメント有難うございます。(^_^)
先ずご質問の件。
管理人のボックスを右にずらしたままで画像を少し右に移動する場合は

.author-comment img {
margin-left: 20px;
}

を新しく追記して下さい。
管理人のボックス幅を訪問者と共に合わせる場合は、下記スタイルを探して

.author-comment {
background-color: #f5f5f5;
/* margin-left: 20px; */
}

とすれば同じ幅になります。(若しくはmargin-left: 20px;を削除)

先日のメールの件は大変失礼致しました。
こちらこそ疎通の行き違いが有り申し訳ありません。m(__)m

この度の記事、というよりプログラムの作者様(mochiさん)に感謝!です。
管理人アイコンは表示出来ても、訪問者アイコンを(自動で)表示する機能はFC2ブログに有りませんでしたから。
皆が待ってた機能ですものね♪
これからは、コメントするのも見るのも楽しくなります。(^-^)
2020-06-11-01:51  aki
[ 返信 * 編集 ]

おはようございます

aki先生 コメントありがとうございました❤
賑やかなコメント欄にまた一つコメント増やしちゃいましたが(;´▽`A``
嬉しくてお礼に伺った次第です

そうそう、上のコメントでたぬこさんが仰ってる通りスマホで広告が出てましたね~
広告表示なしの期間が終了したんでしょうね
2020-06-11-08:30  よつば
[ 返信 * 編集 ]

よつばさんも

スマホで広告出ますか?( ;∀;)


すみません、もっとよく調査してからコメントしなおそうと思い、前回のコメントは削除しました
(朝慌ててakiさんに報告したもので…笑)



広告のタグを<!--search_area-->
~ <!--/search_area--> などで囲ったら規約違反になりますかね~…
(^^;
2020-06-11-08:35  徳川たぬこ
[ 返信 * 編集 ]

ご報告

akiさん、いつもお世話になります

先程確認したら

管理画面のテンプレートの設定画面で出ていた「保護されていない通信」消えてました。

運営さんへ連絡してくださりありがとうございました(^-^)



広告表示の件で何やらおかしなことになってるようですね、、、

さっぱりわからないので見守っております(散々お世話になっておきながら…)



「追記」
余計なお世話かもですが、

私のAndroidスマホからは akiさんのブログ記事には広告表示されませんが、コメント送信前後の画面で広告出てきました。

「追記の追記」
私のところもコメント送信前後のみ表示されてました(>_<)
2020-06-11-12:39  やぴこ
[ 返信 * 編集 ]

aki

Re: よつば 様へ

こんばんは。コメント頂き有難うございます。(^-^)

mochiさんの所の過去コメントから拝見していたら、アイコン導入の試験的役割を担っていらっしゃったんですね~。
おかげで(この度の件も)とても助かりました。m(__)m

不具合や不安案件を皆さんで検証できるのは、とても有難く心強いです。
是非、何かお気付きの点などが有りましたら教えて下さいませ。
…とコメントしてるうちに、広告の件も収まったようです。
良かったです。(^-^;
2020-06-11-22:41  aki
[ 返信 * 編集 ]

aki

Re: 徳川たぬこ 様へ

こんばんは。(^-^)
先にそちらにコメントして参りましたので見て下さいね。

> 広告のタグを<!--search_area-->
~ <!--/search_area--> などで囲ったら規約違反になりますかね~…(^^;
---の件について。

なります。昔調べた事が有って、検索していたらBANされた話が載ってたのを記憶しています。^^;
確かその方は、自動で出力されるタグのclassを調べて、それに対して文字色だったか文字サイズだったかを変更して見えなくした…んだったと思います。
また、利用規約の禁止事項に
『FC2側広告スペースの削除・隠匿、及び広告の掲載位置・配色・サイズ変更、広告表示コードを変更する行為』
と有り、違反したした場合は
『予告なく利用を停止、または法的に可能なあらゆる措置、損害を被った場合は、当該ユーザー及び利用者はこれを賠償する』
となっております。
FC2の無料サービスは(たとえ目障りでも)広告のおかげなので、仕方が無いと諦めるか月額300円の有料会員になるか…ですね。^^;
2020-06-11-23:04  aki
[ 返信 * 編集 ]

aki

Re: やぴこ 様へ

こんばんは。(^-^)コメント有難うございます。

FC2からの返信は「確認中です」だけど、鍵付きに直ってますね。私のメールで直ったのかは定かで無いというか…^^;
管理画面も少しずつ変わってきているので、そういった部分の影響なのかもしれません。

それとスマホでの広告の件ですが、先程広告が消えた~という話をたぬこさんの所で見ました。(^_^;)
まぁ、でもいつかは広告も復活するでしょうし、そういう時のために自衛策は取っておいた方が良いと思います。
(テンプレート設定でもブログ管理者でも、無料であれば広告の回避はできません。閲覧する側が広告ブロックするしか無いかなと。)

AndroidのChrome
ブラウザを開いて右上の点3つのメニューを開く→設定を開く→サイトの設定→ポップアップとリダイレクトでブロック中にする。

iOSのSafari
設定→Safari→ポップアップブロックをオンにする。
iOSのChrome
ブラウザを開いて右下の点3つのメニューを開く→コンテンツの設定→ポップアップのブロックをオンにする。

自分の備忘録として載せときます。(;´∀`)是非ご参考に。
2020-06-11-23:18  aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-06-12-17:28  -
[ 返信 ]

ありがとうございました


akiさん、こんばんは。

問い合わせました「ちょっとズレてる」の件ですが、希望通りになりました。
お忙しい中、ありがとうございました。\(^o^)/
2020-06-12-20:39  kotori*
[ 返信 * 編集 ]

aki

Re: y 様へ

こんばんは。ご質問有難うございます。
そちらにお返事致しましたのでご確認下さい。(^_^)
2020-06-12-21:51  aki
[ 返信 * 編集 ]

aki

Re: kotori* 様へ

こんばんは。コメント有難うございます。m(__)m

無事に修正出来て何よりです。
投稿者アイコンが付くと、コメント欄も可愛く映えますね♪
お身体無理せずに、ブログの運営して下さい。(^-^)
2020-06-12-21:58  aki
[ 返信 * 編集 ]

(((o(*゚▽゚*)o)))ありがとうございました♡

aki先生~♪ 早速ご指導くださいましてありがとうございましたm(_ _)m

ボタンの位置が変だなぁとは思ってたんですが、全然解りませんでした
全角スペースだったんですね!本当にありがとうございました
無事に解決出来ました!感謝感謝です♡
2020-06-12-22:41  よつば
[ 返信 * 編集 ]

aki

Re: よつば 様へ

こんばんは。
早速直されたのですね。無事に解決との事で良かったです。(^-^)
それと、aki先生はやめて下さいね~。
実は!中級者に少し毛が生えた位の知識しか持ってないんです。^^;
まだまだ分からない事だらけなので、不具合は一緒に解決していきたいと思っております。←出来ない言い訳(^▽^;)
2020-06-12-23:25  aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-06-13-16:35  -
[ 返信 ]

aki

Re: h 様へ

こんばんは。コメント有難うございます。(^_^)
某所でお返事致しますね。
2020-06-13-22:03  aki
[ 返信 * 編集 ]

記事に関わらないコメントですみません

akiさん、おはようございます ^^

最近のakiさんブログのLighthouse測定結果は素晴らしいですね ^^
Performance 97 以外はオール100点なんて、かなりチューンアップ出来て来ましたね (^-^)//""パチパチパチ

ところで、最近のPageSpeed InsightsやLighthouseの測定ポリシーが何か変に感じるんです。
akiさんブログでのPerformanceに含まれる
------------------------------
未使用のJavaScriptを削除する
…3.5.1 / jquery.min.js(ajax.googleapis.com)
------------------------------
は、jQuery3.5.1(テスト使用中でしょうけど)は、deferなどで非同期にしていないにも関わらずこのような表示をしておりますが、弊ブログでは現在は

<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

と、プラグイン側もdeferそのものではないですが、同様対策してjQueryをテスト的にセットしてあるんですが、それでも結果はakiさんブログと同じで
------------------------------
未使用のJavaScriptを削除する
…3.5.1 / jquery.min.js(ajax.googleapis.com)
------------------------------
の判定を受けているんですよね。

まぁ、トップページのファーストビューでの測定ですからjQueryを起動するタイミング外なのに、akiさんブログでも弊ブログでも同様結果になるって、この当たりが何やら「意味不明」な気がします(笑)

極めつけは、jQueryをdeferしてもしなくても「Performance」による速度結果に影響が出なくなったように感じるんです(笑)
要は全て「未使用のJavaScriptを削除する」になってしまう気がします (^_^; アハハ…

この辺り、akiさん、何か最近のPageSpeed InsightsやLighthouseに違和感を感じませんか?
まるで「jQueryは排斥すべし」って言っているようで (笑)
2020-06-15-09:05  ぼっちん
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-06-15-17:21  -
[ 返信 ]

aki

Re: ぼっちん 様へ

こんばんは。コメント有難うございます。

そうなんです。試しに3.5.1にしてみましたら100点取れました。^^;
テンプレートの挙動にも影響は無いようなのですが…やっぱり最新版を導入するのはもう少し様子を見てからにします。
-----
結局、外部JSはみんな「未使用のJavaScriptを削除する」というように出ちゃうんじゃないのかと思ってます。
それがCDNだろうがFC2サーバーにupしたJSだろうが、defer記述がされていようが、と思います。
(なので、あまり気にしていません。m(__)m)
現実的では無いですが、試しにjquery.min.jsをHTML内にインライン記述してみたら「未使用のJavaScriptを削除する」が消えました。
(文言が消えたので、JSを未使用かどうか判断してるように見えないというか…^^;よく分かりません。)

私は知識が浅いので、表示に改善できるところは頑張ります。が、何故どうしてを考えるのはとても難しいです。m(__)m

> まるで「jQueryは排斥すべし」って言っているようで (笑)
…きっとそういう流れなのでしょうね。AkiraさんのテンプレもjQuery無いですし。
でも、これだけ普及してしまうと無くすのは難しいと思います。なので、Lighthouseの表示は『caution』位なのではと感じてます。
2020-06-15-23:32  aki
[ 返信 * 編集 ]

aki

Re: - 様へ

コメント有難うございます。
メールにてお返事致しますのでご覧下さいませ。m(__)m
2020-06-15-23:44  aki
[ 返信 * 編集 ]

こんばん▼o・ェ・o▼ワン!

この度はこちらの記事を参考にさせていただきまして、無事に訪問者さまのアイコンが表示されるようになりました。
分かりやすい記事をありがとうございました。
WEBのことなどまったくの素人ですが、知識もないくせにいろいろとやりたがる困ったヤツです。
このようにFC2ブログの有志さまの記事をほんとうにありがたく拝見して参考にさせていただいております。
mochiさまのブログにもごあいさつにうかがいました。

今回は大変にお世話になりました。
2020-10-06-22:40  はるパパ@ちわぐるず
[ 返信 * 編集 ]

aki

Re: はるパパ@ちわぐるず 様へ

こんばんは。初めまして。
…と言うか、こちらでのご挨拶が遅くなってしまい申し訳ございません。^^;

勝手に拝見して不躾にコメントし、メールまで頂き有難うございます。
テンプレートを自分好みにカスタマイズするのって、大変ですが楽しいですよね。(^-^)
私も色んな方から教わっている立場なので、有益な記事を上げて頂いてとても有難い事だと思っております。

ご利用テンプレートに関係無く 色んな方に訪問頂いており、また当方も出向いております。
是非またお立ち寄り下さいませ。
この度は素敵な出会いを有難うございました。(^^)
2020-10-07-20:41  aki
[ 返信 * 編集 ]






非公開コメント