テンプレートの修正・更新致しました。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> を使った場合は通常通りの表示です。レスポンスヘッダー(右)を見ると、preload されているのはスタイルシートだけになっています。(画像クリックで大きく表示)

↑ サムネイルに変数 <%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. そのまま修正・更新しないで、今後も『画像遅延ライブラリ』の類を導入しない。(← 要するに放置。^^;)

記事内に掲載する画像を遅延処理する一番簡単な方法は『 loading="lazy" 』を付ける事です。遅延用のJS等は不要で、HTMLタグの追加で実装できます。

今時のブラウザは大凡対応しているため安心して使えます。但しこちらも見栄え効果を付ける事は出来ませんし、ファーストビュー(スクロールせずに最初に目に入る部分)画像に付けるとLighthouseでチェックされてしまいます。(^^ゞ

なので、画像が先に入る場合は2番目の画像から付けると文句を言われません。

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

散歩日記

散歩日記

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

一部テンプレートの「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 』をクリックすると
テンプレートの場所説明1

↓ コメントリストが展開し、最大10件の投稿コメントが表示されます。
テンプレートの場所説明2

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

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

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

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

<!-- コメントリストが不要の場合はここから削除(1) -->
<!--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部分です。

テンプレートの場所説明3

Comments

No Subject

お疲れさまでした。
何が修正されたのか殆ど判っていませんでしたが、修正しました。

『コメントリスト』を表示するテンプレートがこんなにあるとは新発見です。
私は『コメントリスト』を外して使っているのですが、これなら再度つけてみようかしらんとも思ったり.笑

追記
『コメントリスト』を付けてみました。
そこで、一つ質問です。
>② テンプレートによるので下段を参照 の所に、各テンプレートのカラーコードを入れて下さい。
>ct_responsive2c,3c #006699

私のテンプレはダークですから、カラーコードは変わるのだろうと見たのですが、如何でしょうか?
私のテンプレで用いている他の文字色に揃えられれば嬉しいのですが、カラーコードを知る方法がありましたら、併せて教えていただければ幸いです
2022-09-10-11:03 呑兵衛あな
[ 返信 * 編集 ]
aki

Re: 呑兵衛あな 様へ

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

> 何が修正されたのか殆ど判っていませんでしたが、修正しました。

…そうですよね。何言ってんだか分からないですよね。^^; 色々言葉を選んで書いているんですけど、だんだんと書いているこっちも訳が分からなくなります。人に伝えるのって難しいですね。^^;
要は「JS外すのでソースを見直した」という事です。それによって無駄になるリクエストを減らせますし、記述量が減れば(微々たるものですが)早くなりますし。

> 『コメントリスト』を表示するテンプレートがこんなにあるとは新発見です。

…10年位前に、FC2共有テンプレートで一時流行った『装備』なので、共有テンプレート追加(PC用)画面の「テンプレートの説明」欄に「コメントリスト」と入れて検索すると多数出てきます。
が、残念ながら作者様の居ないものばかりです。^^;
実際、付けてた方が良いか悪いか、と言ったら何とも言えません。
コメントが殆ど付かないブログでは無意味な装備です。コメントが多いブログでは、そのページで記事の閲覧もコメントの閲覧も完結してしまい、個別記事へ行く事が無くなります。
そして常に投稿されたコメントがトップエントリーページにも出力されるので、貰ったコメントが多い分(各記事最大10件ずつ)、ページのデータ量が大きくなって重くなるという弊害も有ります。
なので、そこはユーザー様にお任せしたいので『要らない方はここから削除』にしているのです。

> 私のテンプレはダークですから、カラーコードは変わるのだろうと見たのですが、如何でしょうか?

…文字色はアンカーと同じにしています。なので、呑兵衛あな様の場合は
『 color: #a8c9e2; 』 です。
疑似クラスである :hover は、HTMLに直書きするスタイルでは使えないのでご容赦を。m(__)m
2022-09-10-19:13 aki
[ 返信 * 編集 ]

Re: aki 様へ

>要は「JS外すのでソースを見直した」という事です。

なるほど、それは嬉しい変更です。

>…10年位前に、FC2共有テンプレートで一時流行った『装備』

へぇ~、ですね。そんな事が流行るんですか。
「Comment-open」と「Comment」と、類似した、他のレンタルブログでは見かけない、機能なので。
その必要性にはハテナですね。

>『 color: #a8c9e2; 』

わかりました。早速修正しました。
ありがとうございました
2022-09-10-19:41 呑兵衛あな
[ 返信 * 編集 ]
aki

Re: 呑兵衛あな 様へ

お返事有難うございます。

> 「Comment-open」と「Comment」と、類似した、他のレンタルブログでは見かけない、機能なので。

…勿論、公式テンプレートには無い装備です。共有テンプレートが「自由に作れるFC2ブログだから」という事ですね。
まぁ、今は作る方も殆ど居ませんが、昔は変数やJSを駆使して色んなテンプレートが有ったんですよ。
古き良き…とは言いません。時代の流れで色々変わるものですし、必要かどうかは利用者が決めれば良いと思います。
ただ今後、私がテンプレートを作るとしたら…付けません。(~_~;)
(お返事は不要です。)
2022-09-10-21:11 aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2022-09-12-14:26 -
[ 返信 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2022-09-12-16:27 -
[ 返信 ]
aki

Re: 14:26- 様へ

こんばんは。
そちらでお話しますね。(^-^)
2022-09-12-22:23 aki
[ 返信 * 編集 ]
aki

Re: 16:27- 様へ

こんばんは。
そちらでお話しますね。(^-^)
2022-09-12-23:08 aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2022-09-12-23:43 -
[ 返信 ]
aki

Re: 23:43- 様へ

そちらにお伺いしてお返事致しました。
宜しくお願い致します。m(__)m
2022-09-13-01:17 aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2022-09-13-08:46 -
[ 返信 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2022-09-13-13:51 -
[ 返信 ]
aki

Re: 13:51- 様へ

こんばんは。そちらでお話し致しますね。(^_^)
2022-09-13-21:44 aki
[ 返信 * 編集 ]

jQuery 3.6.1を適用しました

私、21/03/22に「JQuery 3.6.0」に切り替え、以下の記述としていました。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

この度、「jQuery 3.6.1 Maintenance Release | Official jQuery Blog」にて、最新版のv3.6.1が公開された事を知りました。
https://blog.jquery.com/2022/08/26/jquery-3-6-1-maintenance-release/
ということで、22/09/17を以って「JQuery 3.6.1」に切り替え、以下の記述に変更してみました。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

今のところ、殊更の出来事・不都合は確認していません...という話題でした。

PS
こらは既に「JQuery 3.6.1」を利用しているんですね
2022-09-17-20:51 呑兵衛あな
[ 返信 * 編集 ]
aki

Re: 呑兵衛あな 様へ

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

「jQuery 3.6.1」について。
前のバージョンの時もそうですが『まず自分で適用して不具合が無いか確認』をしてからテンプレートに適用しています。
古いバージョンで無いと動かないJSも有るかもしれません。なのですぐにアップデートは致しません。
呑兵衛あな様のようにお詳しい方なら「不具合が有ったら前バージョンに戻す」という事も出来るでしょうが、皆さんそうとは限りませんので取り敢えず様子見しています。^^;

もし3.6.1で何か不具合が有りましたら、是非お教え下さいませ。m(__)m
2022-09-18-13:34 aki
[ 返信 * 編集 ]

報告です

一昨日ぐらいから、バリデーションチェックツールで
<br />とメタタグ等の最後にある/(半角スラッシュ)が警告の対象になったようです
トップページは<br />を<br>にすること等により自力で直せますが
コメント欄で自動出力される改行が<br />のようで、
どなた様の記事ページも警告だらけですごいことになっています
(;¯▿¯)
akiさんに報告したほうが良いかと思いコメントさせて頂きました


尚この件はぼっちん先生がFC2運営さんに御連絡してくださいました
2022-09-29-08:33 徳川たぬこ
[ 返信 * 編集 ]

Re: 徳川たぬこ 様へ

興味深く拝読しました。
ネット検索すると
>>HTMLの場合は <br> XTHMLの場合は <br /> を使用することを推奨されている。
とのことですが、他のXTHMLはどうなのでしょう。
他のレンタルブログを眺めましたら、livedoorブログ・はてなブログの記事記述でも<br />なんですね。
確認できないのですが、WordPressも..となったら事件ですね。

グチグチ書きましたがスルーしてください。
続編が掲載される事を期待しています
2022-09-29-14:20 呑兵衛あな
[ 返信 * 編集 ]

XHTML

この旧HTMLの歴史から引き継がれてきた問題。
私なりに整理してみました。

HTMLのバリデーター「WHATWG - HTML Conformance Checkers」
https://whatwg.org/validator/
で吐き出される評価にはエラーとWarningがあります。

エラーは赤文字で表示されHTMLとして機能しない部分です。この様な箇所があると表示がどうなるのかは保証されない致命的なエラーです。
Warning(警告)は推奨されていないか不要な部分で、他の部分に影響が出るかも知れないので止めましょう、という部分です。

今回の<br />に対するHTMLバリデータで吐き出された評価は

Warning: Self-closing tag syntax in text/html documents is widely discouraged; it’s unnecessary and interacts badly with other HTML features (e.g., unquoted attribute values). If you’re using a tool that injects self-closing tag syntax into all void elements, without any option to prevent it from doing so, then consider switching to a different tool.

(DeepLによる翻訳)
警告 text/html文書における自己閉鎖タグ構文は広く推奨されていません。不要であり、他のHTML機能(例えば引用されない属性値)と悪い相互作用があります。もし、すべてのvoid要素に自己閉鎖タグ構文を注入するツールを使っていて、それを防ぐオプションがない場合は、別のツールに切り替えることを検討してください。

という警告ですね。

で<br />という要素はHTML(HTML5)ではなくてXHTMLという別のマークアップ言語による記述です。
この、XHTMLでは必須とされていたbr要素やmeta要素、img要素の最後のスラッシュ「/」は現状のHTML(HTML5)では廃止されていますが禁止はされていません。やめてください、という強いお願い。(私の主観ですが)
にもかかわらず、こんなweb上の記事を表示する大手のChrome、Firefox等は独自に解釈して旨く表示してくれています。


WEB上に記事を表示するには記事のトップにWEB規則の、どの記述に従って記述しているかの宣言が必要です。
私のブログでは
<!DOCTYPE html>
と宣言しています。(HTMLトップに書いてます)なので私の記事はHTML基準の表記に従って記述していますと云うことですね。でXHTMLではバージョンに従って!DOCTYPEの宣言をしなくてはいけないようです。

!DOCTYPEの宣言 – HTML5/HTML4/XHTMLで正しい指定方法
https://style.potepan.com/articles/19149.html


<br />という記述はxhtmlでは必須ですからこう書かないとエラーです。
html5ではそう書くとエラーとまでは言われませんが非推奨の指摘を受けます。
https://vanillaice000.blog.fc2.com/blog-entry-471.html
はAkira氏の記事ですが、XHTMLでは<br />と書かなければいけません。HTMLではそう書かないでください(警告)。ただブラウザは柔軟に対応しています。

ライブドア自体がどんなセンスを持っているのかは
ライブドアブログ スタッフブログ
https://staff.livedoor.blog/
というスタッフのブログを見ると判りますが<br />の記述はありません。ですがimg要素やmeta要素の最後にスラッシュが残っているので・・・・。
あとユーザーのブログには<br />の記述が残っているのでテンプレートの影響かな?

FC2ブログに関しては以前Akira氏(https://vanillaice000.blog.fc2.com/)の記事かコメントにFC2ブログは中国でも使われておりそのテンプレートがXHTMLなのがあるのでXHTMLの記述を残さざるを得ないのではと。
XHTMLでは必ず<br />。HTMLでは廃止推奨。ならXHTMLを残そうかと。

日本のFC2ブログのテンプレートやプラグインを整理できるのかどうかと云うことに関わる問題だと思いますねぇ。
2022-09-29-21:53 hige
[ 返信 * 編集 ]

すんません

自ブログで記事にします
多分

のつもり
2022-09-29-22:37 hige
[ 返信 * 編集 ]
aki

Re: 徳川たぬこ様, 呑兵衛あな様, hige様 へ

遅くなりましたが、纏めてのお返事で更にスミマセン。

徳川たぬこ様:
突然警告が出るとビビりますよね。まぁ、コメント部での出力はどうにも出来ないので放置…しか無いでしょう。^^;
ぼっちんさんが運営に連絡しているとの事ですし、何かしら考えてくれると良いのですが…多分難しいでしょう。
higeさんが書いてくれているように、共有テンプレートには HTML4.01もXHTMLも有りますので、それらが有る限り<br />を直してくれる事は無いと思います。
運営側でテンプレートのドキュメントタイプ宣言(<!DOCTYPE html> のような、HTML文書ファイルの先頭に有るやつ)によって出し分けでもしてくれたら良いんだけども…無理でしょう。(~_~;)
当テンプレートにもパンくずリストの構造化ソース内に『空要素にあるスペース,スラッシュ』が階層分(3ヶ所)有るので、それについては近日記事にして、修正は(重大なエラーでは無いので)次の更新で行います。
ご連絡 有難うございました。m(__)m


呑兵衛あな様:
>> HTMLの場合は <br> XTHMLの場合は <br /> を使用することを推奨されている。
先ず、打ち間違いだとは思いますが…XTHMLでは無くXHTMLです。(^^)
詳しくはhigeさんが書いてくれているので、そちらを読んで下さいませ。(後日構造化データ部位の修正記事を書くので暫しお待ちを。)


hige様:
詳しいコメントを残して頂き感謝です!私が説明したい事を全て網羅しています。
もし、そちらで記事にして頂けるのなら、当ブログでリンクさせて頂きますね!
有難うございました!! m(__)m
2022-09-29-23:34 aki
[ 返信 * 編集 ]





非公開コメント