テンプレートの修正・更新致しました。21/10/26

昨日、テンプレート内で気になった箇所とコメント等で頂いた問題について修正・更新を致しましたので、遅れ馳せながらご報告致します。

この度の修正・更新を行わなくても使用上の不具合は出ません。

今迄使っているテンプレートに不便が無い場合はそのままお使い頂いても大丈夫です。

  1. テンプレート内の target="_blank" を一部削除、他 noopener に noreferrer を付けました。
  2. エントリー要約表示のサムネイル画像の変数を変更し loading="lazy" を付けました(全文表示は作業不要)。
  3. 記事の投稿日時及び更新日時を time要素に修正し構造化データにしました。

1 ) テンプレート内の target="_blank" を一部削除、他 noopener に noreferrer を付けました。

当方の制作したテンプレート内には約3ヵ所の target="_blank" が有ります。

その中の target="_blank" rel="noopener" になっているものにはプラス noreferrer を追加しました。これは Internet Explorer(以下IE)で noopener が効かないためです。

2022年6月16日(日本時間)に IE のサポートが終了しますので、それまでの措置として追加しました。

因みにサポート終了後は、IE の代わりに Microsoft Edge が起動するようになるそうです。(但し Windows 10 以前のOSは対象外なので、古い windows 利用者用に noreferrer 追加。) IE コンテンツを継続して利用する場合は Microsoft Edge の「IEモード」で閲覧できますが、「IEモード」も 2029 年でサポートが終了するとの事。終了後は IE コンテンツを閲覧できなくなります。

target="_blank"を削除した箇所はトラックバックの下記部分です。(多分殆ど使わない場所。^^;)

<!--trackback-->
<div id="trackback<%tb_no>" class="comment"><a href="<%tb_url>" title="<%template_trackback>" target="_blank"><%tb_title></a>

2 ) エントリー要約表示のサムネイル画像の変数を変更し loading="lazy" を付けました(全文表示は作業不要)。

今迄の画像変数でも問題無いのですが、この度の更新で変更したサムネイル画像の変数は自動で rel="preload" してくれるため使う事に。ただ、FC2側で変数に調整(preload 辞めるとか)を入れる場合も考えて loading 属性も追加しました。

現時点(2021年10月)では Safari が未対応なので、今迄の遅延用JSもそのまま入れています。

can i use (Lazy loading via attribute for images & iframes)

追記:2021/11/06「一旦 loading="lazy" 外します(意志薄弱でスミマセン)。」の記事ように、loading="lazy" をテンプレートから外しました。理由については2021/11/06の記事をご覧下さい。m(__)m

<div class="left">
<a href="<%topentry_link>"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="<%topentry_image_url>" width="320" height="140" 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>"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="<%topentry_image_url_760x420>" width="760" height="420" alt="<%topentry_title>" loading="lazy"><!--body_img_none--><!--/body_img_none--><div class="mask"><span class="caption">Read this article</span></div></a>
</div>

3 ) 記事の投稿日時及び更新日時を time要素に修正し構造化データにしました。

今更ながら…<time>タグ、使っていませんでした。m(__)m

先ず簡単に、この度取り付けたものを説明致します。

<time>タグ(time要素)

timeタグ(time要素)は「日付や時刻」を表し(IEは未対応)、検索エンジンに「時」を示す事が出来ます。そしてこのタグに datetime属性と itemprop属性を用いると、より正確に日時と意味を検索エンジンに伝える事が出来ます。

  • datetime属性

    datetimeは日時を指定する属性です。値は正確な日時を定められた書式で記述する必要が有ります。

  • itemprop属性

    itempropは Microdata のプロパティを指定する属性です。timeタグに itemprop を設定すると、datetime属性の日時が持つ意味を検索エンジンに伝える事が出来ます。

公開日:datePublished
例:<time itemprop="datePublished" datetime="2021-8-30">2021-8-30 (Mon) </time>

更新日:dateModified
例:<time itemprop="dateModified" datetime="2021-9-20">2021-9-20</time>

この度の更新では、FC2の変数を使って正しい書式に則り上記の形になるよう修正しました。

