"JetTheme" yyyy/m/d 日付フォーマット 対応版リリース！

　クールで表示速度が速い「JetTheme」テンプレート作者のNovさんに不具合に関して相談していた最中、「日本の標準日付書式フォーマットにデフォルト対応して欲しい」と要望を挙げたところ　何とその日に対応してくれました！　まさに、神対応！！

　「午後休」にして、翻訳サイトを駆使した甲斐があった...

　[1] "RELATED POST", "RECENT POST" は投稿日のみを 常に yyyy/M/d 表示（前ZEROなし）

　[2] その他の日付はフォーマット指定可能で、yyyy/M/d　yyyy/MM/dd　yyyy-M-d　yyyy-MM-dd 表記を確認ずみ

　既に GitHub からダウンロード可能ですが、デフォルトでは Novさんの母国「インドネシア」の日付フォーマットが指定されているため　その変更方法を説明致します！　
また、今回のリリースに対応した「更新日付表示方法」（"RELATED POST", "RECENT POSTS" は非対応）もご紹介！

　まずは、GitHub からダウンロード！　

　 ダウンロードは、こちらから！

GitHub画面にて　緑色の「Code」ボタン　をクリックし、一番下の「Download zip」を選択すると、ダウンロードが開始されます。


　(0) いつでも元に戻せるように、現状の「XMLファイル」をバックアップ！
Blogger 管理画面 で　[テーマ] 画面を開き、中央のオレンジ色 [カスタマイズ] 右側の「🔽」ボタンをクリックし、一番上の「バックアップ」を選択

　(1) 初めて　JetTheme テンプレートを利用する方は 初期化のため、"blank.xml" をテキストエディタで開き　エディタのコード内でクリック

　(2) [command (Ctrl) ]+[A] にて全選択後、[command (Ctrl) ]+[C] でコピー

　(3) Blogger 管理画面 で　[テーマ] 画面を開き、中央のオレンジ色 [カスタマイズ] 右側の「🔽」ボタンをクリックし、下から２番目の「HTMLを編集」を選択

　(4) コード内でクリック後、[command (Ctrl) ]+[A] にて全選択し、[command (Ctrl) ]+[V] にて貼り付け後　右上の「保存」ボタンをクリックして　修正内容を保存

　(5) Blogger 管理画面 で　[テーマ] 画面を開き、中央のオレンジ色 [カスタマイズ] 右側の「🔽」ボタンをクリックし、上から２番目の「元に戻す」を選択

　(6) HTMLやCSSをほとんど弄ったことがない方は "jettheme-v2.min.xml"、フルカスタマイズ可能にする場合は "jettheme-v2.xml" にて「XMLファイル」を　まるごと　置換
　　（ どちらを選んでも、以降で説明する「更新日付を表示するカスタマイズ」は可能 ）

　※初心者用の画面つきの説明は、もう少し　お待ちください。　

　"RELATED POST", "RECENT POST" 以外の「日付」書式設定方法　

　「投稿日付」と「更新日付」の両方に反映！　

　Blogger 管理画面 から [レイアウト] - [ブログの投稿ガジェット] 右上の「鉛筆」アイコンをクリックし、以下の編集画面を表示します。　（少し　下に　スクロールする必要あり）

　以下のように修正後、「保存」して再表示すると　反映されます！（"RELATED POST", "RECENT POSTS" 以外の日付）　キャッシュのクリアが必要かもしれません。

　　確認済みの「日付」表示フォーマット
　　　(1)　yyyy/M/d　
　　　(2)　yyyy/MM/dd　
　　　(3)　yyyy-M-d　
　　　(4)　yyyy-MM-dd　

　なお、本来は時刻の書式設定ですが　ここに記述した「日付書式」を参照しているだけなので、問題なく４部品の日付書式が変更されます！
「設定」内にある日付表示書式を「Ｖ２のテンプレート」から参照できないみたいで、苦肉の策です。

　以下は、（ format 演算子の問題点にて ）参考として挙げた「しおぐまー」さんの記事から抜粋！

「年」を表すシンボルは西暦の数値に置き換えます。注意点として、小文字の yy や yyyy は年月日表記の年を表すのに対し、大文字の YY や YYYY は週番号表記の年を表します。たとえば、年月日表記での「2017年12月31日」は週番号表記での「2018年第1週の日曜日」と同じ日を指しています。このように、同じ日を指していても yyyy と YYYY は合致しないことがあります。週についての詳細は後述する「週番号」の項目を参照してください。

