Top Page › Template › テンプレ修正等 › 再修正・更新の予定です。m(__)m

再修正・更新の予定です。m(__)m

2020-07-12 (Sun) 23:15

コメント投稿者のURLが未入力だった場合の出力に関して、Lighthouseにダメ出しされました。
しかも「管理人のみ閲覧できます」のものにまで。…CSSだけで処理出来て良い方法だと思ったのに。
今月3日に記事起こして、それまではLighthouseのSEOで100点、出てたんですけどね。
同日の記事にcanonicalの件も書きましたが、日々厳しく変わっているようです。(^_^;)
修正・更新記事書いて約1週間、ユーザー様からの連絡が無ければ分かりませんでした。
この場にて感謝致します。「有難うございました。」

「再修正・更新の予定」としておりますのは、最近 Lighthouse(Googleが公式に提供しているSEOチェックツール)が頻繁に色々修正変更が有るようで、昨日まで問題無かったのに今日からNG?…みたいなチェックが有るためです。
テンプレート表示に直接不具合の無いものに関しては、少し時間を置いて纏まってからテンプレートへの反映(修正・更新)をしようと思います。
更新時、再度記事に致しますので 宜しくお願い致します。m(__)m



Lighthouse-seo


FC2ブログでコメント投稿者のURLを書き出す単変数は
  • <%comment_url> コメント投稿者のURLを表示します。
  • <%comment_url+str> URLリンク付き文字を表示します。
  • <%comment_url+name> URLリンク付き投稿者名を表示します。

この3つしか有りません。しかもどれもtarget属性値は無く、規定値である target="_self"(リンク元と同じウィンドウ)で開きます。
セキュリティ的にもこの方が安心なのですが、コメント頂いた方の所へ訪問やコメント内に記述された参考URLなどは、同窓で表示されると閲覧時に戻るのが大変だと(個人的に)感じます。

出来る事なら target="_blank"(新窓・新タブかはブラウザに依存)で開きたい…且つ、rel="noopener noreferrer"を付けたい…と、変数を駆使して色々やってみるのですが、それだけでは要望が満たされず(この記事に至る)。^^;

例えば、
  • <%comment_url>はURLのみなので
    <a href="<%comment_url>" target="_blank" rel="noopener noreferrer"><%comment_name></a>若しくは
    <%comment_name><a href="<%comment_url>" target="_blank" rel="noopener noreferrer">URL</a>
    このような形で使用すると、コメント投稿者のURLが無かった場合は a href=""と出力されてLighthouseからエラー判定。(先日の修正更新記事 2) でのエラーです。)
  • <%comment_url+str>は、リンク先が無くても『URL』の文字が残る。
  • <%comment_url+name>は、名前にリンクされているので、これのみ title属性が付いている。(ツールチップはリンク先が見えるので安心感も有るが、逆にhover時に煩い感じもする。)
等々。どれも使い易い反面、それだけだと少しずつ問題が有る変数。
何より一番欲しいのが target="_blank"と rel="noopener noreferrer"、取り敢えずこれを何とかしたい!


7/3の記事2)を行っている方は下記のようになっていると思います。
<span class="visitor-name"><br><%comment_name>&ensp;<span class="com-url-empty"><%comment_url></span><a class="com-url-link" href="<%comment_url>" target="_blank" rel="noopener">URL</a></span>
更新記事を行っていない場合は、下記のように修正箇所を探して下さい。


① テンプレートのスタイルシート編集枠内から下記の部分を探して変更して下さい。
(文字検索は、キーボードの「ctrlキー」と「Fキー」を一緒に押して表示された窓に下記を入れて下さい。)
<%comment_url
↑この文字列で検索すると
<%comment_url+name>
若しくは
<%comment_name> <%comment_url+str>
若しくは
<a href="<%comment_url>" target="_blank" rel="noopener"><%comment_name></a>
ひょっとしたらJS使っている場合も。(document.write はHTML5で強く非推奨とされています。)
<%comment_name> <script>
a="<%comment_url>";
if (a!="") document.write('<a href="'+a+'" target="_blank">URL</a>')
</script>
<noscript>
<a href="<%comment_url>" target="_blank">URL</a>
</noscript>
というのが見つかると思います。

② 上記でいうJSパターンのものを、document.writeを使わずに書き換えて利用します。
<span class="visitor-name">&nbsp;<%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">&ensp;URL</a>');</script><!--comment_author--> --><!--/comment_author--></span>

紫色の文字列は管理人コメントのブロック変数で、これが付いていると(管理者が)ログイン状態でコメントしている場合はURLが非表示になります。
自分のブログ(ログイン状態)のコメントにはURL不要、の場合はそのままコピペで。
逆に、ログインしている時もURL記述時に表示したい場合は、紫部分の文字列を削除して下さい。

コメントURL1 コメントURL2

後は更新ボタンを押して頂ければ完了です。


色んな更新で何処をどうして良いやら分からない…という方は、下記の部位を丸々貼り換えて下さい。
<%comment_body>
この文字列で検索すると、HTML内に1ヶ所該当箇所が見付かります。
(文字検索は、キーボードの「ctrlキー」と「Fキー」を一緒に押して表示された窓に上記を入れて下さい。)
その下に有る<div class="com_state"> から ▲</a></span></div> までを下記のHTMLに貼り換えます。

<div class="com_state">
<%comment_year>-<%comment_month>-<%comment_day><!-- 投稿時間不要の場合は ここから-->-<%comment_hour>:<%comment_minute><!-- 投稿時間不要の場合はここまでを削除 --><span class="visitor-name">&nbsp;<%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">&ensp;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>

