テンプレートの修正・更新致しました。22/09/05

過日ですが、テンプレートの修正・更新を行いました。（22/09/05）

同様の不具合が生じる可能性が無いと言えないので、テンプレートの方を先にアップデート致しました。記事が後になってしまい申し訳ございません。

8月中旬過ぎに、テンプレートの不具合を相談頂いて分かった事です。…というか、このような現象は想像してなかったのですが、去年の更新時にどうしようか悩んだ件では有るんです。［ 1 ）の冒頭 *¹ 参照 ］

しかし、この度おかしな挙動が発生すると分かったので修正致しました。

この度の修正・更新の内容は、

1. 既に入っている画像遅延読み込み JavaScript を削除し、要約表示サムネイル部分を修正。
2. 一部テンプレートの「javascript:void(0);」を廃止。

の2点です。

先ず 1 ) の修正について、何故修正に至ったかの説明を致します。（ちょっと長めなので、不要なら修正部分へ飛んで下さい。m(__)m）

正直にお話しますと、この度の症状は

「初見（若しくはキャッシュの期限切れ）でトップページの要約表示の投稿記事に有る『Comment』をクリックすると、記事ページの下方に有るコメント欄に飛ぶはずが、辿り着けずにガタつく（若しくは位置が随分とズレる）。」

というもので、2回目からの移動では、記事内に複数有る画像がキャッシュされているためか、ガタつく事無く到達できるのです。

色々検索してみた所
「記事内画像に記述されている、遅延読み込みの処理が終わらないうちにリンクの着位置に移動しようとするため、それより上に有る未表示画像のサイズ取得が出来ずにガタつく（位置がずれる）」
というのを見付けて修正を試みたのですがなかなか直らず、ひょっとしたらと思い テンプレートに初めから入っている簡易的な画像遅延読み込み JavaScript（以下画像遅延JS）を外して貰ったら直りました。(~_~;)

当方のテンプレートには、要約表示時のサムネイル画像用に画像遅延JSを入れています。ただ、そのJSはエリア変数で括っていた訳では無く、どのページでも効いてしまう状態でした。

（故に、記事内に掲載する画像を
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="画像URL" alt="画像の説明" width="画像の幅" height="画像の高さ">
のように記述すると、画像遅延読み込みのライブラリを追加する事無く画像を遅延読み込みするようになります。）

ユーザー様は「初めからJSが入っている」なんて知る由も無いので、ご自身でlazysizes等のライブラリを使って画像遅延読み込みをされていました。（ HTML内に画像遅延JSのCDNを記述、掲載画像には class="lazyload" ＋上記の記述という形。）

そのため、ダブルで画像遅延JSが読み込まれ互いに干渉し合い、表示がガタついて着地点に到達できないという不具合が起きた…のでは無いかと推察致します。

結局、テンプレート側の画像遅延JSを外した事で正しい位置に止まるようになったので、これが『最適解』だったと思います。

1 ）　既に入っている画像遅延読み込み JavaScript を削除し、要約表示サムネイル部分を修正。

去年の修正・更新で悩んだ…というのは、21/10/26 の修正・更新で「*¹ エントリー要約表示のサムネイル画像の変数を変更しました」という件です。

これもまた前置きが長くなるのですが、説明不要な方は本編まで飛んで下さい。m(__)m

過去記事に有る、サムネイル画像変数 <%topentry_image_url_760x420> は、それ単体で preload するという優れものです。

それまでに使っていた変数 <%topentry_image_url> との比較画像を作ったのでご覧下さいませ。（以下は GoogleChrome のデベロッパーツールに有るネットワーク画面です。）

↓ <%topentry_image_url> ↓ <%topentry_image_url>

↑ サムネイルに変数 <%topentry_image_url> を使った場合は通常通りの表示です。レスポンスヘッダー（右）を見ると、preload されているのはスタイルシートだけになっています。（画像クリックで大きく表示）

↓ <%topentry_image_url_760x420> ↓<%topentry_image_url_760x420>

↑ サムネイルに変数 <%topentry_image_url_760x420> を使った場合は preload されています。レスポンスヘッダー（右）を見ると、スタイルシートと画像（このページには5枚）が preload されています。（画像クリックで大きく表示）

（イニシエータが『その他』になっているものはFC2側で行っているものです。）

rel="preload" は、コンテンツの先読みをさせる事が出来ます。あくまでも先読みするだけで表示や実行は必要になった際であって、先に表示（実行）するものでは有りません。

レンダリングをブロックしがちなものを先読みをさせて、表示を早くする事が可能になります。（全てが早くなるわけでは有りません）

話は戻りまして、先の修正・更新で悩んだのは、この「 rel="preload" で適切なタイミングで表示される画像に遅延読み込みの処理するのって勿体無くない？」だったのです。

テンプレート内に仕込んである画像遅延JSを無駄にしたくないという気持ちも有ったのですが、この度のように「（JSが有るという事が認知されていないために）画像遅延JSのバッティングで不具合が起こった」事は否めないので、スッパリ削除して素の形にしようかな、と思います。

本編。既に入っている画像遅延読み込み JavaScript を削除し、サムネイル部分を修正。

（この記事の前 '22/09/05 にアップデートを行っておりますので、この日付以降DLされた方は修正不要です。m(__)m 更新日はスタイルシート編集枠内上部に記載。）

'22/09/05 以前のテンプレートHTMLでは、要約表示のサムネイル部分が下記のようになっています。

HTML編集枠内で場所を検索する場合は、キーボードのCtrlキー＋Fキーを押して検索窓を出し、その中に <div class="left"> と入れて探すと1ヶ所見付かります。

<div class="left">
<a href="<%topentry_link>"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="<%topentry_image_url_760x420>" width="760" height="420" alt="<%topentry_title>"><!--body_img_none--><!--/body_img_none--><div class="mask"><span class="caption">Read this article</span></div></a>
</div>

