「広告」  

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

JetTheme[00](CatchImage)

 クールで表示速度が速い「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" は非対応)もご紹介!




 AdSense 荒らし対策のため、筆者は 2022年2月10日 "JetTheme Newspaper Version" (有料版)に切り替えました!  ( 購入当時、サブドメイン毎に PayPalで 7ドル )
"JetTheme Core Version" (無料版)の上位互換となるため、 有料版の基本的な設定は 無料版と共通 です。

この記事を読み終えましたら、以下の記事を お読みくださいませ!





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

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

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


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

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

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

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

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

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

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

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



  れいか 🌿 雑記ブログ  さんが 画面付きの説明を 記事にしてくれました! 

ブログのカスタマイズに慣れていない方は、以下の記事を お読みくださいませ!





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

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

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

JetTheme[00] Png01


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

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

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


 以下は、( format 演算子の問題点にて )参考として挙げた「しおぐまー」さんの記事から抜粋!
「年」を表すシンボルは西暦の数値に置き換えます。注意点として、小文字の yy や yyyy は年月日表記の年を表すのに対し、大文字の YY や YYYY は週番号表記の年を表します。たとえば、年月日表記での「2017年12月31日」は週番号表記での「2018年第1週の日曜日」と同じ日を指しています。このように、同じ日を指していても yyyy と YYYY は合致しないことがあります。週についての詳細は後述する「週番号」の項目を参照してください。

yy
西暦の年の下二桁

yyyy
西暦の年

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

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

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


 更新日付表示で利用する 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 で検索すると 5箇所の「行」がヒットします。
4箇所目は置換しません。 1〜3箇所めを同一コードで置換し、5箇所めを別コードで置換します!
(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>

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

<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>

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

<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 指定のため、&nbsp; や 漢字SPACE とかも利用して調整してください。



 format 演算子 が「9時間前の日付と時刻( UTC )」を返す問題点 


 上記のコードでは 午前9時までに投稿した場合(更新した場合も...)、投稿日付(更新日付)が前日 になってしまうことが判明! 

 正確には Google Blogger の仕様が原因で、JavaScript を利用した 「RECENT POSTS と RELATED POSTS」の2つのウィジェット部品の日付のみ 正しい日付が表示されます。

 上記変更でも利用している Date format (日付書式変換)が返す「日付と時間」が世界標準の英国のものであり、それはバグではなく「仕様」と言うことが判明(詳細は、この後で紹介する「結城」さんや「しおぐまー」さんの記事を参照!) なぜ、「協定世界時(UTC:Universal Time Coordinated))」 で、「日付と時間」を返す仕様にしたのかな? 日本だと「9時間前の日付と時間」が格納され、正直 利用しづらいね。

 常に 午前9時以降に投稿するのであれば 関係ありませんが、対応方法を検討しました!
  ※「日付誤り」を回避する方法
  (1) HTML対応(ただし、日付書式指定の再指定が必要)
  (2) JavaScript で iso付きの投稿(更新)日付を書式変換  筆者が作成した JavaScript関数を紹介した記事は、  こちら! (「曜日」や「令和何年」とかの表示が、パラメータ指定のみで可能)






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

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

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


 data:post.date.iso8601 で検索すると 5箇所の「行」がヒットします。
4箇所目は置換しません。 1〜3箇所めを同一コードで置換し、5箇所めを別コードで置換します!
(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>

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

<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>

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

<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ボタン」を 5個の「日本版SNSボタン」に置き換えます。(記事下にも設置可能)

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

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

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




 記事下「(ハッシュ)タグ」表示を、「タグ+カテゴリ」表示に変更! 

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

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

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




 シンタックスハイライト 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> の下に配置してください。」とのことです。


JetTheme[00] Png11



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

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










Macブログ ランキング アイコン
最後まで読んでいただき、ありがとうございます。 また、お越しくださいませ。
// アタル
For follow LINE Reader Group!Subscribe to this blog on Feedly!

Next Post Previous Post
No Comment
Add Comment
comment url
  「広告」