yy
西暦の年の下二桁

yyyy
西暦の年

YY
その日が属している週の、西暦の年の下二桁

YYYY
その日が属している週の、西暦の年

　日本人の場合は「年」は　yyyy　か　yy　を利用した方が良いみたいですね。
　カレンダーが米国では「日曜」から始まり、英国を含む欧州では「月曜」から始まるように　こんな所にも宗教が関係するとは...
なお、 「月」と「日」に関しては、下表の通り！

　更新日付表示で利用する　SVGアイコン　

　今回は、Bootstrap SVGアイコンをご紹介しますが、お好きなのものをご利用ください。
（ "JetTheme" テンプレートは Bootstrap フレームワークを採用しています）
　 Bootstrap icons！

　Blogger 管理画面 から [レイアウト] にて　一番下までスクロールし、JetTheme Settings の [SVG Icons] 右上の「鉛筆」アイコンをクリックし、編集画面を表示します。

　以下のコードを、コンテンツ欄の末尾に貼り付け後、一番右下の「保存」アイコンをクリックして修正内容を保存。（改行後に貼り付けると、メンテが楽です！）

<symbol id='bi-arrow-clockwise' viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/><path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/></symbol>

　SVGアイコンの線が太すぎるので、調整用のCSSを追加します。　既にCSSを追加している方はその辺り（直後など）に追加し、初めてCSSを追加する方は　以下のように「テーマ」経由でも追加可能です。


　(1) Blogger 管理画面 で　[テーマ] 画面を開き、中央のオレンジ色 [カスタマイズ] ボタンをクリック

　(2) 画面左上の[詳細設定] クリック後に表示される _Main Color　右側の「🔽」ボタンをクリックして　一番下までスクロールし、「CSS を追加」を選択

　(3) 「カスタム CSSを追加」と表示される部分に　以下のコードを貼り付け後、一番右下の「保存」アイコンをクリックして修正内容を保存

.bi-arrow-clockwise {
	fill: currentColor !important;	/* 塗りつぶす色 */
	stroke-width: 1px !important;	/* 線が細い方が好みの方は 0 に変更 */
}

　「更新日付表示」変更コード　

　data:post.date.iso8601　で検索すると　５箇所の「行」がヒットします。
４箇所目は置換しません。　１〜３箇所めを同一コードで置換し、５箇所めを別コードで置換します！
（1行　まるごと　置き換えます）


　なお、検索は「HTMLを編集」画面で　コード内の先頭（1行目の最後とか）をクリック後　[command (Ctrl)] + [F]　で可能です。
キーワード入力後 [return] キーを押してください。

　コード内でクリックした箇所以降を対象として「再検索」するには、再度　[command (Ctrl)] + [F]　で可能で、キーワードの変更が無ければ　そのまま　[return] キーを押してください。

<small class='me-2'><svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-clock'/></svg><span class='date-format' expr:data-date='data:post.date.iso8601'><b:eval expr='data:jwidget.allBylineItems.timestamp.label ? data:post.date format data:jwidget.allBylineItems.timestamp.label : data:post.date'/></span></small>

　上記の１〜３箇所めの「行」を以下のコードで　まるごと　置換します！

<small class='me-2'><svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-clock'/></svg>
  <span class='date-format' expr:data-date='data:post.date.iso8601'><b:eval expr='data:jwidget.allBylineItems.timestamp.label ? data:post.date format data:jwidget.allBylineItems.timestamp.label : data:post.date'/></span>
  <b:if cond='data:post.date != data:post.lastUpdated'>
  &amp;nbsp;&amp;nbsp;<svg aria-hidden='true' class='me-1 jt-icon bi-arrow-clockwise'><use xlink:href='#bi-arrow-clockwise'/></svg>
  <span class='date-format' expr:data-date='data:post.lastUpdated.iso8601'><b:eval expr='data:jwidget.allBylineItems.timestamp.label ? data:post.lastUpdated format data:jwidget.allBylineItems.timestamp.label : data:post.lastUpdated'/></span>
  </b:if>
</small>