その後、更新ボタンを押して下さい。



document.write を使った方法は、FC2ブログで10年以上も前に何方かが考案したもので、あちこちのブログ記事に出ております。(遡って調べてみると、2009年の何方かの記事に手法が既に書かれておりました。)
insertAdjacentHTML として書き換えただけなので、同じJavaScriptを使っていらっしゃる方にも使えると思います。
<%comment_name> <script>
a="<%comment_url>";
if (a!="") document.write('<a href="'+a+'" target="_blank">URL</a>')
</script>

これをこのように↓

<%comment_name> <span id="com-no<%comment_no>"></span>
<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>

<span id="com-no<%comment_no>"></span>この部分の前(beforebegin)にHTML
を挿入するという方法です。
保証はしかねますが(^^ゞ、気になったら使ってみて下さい。
<noscript></noscript>の部分は外しました。テンプレート自体がJS不使用では動作しないため、JS使用を前提としております。m(__)m)



7/3の記事2)で修正作業をされた方は最下段に追加したCSSが不要になるため、できましたら削除して下さい。(削除しなくても使う事は有りませんが、見た目スッキリしますし容量もホンの少し軽くなります。)
.com-url-empty{
display:none;
}
.com-url-empty:empty~.com-url-link{
display:none;
}
↑不要なので削除可

不具合が有った時のために複製を作ってから作業をすると安心です。
2020/07/16、rel="noopener"を rel="noopener noreferrer"に修正致しました。m(__)m


mochi様、この度はJSのアドバイス 誠に有難うございました。m(__)m
ogpimg

リンクで「target="_blank"」する時は「rel="noopener noreferrer"」した方がセキュリティ的に良いみたいです。

ボーっとリンクしてないでくださいね!クロスオリジンの目的地へのリンクは安全ではありません…?ブログ表示速度計測ツール「PageSpeed Insights」でも用いられている解析エンジン「Lighthouse」。...





◎ コメント投稿者URLとコメント欄に記述したURLも target="_blank"と rel="noopener noreferrer"を付けたい!という場合は、下記の方法もご覧下さい。
(↓ReadMoreをクリック)


コメント表示部分のURL(投稿者URL・コメントURL)に target="_blank"と rel="noopener noreferrer"を付けるJavaScriptを探していて見付けました。(^-^)
ogpimg1

target="_blank"をjsを使って外部リンクのみに付ける方法 | mlc2

はじめに 外部サイトのリンクを張る度に target="_blank" を書くのはちょっと面倒だなと感じたので、JavaScriptを使って外部サイトのリンクのみtarget="_blank" を付与したいと思います。

私の実現したい事が書いて有りました。(^▽^)

少しテンプレート用に調整したので異なる所は有りますが、一応下記のようになります。
先ず、コメント表示部を名前+URL一体の単変数に変更。
7/3の記事2)を行っている方は下記のようになっていると思います。
<span class="visitor-name"><br><%comment_name>&ensp;<span class="com-url-empty"><%comment_url></span><a class="com-url-link" href="<%comment_url>" target="_blank" rel="noopener">URL</a></span>

これを下記のように変更します。
<span class="visitor-name"><br><%comment_url+name></span>

上記本記事②を施したものでも可能ですので、その場合は下記のJavaScriptのみHTML編集枠下段に追加して下さい。

HTML編集枠内最下に有るJS群の一番下(</body>よりも上)に下記を追加。
<!--comment_area-->
<script>
var external_link__add_blank=function(){var e=document.querySelectorAll('.com_block a:not([target="_blank"])'),t=[];if(e.length){for(var n=0;n<e.length;n++)-1===e[n].href.indexOf("<%url>")&&1!==e[n].href.indexOf("#")&&(e[n].setAttribute("target","_blank"),e[n].setAttribute("rel","noopener noreferrer"),e[n].removeAttribute("title"),t.push(e[n]));return t}};document.addEventListener("DOMContentLoaded",external_link__add_blank,!1);
</script>
<!--/comment_area-->

後は更新ボタンを押して頂ければ完了です。
【 注意 】このカスタマイズをする場合は、管理画面→環境設定→ブログの設定の「コメント設定」→オートリンクを必ず『同じウィンドウで開く』に設定して下さい。
『新しいウィンドウ~』では rel="noopener noreferrer"が付かなくなり、Lighthouseで減点されてしまうようです。



7/3の記事2)で最下段に追加したCSSは不要になるため、できましたら削除して下さい。(削除しなくても使う事は有りませんが、見た目スッキリしますし容量もホンの少し軽くなります。)
.com-url-empty{
display:none;
}
.com-url-empty:empty~.com-url-link{
display:none;
}
↑不要なので削除可



不具合が有った時のために複製を作ってから作業をすると安心です。

[Tag] * 修正・更新 * コメント * 事前告知

Comments

お疲れ様でした🍵

おはようございます˖✧
Google先生の評価が、日替わりであれやこれやと変わっていきますね…
(¯꒳¯;)
この度の修正にはJSまでご使用なされて、
本当にお疲れ様でした˖✧

万福さんのところに設置してきたところ、“コメント欄のところでクロールできないよ~”が、見事なくなっておりました˖✧😭˖✧ありがとうございます


ところが(←ぇぇえ)

FC2アクセス解析のエラーはどうしようもないとして(←これがまたたくさんエラーを出してくれちゃうんですよ💦)