既にお持ちの当方共有テンプレートにカスタマイズを施す場合は、下記「Read More」を開いてお読み下さい。(よく分からない場合は、テンプレートを再ダウンロードして頂くかそのまま弄らないという選択も賢明かと。^^;)

また、先日コメントにて「更新の有った時にだけ日付を表示するJavaScript」をSuper源さん氏にお教え頂きました。
『投稿日時と更新日時を比較し、更新日時が新しい場合のみ表示するscript』

こちらも構造化データで表示出来たので、ご興味の有る方は「Read More」を開いた一番下を是非ご覧下さいませ。

① 先ず、この要素がアイテムである事を表す itemscope 属性を構造化データのマークアップに使います。

itemtype 属性はマイクロデータのタイプで、ブログの場合は itemscope itemtype="https://schema.org/BlogPosting" このような形。

これを記事の投稿日・更新日が含まれる範囲(当ブログの場合は<!--topentry--> の<article> )に記述します。

キーボードのCtrlキー+Fキーを押して検索窓を出し、その中に下記の文言を入れて下さい。

<!-- トップページ ここから-->

1ヵ所見付かるので、その2行下の <article> 部分に、オレンジ文字を追加して下さい。

<!-- トップページ ここから-->
<!--topentry-->
<article <!--permanent_area-->itemscope itemtype="https://schema.org/BlogPosting" <!--/permanent_area-->class="blog-con blog-con2">
class名部分は class="con1" や class="con2" の場合も有り

② 次に記事タイトル部分を変更します。
キーボードのCtrlキー+Fキーを押して検索窓を出し、その中に下記の文言を入れて下さい。

id="entry<%topentry_no>"

1ヵ所見付かるので、オレンジ文字を追加して下さい。(もし複数有ったら一番初めのもの)

<h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2>
↑上記に↓オレンジ文字を追加
<h2 <!--permanent_area-->itemprop="headline" <!--/permanent_area-->id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2>

③ 次に投稿日部分を変更します。
キーボードのCtrlキー+Fキーを押して検索窓を出し、その中に下記の文言を入れて下さい。

<%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)

1ヵ所見付かるので、その文字列を含めた青文字の部分に、オレンジ文字をコピペで貼り換えて下さい。

<%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)
<!-- 投稿時間不要の場合は ここから-->
<!--permanent_area-->&nbsp;<%topentry_hour>:<%topentry_minute><!--/permanent_area-->
<!-- 投稿時間不要の場合はここまでを削除 -->

↑上記部分を↓下記のように変更

<time <!--permanent_area-->itemprop="datePublished"<!--/permanent_area-->datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)
<!-- 投稿時間不要の場合は ここから-->
<!--permanent_area--> <%topentry_hour>:<%topentry_minute><!--/permanent_area-->
<!-- 投稿時間不要の場合はここまでを削除 -->
</time>

④ 最後に更新日部分を変更します。
キーボードのCtrlキー+Fキーを押して検索窓を出し、その中に下記の文言を入れて下さい。

<!-- 最終更新日不要の場合は ここから-->

1ヵ所見付かるので、その文字列を含めた青文字の部分に、オレンジ文字をコピペで貼り換えて下さい。

<!-- 最終更新日不要の場合は ここから-->
<!--permanent_area--><div style="text-align:right;margin:0 10px;">Last Modified : <%topentry_modified_year>-<%topentry_modified_month>-<%topentry_modified_day></div><!--/permanent_area--><!-- 最終更新日不要の場合はここまでを削除 -->

↑上記部分を↓下記のように変更

<!-- 最終更新日不要の場合は ここから-->
<!--permanent_area--><div style="text-align:right;margin:0 10px;">Last Modified : <time datetime="<%topentry_modified_year>-<%topentry_modified_month>-<%topentry_modified_day>T<%topentry_modified_hour>:<%topentry_modified_minute>:<%topentry_modified_second>+09:00" itemprop="dateModified"><%topentry_modified_year>-<%topentry_modified_month>-<%topentry_modified_day></time></div><!--/permanent_area-->
<!-- 最終更新日不要の場合はここまでを削除 -->

● 後は更新ボタンを押して完了です。(不具合が有った時のために複製を作っておくと安心です。)