① ↑ これを ↓ 下記のように変更します。（コピペ可）

<div class="left">
<a href="<%topentry_link>"><!--body_img--><img src="<%topentry_image_url_760x420>" width="760" height="420" alt="<%topentry_title>"><!--/body_img--><div class="mask"><span class="caption">Read this article</span></div></a>
</div>

② 次に、JavaScript を削除します。

キーボードのCtrlキー＋Fキーを押して検索窓を出し、その中に [].forEach.call を入れて探すと1ヶ所見付かります。

その上に有る <script> から </script> までを削除して下さい。

<script>
[].forEach.call(document.querySelectorAll("img[data-src]"),function(a){a.setAttribute("src",a.getAttribute("data-src"));a.onload=function(){a.removeAttribute("data-src")}});
</script>

③ 次に、スタイルシート編集枠内から当該ルールセットを削除します。

キーボードのCtrlキー＋Fキーを押して検索窓を出し、その中に img[data-src] を入れて探すと1ヶ所見付かります。

そのルールセットを削除して下さい。

img[data-src] {
  opacity:0;
  display:none;
}

④ 最後に更新ボタンを押して完了です。（不具合が有った時のために、複製を作って作業すると安心です。）

変更・削除せずにテンプレートを利用する場合

HTML, JS の変更・削除を行わず、現状でテンプレートを利用する場合は下記のように使って下さい。

1. ①はそのまま変更せず、②のJSをエリア変数で括り 記事ページに影響が出ないようにする。

   <!--not_permanent_area--><!--not_edit_area--><!--not_titlelist_area-->
   <script>
   [].forEach.call(document.querySelectorAll("img[data-src]"),function(a){a.setAttribute("src",a.getAttribute("data-src"));a.onload=function(){a.removeAttribute("data-src")}});
   </script>
   <!--/not_titlelist_area--><!--/not_edit_area--><!--/not_permanent_area-->

2. そのまま修正・更新しないで（更なる『画像遅延ライブラリ』の類を入れずに）既存のJSを使い記事内画像の遅延を行う。

   <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="画像URL" alt="画像の説明" width="画像の幅" height="画像の高さ">

   ↑ この形で書けば『画像遅延ライブラリ』を入れる必要無く記事内の画像遅延が出来ます。但し、スクロールでフワッと表示等の効果は付けられません。

3. そのまま修正・更新しないで、今後も『画像遅延ライブラリ』の類を導入しない。（← 要するに放置。^^;）

この度は現象のご報告、誠に有難うございました。m(__)m

散歩日記

3児の母のくだらない日記です☕️2017.6.10に暴れん坊のマルプー (名前:ケンシロウ,愛称:ケンケン) と一緒に暮らし始めました

017073ywbsyk.blog.fc2.com

一部テンプレートの「javascript:void(0);」を廃止。

ブログのエントリーページに『コメントリスト』を表示するテンプレートが対象です。

【対象テンプレート】

genial_resp2c,3c
serene_resp2c,3c
ct_responsive2c,3c
al_responsive2c,3c
candy-2c,3c
green-2c,3c
lace-al2,al3
lace-d2c,3c
dt21_ryo,ryo_2c

テンプレートの何処の場所か画像でご説明致します。（見本は genial_resp3c）

↓ 『 Comment-open 』をクリックすると

↓ コメントリストが展開し、最大10件の投稿コメントが表示されます。

この部分のHTMLは下記のようになっています。

HTML編集枠内の場所は、キーボードのCtrlキー＋Fキーを押して検索窓を出し、その中に a href="javascript:void(0);" を入れて探すと1ヶ所見付かります。

<!-- コメントリストが不要の場合はここから削除（１） -->
<!--not_permanent_area-->
<a href="javascript:void(0);" onClick="showHide('cmnt<%topentry_no>');"> Comment-open▼</a>

① 修正する場合は ↑ 上記の青い文字部分を ↓ 下記のオレンジ文字のように変更して下さい。

<!-- コメントリストが不要の場合はここから削除（１） -->
<!--not_permanent_area-->
<span style="cursor:pointer;color:テンプレートによるので下段を参照;" onClick="showHide('cmnt<%topentry_no>');"> Comment-open▼</span>

② テンプレートによるので下段を参照 の所に、各テンプレートのカラーコードを入れて下さい。

genial_resp2c,3c　#005860
serene_resp2c,3c　#753a06
ct_responsive2c,3c　#006699
al_responsive2c,3c　#ba6f6f
candy-2c,3c　#9d5555
green-2c,3c　#207e41
lace-al2,al3　#ac6837
lace-d2c,3c　#ac6837
dt21_ryo,ryo_2c　#c3e5fd

③ 最後に更新ボタンを押して完了です。（不具合が有った時のために、複製を作って作業すると安心です。）

昔ながらのやり方で、マウスを当てた時 指カーソルに変えるために aタグを使っていたのですが、リンク先が無いのでクリックしても遷移させないよう aタグのhref属性に「javascript:void(0);」と書いていました。

しかし、現在はあまり使われなくなった方法である事、そもそも aタグを使わなくてもスタイルで cursor:pointer; を指定すれば良い事に気が付き（← 今頃？！）、遅れ馳せながら書き換え致しました。

修正せずにそのままでも閲覧に問題有りませんが、Lighthouseで検証すると、SEOで「アンカー要素の `href` 属性に適切なリンク先が設定されていて、ウェブサイトの他のページを見つけられるようになっていることを確認してください。」と、お小言を言われます。気になる方は是非修正して下さいませ。m(__)m

↓ GoogleChrome のデベロッパーツールに有る Lighthouse で検証したSEO部分です。