投稿日表示のフォーマットのカスタマイズ (エラーになる場合の対処法を追記しました)

｜2023/09/06 ｜2
アイキャッチ

投稿日の表示を日本語仕様(年月日)に変更します。

このカスタマイズは Contempo や Emporio 等、新バージョンのテーマ用です。

参照記事

ファビコン些細な日常
サムネイル
Bloggerの時刻のフォーマット／投稿の年月日と曜日の並び替えのカスタマイズ
Bloggerブログの公開日の時刻のフォーマットは七種類が選択可能だけれども他のスタイルで年月日と曜日を並び替えて表示するカスタマイズの方法を更新日を含めて新旧のテーマ毎に独自タグかJavaScriptで取り上げている。
https://www.nagahitoyuki.com/2018/09/customize-bloggers-time-format-to-sort-year-month-date-and-day-of-the-week-of-the-post.html

導入手順

テーマ編集は必ず予めバックアップを取ってから行って下さい。

①2つのフォーマットタイプから好みのフォーマットを選択。

フォーマットA: 協定世界標準時表示 (日本時間 -9時間)

EE → EEEE にすると(木曜日) になります

M→MM, d→dd で一桁月日に0が付きます。
表示例: 2019年01月04日 (木)

<b:includable id='postTimestamp'>
  <span class='byline post-timestamp'>
  <data:byline.label/>
  <b:if cond='data:post.url'>
<b:eval expr='format (data:post.lastUpdated, "yyyy年MM月dd日 (EE)")'/>
  </b:if>
  </span>
</b:includable>

フォーマットB: 日本時間(設定済タイムゾーン)表示

一桁月日に 0 が付けられません。

表示例: 2019年1月5日 (金曜日)

<b:includable id='postTimestamp'>
  <span class='byline post-timestamp'>
  <data:byline.label/>
  <b:if cond='data:post.url'>
    <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
   <time class='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'><data:post.date.year/>年<data:post.date.month/>月<data:post.date.day/>日<b:with value='data:post.date.dayOfWeek - 1' var='nod'><b:with value='["月", "火", "水", "木", "金", "土", "日"]' var='dow'> (<b:eval expr='data:dow[nod]'/>曜日)
</b:with>
</b:with></time>
  </a>
  </b:if>
  </span>
</b:includable>

2021/10/01 追記: フォーマットBで一桁月日に 0 を付けるコード

コメントでBINUBALLさんに有用な情報を教えて頂きました。以下のコードだと一桁月日に 0 を付けることが可能になります。

表示例: 2021年10月01日 (金曜日)

<b:includable id='postTimestamp'>
  <span class='byline post-timestamp'>
  <data:byline.label/>
  <b:if cond='data:post.url'>
    <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
   <time class='published' expr:datetime='data:post.date.iso8601' expr:title='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'/>日 <b:with value='data:post.date.dayOfWeek - 1' var='nod'><b:with value='["月", "火", "水", "木", "金", "土", "日"]' var='dow'> (<b:eval expr='data:dow[nod]'/>曜日)
</b:with>
</b:with>
   </time>
  </a>
  </b:if>
  </span>
</b:includable>

②コードの設置

ブログの投稿、人気の投稿、注目の投稿、それぞれの箇所に上記のフォーマットAまたはBのコードを挿入します。

ブログの投稿

テーマのHTML編集にて "Blog1" を検索で探します(編集画面内をクリックでアクティブな状態にして Ctrl + F で検索できます)。

その30行くらい下の方にある <b:includable id='main'> のすぐ上の所にコードをコピペします。

HTML

フォーマットAのコードだとこうなります。

HTML2

人気の投稿と注目の投稿

"PopularPosts1"(人気の投稿) と "FeaturedPost1"(注目の投稿) を探します。
人気の投稿ウィジェットをサイドバーにも設置している場合は "PopularPosts2" も同様に適用します。

数行下にある <b:includable id='main' var='this'> のすぐ上にコードをコピペします。

FeaturedPost(注目の投稿)にフォーマットBのコードを挿入するとこうなります。

HTML3

あとはをクリックして保存すれば完了です。

2022/11/19 追記: エラーになる場合

このようなエラーメッセージが出て変更の保存ができない場合があります。これは既に同じ ID (postTimestamp) の b:incldable コードが存在していて重複するためです。

エラーメッセージ

このような場合は既存のコードを上書きしてしまいます。

以下のコードを探して、左側の▼をクリックして折りたたみ、先述のフォーマットAまたはBのコードを上書きして下さい。

<b:includable id='postTimestamp'>
コード