カスタマイズが終わったら、必ず投稿日・更新日がキチンと構造化データになっているかを下記のサイトで確認して下さい。

リッチリザルトテストツール
https://search.google.com/test/rich-results?hl=ja

リッチリザルトテスト0

使い方は、枠内に対象ページのURLまたはコードを入力します。リッチリザルトに対応してるページであれば以下のような検出結果が表示されます。(構造化データは個別記事のみです。検索する場合は個別記事のURLを入れて下さい。)

リッチリザルトテスト1

↑ 記事に警告の三角マークが出ているのでその行をクリックします。

リッチリザルトテスト2

↑ 更に三角マークが付いた記事タイトルをクリックします。

リッチリザルトテスト3

↑ 任意項目は三角マークになっていますが、記事タイトル・投稿日・更新日が構造化データになっていればOKです。


Super源さん氏にお教え頂いた『投稿日時と更新日時を比較し、更新日時が新しい場合のみ表示するscript』です。

頂いたコメントのまま(プラス、FC2ブログのエリア変数は必要)でも利用できますが、折角なので構造化データにして使う方法を掲載致します。

先ず、上記①~③までを実施します。④番部分を下記のようにして下さい。

<!-- 最終更新日不要の場合は ここから-->
<!--permanent_area--><div style="text-align:right;margin:0 10px;">Last Modified : <%topentry_modified_year>-<%topentry_modified_month>-<%topentry_modified_day></div><!--/permanent_area--><!-- 最終更新日不要の場合はここまでを削除 -->

↑上記部分を↓下記のように変更

<!-- 最終更新日不要の場合は ここから-->
<!--permanent_area--><div id="renewal_date"></div><!--/permanent_area-->
<!-- 最終更新日不要の場合はここまでを削除 -->

⑤ HTML編集枠内 </body> の直前に下記の JavaScript を追加します。

<!--permanent_area--><!--topentry-->
<script>
if(document.getElementById("renewal_date")){if("<%topentry_year><%topentry_month><%topentry_day>"!="<%topentry_modified_year><%topentry_modified_month><%topentry_modified_day>"){document.getElementById("renewal_date").innerHTML='Last Modified:<time datetime="<%topentry_modified_year>-<%topentry_modified_month>-<%topentry_modified_day>T<%topentry_modified_hour>:<%topentry_modified_minute>:<%topentry_modified_second>+09:00" itemprop="dateModified"><%topentry_modified_year>-<%topentry_modified_month>-<%topentry_modified_day></time>'}};
</script>
<!--/topentry--><!--/permanent_area-->

⑥ スタイルシート編集枠内 一番下に下記スタイルを追加します。

#renewal_date {
  text-align:right;
  width:100%;
  display:inline-block;
  line-height:16px;
}
#renewal_date img {
  width;16px;
  height:16px;
  vertical-align:-3px;
}

● 後は更新ボタンを押して完了です。カスタマイズが終わったら、必ず投稿日・更新日がキチンと構造化データになっているかを下記のサイトで確認して下さい。

リッチリザルトテストツール
https://search.google.com/test/rich-results?hl=ja

Super源さん氏のブログは↓コチラ。面白い記事が沢山♪お勧めです。(^-^)

Super源さんの雑学事典

Super源さんの雑学事典

TV・書籍・ネットサーフィンなどで得た、雑学、トリビア、お役立ち情報などを分かりやすく綴るサイトです。無料で使えるオンライン便利ツールやブログパーツも公開&配布しています。

Comments

全文表示の場合

お疲れさまです。
早速修正を試みようとしたのですが、戸惑っています。

私の場合、ct_responsive3cを全文表示に改造して使ってます。
それも、akiさんが改造してくださった物が原本になっており、それを元にして小さな好みをチマチマと私が手を入れた物です。
この度の修正部位を見ましたところ、私が現在利用している物とは著しく相違している事に気が付きました。
ということで調べましたところ、私が利用している物は「修正・更新と現行レスポンシブテンプレまとめ.2019-04-05」である事を知りました。
https://sorauta1.blog.fc2.com/blog-entry-311.html

そこで御願いがあります。
前記解説の最新版を御提供くだい。