続きを読む、のところにエラーが出るんです😭なぜでしょう、同じコードのハズなのに… 
識別できないよ~(×6)と言われたので、エリアラベルで名前をつけてみたのですが変わらなかったので、匙投げて放置しております(^^;
まあ、体感的に速度が下がったなどの害はないので、なんならこのままでもいいかなと思ったり…←ヒドイ笑

最近の自分、Google先生に振り回されている感が否めませんが、Web界の王者には逆らえません😂
いえ、さほど数字は気にしていませんけどね(←めっちゃ気にしとるやん)

なにはともあれ、このたびも些細なエラーに最善を尽くしていただき本当にありがとうございました┏○︎))ペコ

akiさんのテンプレートは安心して使えます(。-人-。)˖✧
2020-07-13-09:02  徳川たぬこ
[ 返信 * 編集 ]

aki

Re: 徳川たぬこ 様へ

こんにちは。コメント有難うございます。(^-^)
そうですか、Lighthouseで色々出ましたか。…という事で満福さん見てみました。
改善点は以下です。お時間の有る時に直して下さい。m(__)m

【アクセシビリティのエラー】
・フォーム要素のラベル~
プラグインの「ブログ内検索」
<label><input type="text" size="20" name="q" value="" maxlength="200"><br>
<input type="submit" value=" 検索 "></label>
こんな感じに<label>と</label>で括る。
・テーブルとリスト~
これはプラグインの月別アーカイブの利用で出るようです。やぴこさんも出ます。
出力自体にエラーは無いのですが、JSで年別に括る際に<span>で<li>を束ねているのが問題です。
<ul>の中には<li>しか入れてはいけないのに、<span>が入ってしまうためにエラーが出ます。
分かっていて使うか、他のものにするか、です。
因みに『HTML5 validation』ではエラー無しになります。(あくまでもJSの問題なので。)


【ベストプラクティスのエラー】
HTML編集枠最下に有るJS群の一番下にある「newマーク画像」の部分
.innerHTML=" <img src='https://blog-imgs-141.fc2.com/h/r/9/hr9srbxx1q3o/73_d.gif' alt='New' style=" object-fit: cover;">")}

.innerHTML=" <img src='https://blog-imgs-141.fc2.com/h/r/9/hr9srbxx1q3o/73_d.gif' alt='New' style='object-fit: cover;'>")}
"と'を間違えずに括る。


【SEOのエラー】
・リンクに説明文~
トップの画像に付けているキャプション部分のRead Moreを他の文字にする。(Read Moreはチェックされる。たぬこさんはRead Articleにしてますよね。)
こういうのがダメらしい。
click here
click this
go
here
this
start
right here
more
learn more
私とやぴこさんは<span class="caption"><%topentry_title></span>にしました。(記事タイトルがhoverで出ます。)
・クロールとインデックス~
プラグインの「リンク」に有る<a style="cursor:pointer;"><画像URL></a>が原因。
aタグだからクロールしようとするので、<div><画像URL></div>や<span><画像URL></span>とかにしてみる。
ダメな場合は下記のようにしてみる
<a href="#!"><画像URL></a>
aタグの場合は何もつけなくてもカーソルはポインターなのでstyle="cursor:pointer;"はそもそも不要。
HTML5ではaタグにhref属性は必ずしも必要ではない。…けど、Lighthouseではチェックが入るのでhrefを付けて遷移しないリンク(#!)を付けておく。
(#!と設定するのは昔からの慣例。)

こんなところですか。最近すごく厳しくなりましたよね。
私もこの機会にテンプレートの修正、まとめて入れようかなと。(またですか?な感じですが。^^;)

> FC2アクセス解析のエラーはどうしようもないとして
…え?テンプレートのエラーですか?当方FC2アクセス解析入れて無いのですごく心配なのですが…。
2020-07-13-11:30  aki
[ 返信 * 編集 ]

ありがとうございます┏○︎))

😭ありがとうございます˖✧
さすがakiさんです
続きを読む…の部分ではなく
Read Moreの部分だったのですね
(。>ㅅ<。)💡どうにもならなかったわけでした
直ってスッキリしました!˖✧


(¯꒳¯;)それにしてもいろいろ細かくて厳しいですね~
サムネイル画像の重さはどうにもならないのでパフォーマンスの点は見ないようにしておりますが、それでも厳しいと感じます💦


そして、修正したところ、点数がかなり復活しました˖✧(最初の頃はすごく高得点だったのですが私のカスタマイズのせいで点が落ちてきたのです)
感謝です😭さすがです✧︎

akiさんの全テンプレートへのプレッシャーには遥かに及びませんが、お気持ちナノかピコぐらいお察しいたします😭


あと、わたくしの環境から見るライトハウスは
残すエラーはアクセス解析のものだけになっておりました
(ざっくり言うと“ハムスターが邪魔だよ--”と言われます)
https://blog-imgs-141.fc2.com/h/r/9/hr9srbxx1q3o/20200713131346854.png
https://blog-imgs-141.fc2.com/h/r/9/hr9srbxx1q3o/2020071313134765a.png


なにかversionのちがいですかね~
;´・ω・)ゝ

ともあれ、お陰様で万福さんの工事も終了いたしました˖✧

本当にありがとうございます┏○︎))ペコ
2020-07-13-13:21  徳川たぬこ
[ 返信 * 編集 ]

aki

Re: 徳川たぬこ 様へ

満福では無く「万福さん」でしたね。字が間違っておりました。失礼致しました。m(__)m
拝見したら、アクセシビリティの「フォーム要素には関連付けられたラベルがありません」がまだのようでした。
上記の・フォーム要素のラベル~、プラグインの「ブログ内検索」の部分です。