<div class='me-3'><svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-clock'/></svg><span class='date-format' expr:data-date='data:post.date.iso8601'><b:eval expr='data:jwidget.allBylineItems.timestamp.label ? data:post.date format data:jwidget.allBylineItems.timestamp.label : data:post.date'/></span></div>

　上記の５箇所めの「行」を以下のコードで　まるごと　置換します！

<div class='me-3'><svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-clock'/></svg>
  <span class='date-format' expr:data-date='data:post.date.iso8601'><b:eval expr='data:jwidget.allBylineItems.timestamp.label ? data:post.date format data:jwidget.allBylineItems.timestamp.label : data:post.date'/></span>
  <b:if cond='data:post.date != data:post.lastUpdated'>
  &amp;nbsp;&amp;nbsp;<svg aria-hidden='true' class='me-1 jt-icon bi-arrow-clockwise'><use xlink:href='#bi-arrow-clockwise'/></svg>
  <span class='date-format' expr:data-date='data:post.lastUpdated.iso8601'><b:eval expr='data:jwidget.allBylineItems.timestamp.label ? data:post.lastUpdated format data:jwidget.allBylineItems.timestamp.label : data:post.lastUpdated'/></span>
  </b:if>
</div>

　画面右上の保存アイコンをクリックして「保存」後にブログサイトを再表示すると、更新日が異なる場合のみ　表示されるはずです！（キャッシュのクリアが必要かもしれません）

　data:post.date != data:post.lastUpdated　で日付比較をしているのは iso付きだと時刻まで完全一致しないと「同一日付」とみなしてくれなかったからです。

　余白は me-数字 のクラスが margin-right 指定のため、  や 漢字SPACE とかも利用して調整してください。

　format 演算子 が「９時間前の日付と時刻（ UTC ）」を返す問題点　

　日付誤り対応版「更新日付表示」変更コード　

　修正の仕方（操作方法）が解らない方は「前章」をご覧ください！

　HTMLのみで対応する方法を　以下に示します。　日付書式指定の再指定が必要なこと　ご留意くださいませ！
（　サンプルは、yyyy/MM/dd　指定の場合　）　コードをよく眺めれば、yyyy-MM-dd あるいは yyyy/M/d 等に変更できると思いますので...
　<data:post.date.year/>　と　<data:post.lastUpdated.year/>　がヒントですよ。


　data:post.date.iso8601　で検索すると　５箇所の「行」がヒットします。
４箇所目は置換しません。　１〜３箇所めを同一コードで置換し、５箇所めを別コードで置換します！
（1行　まるごと　置き換えます）

<small class='me-2'><svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-clock'/></svg><span class='date-format' expr:data-date='data:post.date.iso8601'><b:eval expr='data:jwidget.allBylineItems.timestamp.label ? data:post.date format data:jwidget.allBylineItems.timestamp.label : data:post.date'/></span></small>

　上記の１〜３箇所めの「行」を以下のコードで　まるごと　置換します！

<small class='me-2'><svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-clock'/></svg>
  <span class='date-format' expr:data-date='data:post.date.iso8601'><data:post.date.year/>/<b:eval expr='data:post.date.month lt 10 ? &quot;0&quot; + data:post.date.month : data:post.date.month'/>/<b:eval expr='data:post.date.day lt 10 ? &quot;0&quot; + data:post.date.day : data:post.date.day'/>
  </span>
  <b:if cond='data:post.date != data:post.lastUpdated'>
  &amp;nbsp;&amp;nbsp;<svg aria-hidden='true' class='me-1 jt-icon bi-arrow-clockwise'><use xlink:href='#bi-arrow-clockwise'/></svg>
  <span class='date-format' expr:data-date='data:post.lastUpdated.iso8601'><data:post.lastUpdated.year/>/<b:eval expr='data:post.lastUpdated.month lt 10 ? &quot;0&quot; + data:post.lastUpdated.month : data:post.lastUpdated.month'/>/<b:eval expr='data:post.lastUpdated.day lt 10 ? &quot;0&quot; + data:post.lastUpdated.day : data:post.lastUpdated.day'/>
  </span>
  </b:if>
</small>

<div class='me-3'><svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-clock'/></svg><span class='date-format' expr:data-date='data:post.date.iso8601'><b:eval expr='data:jwidget.allBylineItems.timestamp.label ? data:post.date format data:jwidget.allBylineItems.timestamp.label : data:post.date'/></span></div>