PS.現在の当方は「2) エントリー要約表示のサムネイル画像の変数を変更し loading="lazy" を付けました。」を除き、本記事に関する修正は完了しています。
2021-10-28-10:18 呑兵衛あな
[ 返信 * 編集 ]
aki

Re: 呑兵衛あな 様へ

こんばんは。ご質問有難うございます。

1)の修正について。
終わっているとの事ですが、HTMLを拝見しましたらブログ上部に有る「お気に入りRSS」に rel="noopener" だけが付いている状態です。
リンク先は全てご自身のブログなので target="_blank" は無くても構わないと思いますが、 rel="noopener" は target="_blank" が無ければ意味を成しません。
なので、 target="_blank" rel="noopener" にするか rel="noopener" を外して何も無しにするかでお考え下さい。

2)の修正について。
記事の2)を「全文表示は作業不要」の文言を追加致しました。
全文表示のカスタマイズをされている方、初めから全文表示のテンプレートを使っている方は作業する必要は有りません。そもそもエントリーページにサムネイル表示がされないようにしているので、テンプレートのHTMLを修正しても無意味になります。
2)の部分は要約表示テンプレートを使っている方のみが対象ですので、修正作業は不要です。誤解を招くタイトルで申し訳ございませんでした。

3)は大丈夫のようですね。こちらでもリッチリザルトテストで確認致しました。

お疲れ様でした。m(__)m
2021-10-28-23:04 aki
[ 返信 * 編集 ]

Re: aki 様へ

御指導いただき、ありがとうございます。
1)の修正について修正しました。3)については承知しました。

私が本コメントで質問したかったことは、2)についてです。
サムネイル表示に関する事であり、「全文表示は作業不要」と推察はしましたが、
2019-04-05に全文表示として解説されている記事のタグと、現行の要約表示のタグの位置等に随分と相違点が見受けられるので、最新版の御提供を御願いした次第です。
現行の解説で問題無しであれば、そういうことて承知いたします。
ありがとうございました。

追伸
2)について、[serene_resp2c-r] が全文表示として提供されていた事を思い出し、当該部位のHTMLを参照したところ、私の疑問が解消しました
2021-10-29-08:13 呑兵衛あな
[ 返信 * 編集 ]
aki

Re: 呑兵衛あな 様へ

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

記事に有るようなHTMLに変更しても全文表示の場合はサムネイルが表示されません(故に不要)、という意味でしたが「表示されなくても変更したい」という意味でしたか。
そちらに伺いましたら直されたようですね。大変失礼致しました。m(__)m

ただ他者に至っては、改変をする事で間違った状態になる事が有りますので「全文表示の場合は改変不要」としました。
他者がどこまで修正歴を重ねているかはこちらでは分からないためです。どうぞご理解下さいませ。
(返信は不要です)
2021-10-29-14:39 aki
[ 返信 * 編集 ]

akiさん、こんにちは。( ^-^)/

記事の更新、お疲れ様でした。
そして、私のscriptの紹介、ありがとうございます。\(^o^)/
しかも、構造化データに対応して下さったばかりか、ブログの紹介まで…。(T^T) ウルウル←ウレシナキ デス

秀樹、じゃなかった、Super源さん、感激。ヘ(^o^)ノ*

家庭の事情で、しばらくブログにかける時間があまり取れませんが、【><】余裕ができたらこちらのscriptを実装させていただきたいと思います。
ありがとうございました。(^O^)

取り急ぎ、お礼まで。m(__)m
2021-11-02-15:35 Super源さん
[ 返信 * 編集 ]
aki

Re: Super源さん 様へ

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

いえいえこちらこそ script のご伝授感謝致します。
更新利用は見送りましたが、カスタマイズとして掲載させて頂きました。
実際、更新が有った時だけ表示されれば良い訳ですものね。(^-^)

構造化データで書いてみましたが、もしご利用頂いた後に不具合等を見付けられましたらお教え下さいませ。
また、今後も是非♪ご提案が有りましたらご連絡下さい。宜しくお願い致します。m(__)m
2021-11-02-23:01 aki
[ 返信 * 編集 ]





非公開コメント