<label><input type="text" size="20" name="q" value="" maxlength="200"><br>
<input type="submit" value=" 検索 "></label>

これを直せばもう少し点数が良くなるかと思います。
あと解析の部分は…画像URL見ましたが、解析設置の際のタグなので利用者側では何とも出来ないのではないかと思います。^^;
下手に弄ると解析に支障が出るかもしれないですし、ここは心を鬼にして「諦めも肝心です!」と申し上げときます。
何か有っても責任持てませんので…。(^_^;)ゴメンナサイ。
2020-07-13-14:03  aki
[ 返信 * 編集 ]

ありがとうございますorz

検索の方ですが、validチェックで警告が出ていたのが気になり(^^;
元の状態に戻した次第です スミマセン
あ、いっそakiさんやわたくしが使っているものに変えてもよいでしょうか…
というか変えてきます←よろしいでしょうかorz


アクセス解析のほうは最初からスッパリ諦めておりますので大丈夫ですよ👍笑
PHPの中身なんてどうしようもないですよね😂


それとやはり私の見ているライトハウスには
プラグイン関係のエラーが出ないようです
??(;・_・)??拡張機能の方で見ておりますが、もしやまたもや広告ガードが関係していますかね…????
いいかげん外したら?とぼっちん先生から言われそうですw 

[追記]
さきほど、拡張機能を更新するところがあるのに気付き、更新してみました
これでプラグインのエラーも出るかもしれません

[追記2]
(;・_・)やはり出ませんでした…

あと万福さんのところはアクセス解析と、もうひとつ、プラグインのカウンターが入っておりまして、
そのふたつを外せばかなりの点になると思います
(ご本人の要望で付けております)
あとで実験してみます笑


|・`ω・)ノ 実験結果です↓
https://blog-imgs-141.fc2.com/h/r/9/hr9srbxx1q3o/20200713151900381.png
2020-07-13-14:24  徳川たぬこ
[ 返信 * 編集 ]

aki

Re: 徳川たぬこ 様へ

って事はやぴこさんもエラー出てますね。^^;
LighthouseとHTML5 validationでは違うのか…面倒ですね。
やぴこさんにも同じ検索フォームに変えてもらった方が良いかな。
それとプラグインに有るぷーリンクも、たぬこさん同様のチェックが入った。(<a style="cursor:pointer;">)
やぴこさんのvalidationエラーで気になったのが、記事タイトル周りのimgタグが空になったまま残っている事。
あれがエラーの原因。後で付ける時のための位置が分かるように残しているのかしら…

あ、たぬこさんに言っても問題は解決しないですよね。失礼しました。m(__)m
後でやぴこさんの所に行って来ます。

私のLighthouseもGoogleChromeの拡張機能ですよ。そしてAdblock Pulsが付いてます。
訪問先のwebビーコンが出ても出なくても、そもそもアクセス解析とか気にして無いです。(^^ゞ 解析自体がおかしくなるのは困りますが。
広告ガードが問題かどうかは、やはり外してみるしかないのでは?

追記:コメントが入れ違いになりました。
私もAdblock Puls外して万福さんの所に伺いましたら、それまで非表示だったカウンターとwebビーコン画像が出ました。
なので、広告ガードが問題、という結論です。
あ、問題点はそこでは無いか。(;´・ω・)Lighthouseでプラグインのエラーが出ない件でしたね。
そもそも解決済みでエラーが無いのでは?
2020-07-13-15:25  aki
[ 返信 * 編集 ]

僭越ですが

>「Firefox 79」からtarget=“_blank”なリンクの挙動が変更、より安全な仕様に - 窓の杜(20/06/09)
https://forest.watch.impress.co.jp/docs/news/1257725.html

の件に関連する内容と拝読しました。
これによれば

リンクタグは、(例1)の書き方では悪用の恐れがある為、最近では“target”属性に“_blank”を指定する場合、(例2)のように“rel”属性も適切に設定することが推奨されていたとのこと。
(例1)<a href="http://example.com/" target="_blank">
(例2)<a href="http://example.com/" target="_blank" rel=“noopener”>

ところが、これについて
07/29に公開されるFirefox v79以降では、(例1)の書き方をしても、自動的に(例2)の書き方と同等に評価されるとのことです。(例1)の書き方をしている古いWebページも同様の扱いをされるそうです。

また、Appleは2019年3月公開の「Safari 12.1」でこの変更を導入済み。「Google Chrome」への導入も計画されており、いずれはすべての主要ブラウザーがこの挙動に統一される見込み。
以下、Firefoxの当該記事
>アンカー上の target=_blank が rel=noopener を暗示するようになりました | Firefox サイト互換性情報(20/06/07)
https://www.fxsitecompat.dev/ja/docs/2020/target-blank-on-anchors-now-implies-rel-noopener/

ということで、この件は放置していてもブラウザ側が対応すると見ています。
http://nonn634.blog.jp/archives/83337580.html
2020-07-13-15:26  呑兵衛あな
[ 返信 * 編集 ]

すみません

ぷーリンクのエラーは私のせいです
┏○︎))
 あ、ということは…、

やはり、よつばさんのところも同じエラーが出ていました😅
(よつばさんの所の真似をさせていただいたものです)
リンクボタンについての件は
おふたりにお知らせしてきます

御多忙中に何度もすみませんでしたorz💦


[追記]
すみません、問題は
・akiさんのご指摘された、月別アーカイブと検索のエラーが
 私から見えていなかったという点です
 (やぴこさんのところのも見えません)


解決したということにしておきます笑
長々と本当にすみませんでしたorz💦
2020-07-13-15:47  徳川たぬこ
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

こんにちは。コメントと情報を頂き有難うございます。

そうなんですよね。新しい主要ブラウザでは「安全な閲覧」が標準になって来ております。
しかしながら、残念な事に全てのネットユーザーが新しいブラウザで閲覧されている訳では無く、主要ブラウザ以外をお使いの方もいらっしゃるのが現実です。
テンプレートを配布する側と致しましては、古いブラウザや主要ブラウザ以外を切り捨てる訳にもいきませんので「(安全のためにも)付いていないものには付ける」という事をしないといけません。
リンクになっていたら、例え右クリックで開き方を選べても、皆そのままクリックしてしまいます。^^;
(その手間が若干面倒ですし。)

使い易いブラウザは人それぞれです。
テンプレ作者としては、出来るだけ多くの閲覧環境に(今は)対応するしか無いようです。
早く皆が新しい(メジャーな)ブラウザに切り替えてくれる事を願っております。
2020-07-13-16:05  aki
[ 返信 * 編集 ]

aki

Re: 徳川たぬこ 様へ

下記の件なのですが↓

[追記]
すみません、問題は
・akiさんのご指摘された、月別アーカイブと検索のエラーが
 私から見えていなかったという点です
 (やぴこさんのところのも見えません)

これに関しては、やぴこさんのものが見えないのは既に修正していたからです。
先週かな、私と色々鍵コメでやり取りしましてLighthouseのエラーは修正箇所を指示しましたので、エラーが出なくて当然なのです。^^;
で、月別アーカイブに関してのエラーは、こんなの出てませんでした?
https://blog-imgs-141.fc2.com/s/o/r/sorauta1/lighthouse-acc.gif

これを見ても分からないですよね。
展開して月別アーカイブだと分かっても「何の事やら」と。validatorでもエラー無しですし。
ひょっとしてこれ、出ませんでした?
2020-07-13-16:36  aki
[ 返信 * 編集 ]

あ、(^^; そうだったのですね

やぴこさんのところについては解決いたしました˖✧

万福さんのところですが、何も修正していないのに
https://blog-imgs-141.fc2.com/h/r/9/hr9srbxx1q3o/2020071316470486c.png
アクセシビリティのところは今日は最初からこんな感じでした


ただ、そんなエラーも(昨日あたりに)見たような気がします(何の事やらと思いました笑)

そういえばしつこくエラーエラーと言われ続けた(万福さんが記事中に貼った)農協へのリンクエラーもなくなっておりましたが
いつまたエラーと言われるかわからないのでありがたく修正させていただきます
┏○︎))
(最初からそうすればよかったです、申し訳ありません)

💦┏○︎))ほんとにもう、何度もすみませんでした💦
返信はあってもなくてもOKです˖✧

万福さんのエラーへのご助言、本当に助かりましたorz˖✧

いつもありがとうございます
これからもよろしくお願いいたします˖✧


[追記]わかりました
たぶんやぴこさんが月別アーカイブのリンク色を変えたことによるエラーかと…😂
万福さんのところでは何も弄っていないので
そもそも<span>の文字がありませんでした
(¯꒳¯;)こんなオチでスミマセン💦


いや、ありました、JSの中に😂(ちゃんと書いてありますね すみません)
万福さんには申し訳ないですがわからないので放置します(キリッ
やぴこさんもごめんなさい💦許してくり

お騒がせいたしましたorz
(一応JSの中のspanの文字をliに変えておきました)

プラグイン自体を変更しました
2020-07-13-16:55  徳川たぬこ
[ 返信 * 編集 ]

Re: aki 様へ

>テンプレートを配布する側と致しましては...

なるほどです。
しかし、「IE 11では動かないから他のブラウザを使え」という大手サイトも増えつつあります。TwitterもIE 11では動かなくなりました。
「はてなブログ」や「livedoorブログ」でもIE 11は推奨外です。
そんな中で、FC2ブログだけはガラケーからのアクセスもウェルカム仕様です。
だからどうしたと言われそうですが
2020-07-13-18:16  呑兵衛あな
[ 返信 ]

今晩は

akiさんこんばんは☆

たぬこさんからご連絡頂き、修正して「ぷーリンクのエラー」消えました。


記事タイトル周りのimgタグが空になったまま残っている事。
あれがエラーの原因。後で付ける時のための位置が分かるように残しているのかしら…

はい、これを残してたのはその通りでゴザイマス。面倒になって外したまま放置してました。
で、今削除してきました。(全部削除できてるかと…自分でつけといて自信がない💦)


そして記事にされている再修正をやり始めたのですが、

HTML編集枠内最下に有るJS群の一番下(</body>よりも上)に下記を追加。
<!--comment_area-->中略<!--/comment_area-->


ここ。

既に<!--comment_area-->中略<!--/comment_area-->
があっても、追記するという解釈でいいのでしょうか?貼り換えじゃないですよね…

気になって作業中断してます。

お忙しいと思いますが、お返事いただければ助かります(*'ω'*)
2020-07-13-21:30  やぴこ
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

こんばんは。お返事有難うございます。

ブラウザに関して「IE11は非推奨」という話は聞きますね。
ただ、未だにシェアが2割位有るらしいですし、利用出来ない所が増えてもシェア率0にはならないので、やはり暫く無下には出来ないです。^^;
それだけで無く、ブラウザシェア1.0%のOperaや0.5%のSleipnir,0.2%のVivaldiを利用している方も存じておりますので…。
多くの方々に、極力差異無く使えるテンプレートで有りたいな、と思っております。m(__)m
2020-07-13-22:40  aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

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

aki

Re: やぴこ 様へ

そちらに伺おうと思っておりました。(^^;)
Lighthouseはエラー無くなったのにvalidatorの方でエラーになるので、お手数ですが『検索フォーム』の修正をお願い致します。

管理画面プラグインの設定から『検索フォーム』を開いて、下段に有る「HTMLの編集」をクリックします。
中身をマルっと削除して、下記をコピペして『設定』ボタンを押して下さい。

<form action="./" method="get" id="plgSearch" name="plgSearch">
<p class="plugin-search" &align>
<input type="text" value="<%search_word>" name="q" class="plgSword" style="margin-bottom:3px;" aria-label="ブログ内検索">
<input type="submit" value="検索" class="plgSsubmit">

<input type="checkbox" id="plgSor" name="or" value="1"><label for="plgSor" title="OR検索">or </label>
<input type="checkbox" id="plgSwres" name="w_res" value="1"><label for="plgSwres" title="コメントを含める">cm </label>
<input type="checkbox" id="plgSwtb" name="w_tb" value="1"><label for="plgSwtb" title="トラックバックを含める">tb</label>
</p>
<!--search_area--><script><!--
(function(){
var d=document,s=d.plgSearch,h=location.search;
if(h.search(/&or(=.*)?(&|$)/)>1){s.or.checked=true;}
if(h.search(/&w_res(=.*)?(&|$)/)>1){s.w_res.checked=true;}
if(h.search(/&w_tb(=.*)?(&|$)/)>1){s.w_tb.checked=true;}
var n='<!--topentry--><%topentry_no><!--/topentry-->';if(n==''){
var p=d.createElement('p');p.className='searchResult';
p.appendChild(d.createTextNode('No Results Found'));
s.appendChild(p);}
})();
--></script><!--/search_area-->
</form>

それと<!--comment_area-->中略<!--/comment_area-->
の件ですが、もっと簡易なものを作って居りますので、導入を少し待って下さい。
只今調整中です。m(__)m
2020-07-13-23:27  aki
[ 返信 * 編集 ]

ありがとうございます(^-^)

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

お返事ありがとうございました。
今日は昼間PC開けないので、また後でお邪魔させていただきますね

『検索フォーム』の修正は、スマホでできなくもないのですが、止めておきます(^^;

お疲れさまです。
2020-07-14-09:02  やぴこ
[ 返信 * 編集 ]

aki

Re: やぴこ 様へ

後でゆっくり行って下さい。
色々お手間を取らせて申し訳無いですが、新しい『検索フォーム』はコメントからも探せるものなので、使えばきっと重宝します。👍

【追記】
あと、プラグインのシンプルアーカイブ(月別)も修正してみました。
下記を開いて、プラグインのHTMLの編集枠内を全て貼り換えて下さい。

https://blog-imgs-141.fc2.com/s/o/r/sorauta1/plugin-simple-archive-sjis.txt

これでエラー無くなると思うのですが…。^^;
2020-07-14-12:27  aki
[ 返信 * 編集 ]

aki

Re: m 様へ

こんばんは。コメント有難うございます。
そちらにお返事しておりますのでご覧下さいませ。m(__)m
2020-07-14-21:43  aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

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

aki

Re: - 様へ

こんにちは。
そちらに伺ってコメントしましたのでお読み下さいね。(^-^)
2020-07-15-15:37  aki
[ 返信 * 編集 ]

お邪魔します

プラグインのシンプルアーカイブ(月別)修正版
https://blog-imgs-141.fc2.com/s/o/r/sorauta1/plugin-simple-archive-sjis.txt

こちらで修正してきました。


それからこの記事の
コメント投稿者URLとコメント欄に記述したURLも target="_blank"と rel="noopener"を付けられるということで(スバラシイですね!)

「ReadMore」に記述の修正、追記し、不要になったCSSを削除しました。

で、それを踏まえて…2つお尋ねです

①一昨日お尋ねしていた
<!--comment_area-->中略<!--/comment_area-->
が既にテンプレート内に記述してある件です。

とりあえず</body>の直前に今回のコードを追記してみました。
現在<!--comment_area-->と<!--/comment_area-->それぞれ検索すると2か所づつ見つかる状態になってしまいました…。


②コメント欄に記述したURLtarget="_blank"と rel="noopener"を付けられる件。

環境設定でコメント欄のオートリンク(新しいウィンドウで開く)を選択するとtarget="_blank"と rel="noopener"が自動的に付けられるとの解釈で間違ってませんか?

また単なる盛大な勘違いだったりして、、、
ちょっと今頭が回ってないのでご勘弁を、、、
(だったらするなよ!)
(我慢できなかった💦)

以上です。

【追記】
「ReadMore」ではなく、記事本文通りの修正も複製を作ってやってみました。
どちらを選択するかは好みで…になるのでしょうか

今度こそ以上です。
2020-07-15-21:28  やぴこ
[ 返信 * 編集 ]

aki

Re: やぴこ 様へ

こんばんは。コメント有難うございます。
文面が長くなっちゃいましたので、そちらにてお返事しております。
お時間の有る時に作業して下さいませ。m(__)m
2020-07-16-00:07  aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

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

aki

Re: - 様へ

こんばんは。コメントありがとうございます。
そちらにお返事致しますね。(^-^)
2020-07-16-21:28  aki
[ 返信 * 編集 ]

Lighthouse

ぼっちんさんも最近書いておられる、ライトハウスってなに?と。なんか灯台の事らしいですね。

クロームの拡張機能だという事で私もインストしてみました。

で、メチャメチャ怒られてます。画像の容量が大きすぎとか、alt属性はちゃんと書きましょうとか、リンクの文字色のコントラストが薄すぎるとか。あれこれあれこれ。

画像の容量が大きいのはサチコさんにも怒られてますが、私のような画像中心のブログでは容量を減らすと画質が粗くなってしまうので今が限界かもです。特に花畑のような細かいものが一杯写ってるものは。

alt属性はもう全て alt="" にしてしまってて、目の御不自由な方には私のようなブログは何の貢献をしようもないと。
実は2,30枚もある画像にいちいち説明を書いてられないと云うのが本音ですかね。

でもこの灯台というプラグインはなかなか面白いですね。
暇な時に見るのはいいですね。
全て英語なんですが今はGoogle翻訳という武器があるので。
とは言ってもこのGoogle翻訳の日本語、解釈するのもなかなか手強い。

あと noopener の件、昔から気になってました。結構他ページのリンクを貼ってますのでボチボチやらんといかんのかなぁと思ってたのですが、ブラウザ側が対処し始めたとか。

やっぱテンプレ作者さんは大変ですね。

陰ながら応援しております。
2020-07-21-16:51  hige
[ 返信 * 編集 ]

aki

Re: hige 様へ

そうなんですよね。色々怒られます。^^;
それまでチェックされなかった事を、最近はビシバシと指摘されます。
どうしても直せないものも有るのですが(速度とかFC2側でのJS出力とか)、何とかなりそうな所だけ修正しています。
テキストのコントラストは…見易い色って人によって違うと思うんですよね。
特に今使っているテンプレートだと、ダークテーマ中も記事の色を共用するので、明るくても暗くても見易くないといけないので、Lighthouseで言われるままに合わせる必要も無いかなと。^^;

大変失礼ながら、h i g eさんのブログ、Lighthouseで見てみました。色々カスタマイズして有っても、さすがAkiraさんのテンプレートですね!高得点を出していらっしゃる。
一つ気になりましたのが、この記事にも有ります『document.write』を使ったコメント投稿者のURL設定です。
現行のLa_VitaではFont Awesome使って無かったりでHTMLが少し異なっておりますが、今お使いのJSを少し変更するだけで『document.write』を回避できますので、是非参考にしてみて下さいませ。
(試しにLa_VitaをDLして下記を入れてみましたが、問題は出ませんでした。また、このコードはmochiさんに確認してもらったので安心して使えます。)

使い方:<!-- コメント一覧 -->という部分にあるJSを探し、そのまま<script>から</script>の部分に下記を貼り換えて下さい。

<script>a="<%comment_url>",""!=a&&document.write('<a href="'+a+'" target="_blank" rel="noopener"><i class="fas fa-external-link-alt"></i></a>');</script>

↑これを↓これに貼り換えます。

<span id="com-no<%comment_no>"></span>
<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"><i class="fas fa-external-link-alt"></i></a>');
</script>


<script>の前に有る<span id="com-no<%comment_no>"></span>という部分に、リンクアイコンのFont Awesomeが表示されると思います。(必要な部分なので、このままの形で貼り付けて下さい。)

余計なお節介だとは思いましたが、ちょっと気になりましたので宜しければお使い下さいませ。m(__)m
2020-07-22-00:28  aki
[ 返信 * 編集 ]

script

早速調べて頂いたのですか。
ありがとうございます。

HTMLとCSSは一度W3C Validator にかけてますのでその辺の細かなエラーはその時に訂正しました。また日々の記事もVisual Studio Code で Validator 常駐で書いてます。

script ですね、確認してみます。
感謝!
2020-07-22-15:25  hige
[ 返信 * 編集 ]

document.write やってみました

お世話になります。
<!-- コメント一覧 -->内にご案内頂いた記述がありませんでした。
で、こちらの判断で

<script>function add_str(arg){var str=document.getElementsByName("comment[title]")[0];str.value+=arg.title}</script>

とあるところを指示して頂いた内容で書換えてみました。
で、コメント主へのリンクのアイコンなんですが、このテンプレートではコメント名の続きに表示されるようになっているので

<span id="com-no<%comment_no>"></span>

は不要のように思われるのですが。
現在これを省いた形で適用しています。

当方、JS はチンプンカンプンなのでこれで良かったでしょうか。
お暇な時にでもご確認頂ければ有り難いです。

2020-07-22-20:52  hige
[ 返信 * 編集 ]

aki

Re: hige 様へ

ゴメンナサイ、場所が違います。
説明が悪かったですね。文字検索(Ctrl+Fキー)で<p class="visitor-name">で探した場所のその次に有る<script>から</script>までの事です。文字列で直接探すならdocument.writeで探した方が早いかも。^^;

それと、<span id="com-no<%comment_no>"></span> は外さずにそのままセットで記述して下さい。
この部分はマークを出すための位置決めとidを使うためなので、これが無いとアイコンが出ません。
document.writeを書き換えるためにdocument.getElementByIdを使っているのですが、無二であるidの値を指定するためにcom-no<%comment_no>としています。

W3Cはdocument.writeのHTML5での使用を「強く」非推奨としています。
また、記事を作成する際にvalidatorで見てもErrorは表示されません。非推奨であってエラーでは無いですし。
そして、記事にコメントが付いて初めてHTMLソース内に出力されますので、コメントの付いている記事をLighthouseで見てみると「Avoid document.write()、document.writeを避ける」と出てきます。
(document.writeについて、Akiraさんの説明ページ:https://vanillaice000.blog.fc2.com/blog-entry-1043.html

何か、余計に面倒なことしてすみませんでした。
お手数ですがお時間の有る時にでも修正の程、宜しくお願い致します。m(__)m
2020-07-22-21:45  aki
[ 返信 * 編集 ]

できた様です

ありました。
私の探していたところより少し上ですね。
勘が悪くてすいません。

Lighthouse でチェックしてみると、Avoid document.write の項で書換え前に出ている大量のエラーが消えてます。

なるほど。

ありがとうございました。
2020-07-23-09:21  hige
[ 返信 * 編集 ]

aki

Re: hige 様へ

修正できて良かったです。(^-^)

Lighthouseで拝見して、(個別記事ページの)label部分のチェックはHTMLの編集で直せそうなので、一応お知らせだけしておきますね。
(モーダル表示の検索やコメント投稿フォームの部分です。Lighthouseでチェックすると「ラベルを付けろ」と言われます。^^;)


1)先ずモーダルのブログ内検索窓部分 ---
文字検索(Ctrl+Fキー)で「 search-modal-input 」と入力すると、HTML編集枠内に1か所見付かります。
(現行のLa_Vitaでは下記のようになっています。)
見付かった部分にオレンジ文字を追加します。

<input id="search-modal-input" type="search" name="q" placeholder="Enter your text" aria-label="ブログ内検索"<!--search_area--> value="<%search_word>"<!--/search_area-->>


2)次にコメント投稿(編集)欄の部分 ---
文字検索(Ctrl+Fキー)で「 input id="name" 」と入力すると、HTML編集枠内に2か所見付かります。
見付かった部分にそれぞれオレンジ文字を追加します。

<input id="name" type="text" name="comment[name]" value="<%cookie_name>" placeholder="Name" aria-label="コメント者名">

<input id="name" type="text" name="edit[name]" value="<%edit_name>" placeholder="Name" aria-label="コメント者名">


3)同じくコメント投稿(編集)欄の部分 ---
文字検索(Ctrl+Fキー)で「 input id="subject" 」と入力すると、HTML編集枠内に2か所見付かります。
見付かった部分にそれぞれオレンジ文字を追加します。

<input id="subject" type="text" name="comment[title]" placeholder="Title" value="" onblur="if(this.value == '') this.value='No title';" onfocus="if(this.value == 'No title') this.value='';" aria-label="コメントタイトル">

<input id="subject" name="edit[title]" type="text" placeholder="Title" value="<%edit_title>" aria-label="コメントタイトル">


4)同じくコメント投稿(編集)欄の部分 ---
文字検索(Ctrl+Fキー)で「 input id="url" 」と入力すると、HTML編集枠内に2か所見付かります。
見付かった部分にそれぞれオレンジ文字を追加します。

<input id="url" type="text" name="comment[url]" value="<%cookie_url>" placeholder="Website" aria-label="コメント者URL">

<input id="url" type="text" name="edit[url]" value="<%edit_url>" placeholder="Website" aria-label="コメント者URL">


5)同じくコメント投稿(編集)欄の部分 ---
文字検索(Ctrl+Fキー)で「 textarea id="comment" 」と入力すると、HTML編集枠内に2か所見付かります。
見付かった部分にそれぞれオレンジ文字を追加します。

<textarea id="comment" cols="50" rows="10" name="comment[body]" placeholder="Add your comment" aria-label="コメント本文"></textarea>

<textarea id="comment" cols="50" rows="10" name="edit[body]" placeholder="Add your comment" aria-label="コメント本文"><%edit_body></textarea>


6)同じくコメント投稿(編集)欄の部分 ---
文字検索(Ctrl+Fキー)で「 input id="password" 」と入力すると、HTML編集枠内に2か所見付かります。
見付かった部分にそれぞれオレンジ文字を追加します。

<input id="password" type="password" name="comment[pass]" placeholder="Password" aria-label="修正用パスワード">

<input id="password" type="password" name="edit[pass]" placeholder="Password" aria-label="修正用パスワード">


前のLighthouseでは問題無かったのですが、最近とても厳しくチェックされるようになりました。^^;
Akiraさんのテンプレートは私のものと違って<label>で括るタイプでは無いので、上記のようなaria-labelの追加で良いと思います。
これを直すと、多分もう少し個別記事ページのアクセシビリティの点数が上がります。(^^)

私が勝手に見ただけなので、不要であればお見捨て下さい。(ラベル部分修正の際はご自由にお使い下さいませ。)m(__)m
2020-07-23-20:38  aki
[ 返信 * 編集 ]

できました

こんなところにもラベルがいるんですね。
2020-07-24-15:16  hige
[ 返信 * 編集 ]

aki

Re: hige 様へ

ページのソースを拝見して、修正されたのを確認致しました。
勝手に掲示して使ってくれだなんて…ホントに失礼過ぎますね。^^;
申し訳ございません。そして、お疲れ様でした。m(__)m
2020-07-24-22:08  aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-08-23-18:54  -
[ 返信 ]

aki

Re: h 様へ

こんばんは。コメント有難うございます。
そちらにお返事致しますね。(^-^)
2020-08-24-20:51  aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-08-24-22:01  -
[ 返信 ]






非公開コメント