　上記の５箇所めの「行」を以下のコードで　まるごと　置換します！

<div class='me-3'><svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-clock'/></svg>
  <span class='date-format' expr:data-date='data:post.date.iso8601'><data:post.date.year/>/<b:eval expr='data:post.date.month lt 10 ? &quot;0&quot; + data:post.date.month : data:post.date.month'/>/<b:eval expr='data:post.date.day lt 10 ? &quot;0&quot; + data:post.date.day : data:post.date.day'/>
  </span>
  <b:if cond='data:post.date != data:post.lastUpdated'>
  &amp;nbsp;&amp;nbsp;<svg aria-hidden='true' class='me-1 jt-icon bi-arrow-clockwise'><use xlink:href='#bi-arrow-clockwise'/></svg>
  <span class='date-format' expr:data-date='data:post.lastUpdated.iso8601'><data:post.lastUpdated.year/>/<b:eval expr='data:post.lastUpdated.month lt 10 ? &quot;0&quot; + data:post.lastUpdated.month : data:post.lastUpdated.month'/>/<b:eval expr='data:post.lastUpdated.day lt 10 ? &quot;0&quot; + data:post.lastUpdated.day : data:post.lastUpdated.day'/>
  </span>
  </b:if>
</div>

　画面右上の保存アイコンをクリックして「保存」後にブログサイトを再表示すると、更新日が異なる場合のみ　表示されるはずです！（キャッシュのクリアが必要かもしれません）

　data:post.date != data:post.lastUpdated　で日付比較をしているのは iso付きだと時刻まで完全一致しないと「同一日付」とみなしてくれなかったからです。

　余白は me-数字 のクラスが margin-right 指定のため、&nbsp; や 漢字SPACE とかも利用して調整してください。

　応用編として、曜日付きの年月日表示にすることも可能です。　分かりやすく説明してくれる　ふじやん さんの記事をご紹介！

　「SNSボタン」を日本版に置換　

　JetTheme 純正の記事上「SNSボタン」を　５個の「日本版SNSボタン」に置き換えます。（記事下にも設置可能）

　[1]Twitter　[2]Facebook　[3]はてなブックマーク　[4]Pocket　[5]LINE

　  「日本版SNSボタン」への置換方法は、こちら！

　2021/12/09　Pinterest を加えた６ボタンのコード　を追記

　記事下「（ハッシュ）タグ」表示を、「タグ＋カテゴリ」表示に変更！　

　「 #付きのタグ」を利用しないと　記事下ラベル表示部分には　何も表示されないため、「カテゴリ（ラベル）」のみ利用の方でも　ラベル表示されるよう...

　このカスタマイズを行うと、「 #付きのタグ」の後に、「カテゴリ」が表示されるようになります。　
　なお、ラベルを「カテゴリ」と「 #付きのタグ」に分類する場合、投稿ごと　１カテゴリ　に再分類するよう、推奨致します。（大分類扱い）

　   記事下「タグ＋カテゴリ」表示に変更する場合は、こちら！

　シンタックスハイライト　highlight.js　→　Prism.js　

　シンタックスハイライト、今まで利用していた highlight.js から　Prism.js へ移行しました！ 

　 Prism.js 表示サンプル と Prism.css ダウンロードは、こちらから！

　Google Analytics GA4 id設定　注意点！　

　2021/12/09　追記。　筆者みたいに間違えないでね！

　JetTheme で GA4 のGoogleアナリティクス id を設定してから測定されないので確認したら、「測定id」ではなく「ストリームid」を誤って指定していた凡ミスが判明　

　なお、Blogger 管理画面　[収益] の設定画面にて Google Adsense と接続済みの方は、「パブリッシャー ID」を指定する必要はありません。　自動的に反映されます！
　また、「 Adsense申請中の方は、承認を迅速化させるため　Googleの指示に従って AdSenseコードを <head> の下に配置してください。」とのことです。

　目次の誤動作は Unicode対応していないのが原因と判りましたので、次のリリースで対応して頂ける予定です！　

　「基本的な設定」を知りたい方と　「カスタマイズ」をもっと行いたい方には、こちらのサイトをご紹介！！

最後まで読んでいただき、ありがとうございます。　また、お越しくださいませ。
// アタル