Bloggerで「時刻のフォーマット」の表示形式をYYYY年MM月DD日X曜日の形式に変換する方法



更新日:2018年5月30日(水曜日)


この記事は、Bloggerテンプレートの、「Emporio」というテーマをカスタマイズする内容になっています。この記事を書くにあたって、サブドメイン blog.coloringtaiyakiinu.website で運用しているこちらのサイトも本日「Emporio」に変更しました。おそらく、テンプレート(テーマ)が現時点で最新の状態だと思いますので、新規ユーザー様にも、上手くカスタマイズを適用して頂けるのではないかと思っております。

それでは本題に入ります。投稿日の表示についてですが、「Emporio」には、日本で一般的な「○○年 XX月 △△日 ※曜日」という形式が無く、違和感を持っていました。

昨年12月に希望の形に変更する方法を見つけることができ、今も不具合が無いようなので、ご紹介させて頂きたいと思います。

下記のサイト様の記事を参考にして、少し変更を加えました。javascriptや細かな解説についてはこちらのサイト様の記事をご参照ください。

㈱アイジュピタ情報ライブラリ「i-jupiter thinktank.」
タイムスタンプ表示を年月日形式にする
http://i-jupiter.blogspot.jp/2012/07/blog-post_26.html
※ ㈱アイジュピタ様からソースコード使用許可を頂き、掲載させてもらっています。
Evening Emerald
Bloggerの投稿日をタイムスタンプにして表示形式と位置を変更
http://eveningemerald-jet.blogspot.jp/2013/06/blogger_19.html
※ Evening Emerald様へ、ソースコードを使用したことを連絡させて頂きました。

※必ずバックアップを取ってから作業してください。

目次
1:「時刻のフォーマット」を設定する
2:  javascriptを追加する
3: ブログトップページで表示される投稿日用のコード
4: ひとつの記事だけを表示するページ用のコード
5: 変更が反映されない時は



下図のように、「曜日」から始まる表示形式を選びます。
見えにくいですが、[ 日曜日 , 5月 20 , 2018 ] となっていて、カンマで3分割されています。この3分割を利用して表示形式を変えます。




 head 内と、/body の直前 の2か所に、javascriptを追加します。
下記の 「~この次の行から~ --- ~この手前の行まで~ 」の間にあるコードをコピーしてご利用ください。

/*
~この次の行から~

<script type='text/javascript'>
function changeDateFormat (id, date)
{
  var div = document.getElementById('post-timestamp-' + id);
 
   // X曜日 , MM月 DD , YYYY を、YYYY年MM月DD日X曜日の形式に変換
  var splDate = date.split(",");
  var change_date = splDate[2]+"年" + splDate[1] +"日" + " ( " + splDate[0] + " ) ";
  div.innerHTML = change_date;
} </script>

~この手前の行まで~ 
*/


編集画面で「blog1」の中にある、
<b:includable id='headerByline'> --- </b:includable>
を探す。 ---  をクリックして内容を表示させます。
--- で隠れていたコードを全部、変換用HTMLに置き換えます。
</b:includable> は残しておいてください。
(下図参照)



コピペ用テキスト(ブログトップページ用)
「~この次の行から~ --- ~この手前の行まで~ 」の間にあるコードをコピーしてご利用ください。<b:includable id='headerByline'> の直後に貼ってください。

ちなみにラベルで絞り込み検索した結果のページも、扱いはトップページと同じですのでこの変更だけで大丈夫です。

※補足がありますので、コード下部にある追記もお読みください。

<!-- 
~この次の行から~

 <b:if cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;'>
            <b:include name='super.headerByline'/>
            <div><br/><b:include name='super.postLabels'/></div><br/>
          <b:else/>
            <b:include data='{ items: [&quot;author&quot;, &quot;labels&quot;] }' name='headerBylineOverride'/>

<!-- タイムスタンプを整形 -->
<div class='timeJpn'>
  <span class='byline post-timestamp'>
   <data:byline.label/>
    <b:if cond='data:post.url'>
      <meta expr:content='data:post.url.canonical'/>
      <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'> </a>
        <time class='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'>
<span expr:id='post-timestamp-' + data:post.id'>
  <script type='text/javascript'>
       changeDateFormat('<data:post.id/>', '<data:post.date/>');
  </script>
</span>
   </time>
    </b:if>
  </span></div></b:if>

~この手前の行まで~

-->

こちらは</b:includable>のひとつ手前の行までのコードになっていますのでご注意ください。


※2018/5/30 追記

上記の赤色の文字部分は、このままコピーするとエラーになることがあるようです。
'post-timestamp-'  を、
'&quot;post-timestamp-&quot; という表記に変更していただくとエラーが解消されます。


編集画面で「blog1」の中にある、
<b:includable id='postShareButtons' var='post'> --- </b:includable>
を探す。項目3で設定した場所より下の方にあると思います。

そして </b:includable> のすぐ下の行に、コードを追加します。(下図参照)



コピペ用テキスト(ひとつの記事だけを表示するページ用)
「~この次の行から~ --- ~この手前の行まで~ 」の間にあるコードをコピーしてご利用ください。※補足がありますので、コード下部にある追記もお読みください。


<!-- 
~この次の行から~

<b:includable id='postTimestamp'>
  <br/>
<!-- タイムスタンプを整形 -->
<div class='timeJpn'>
  <span class='byline post-timestamp'>
   <data:byline.label/>
    <b:if cond='data:post.url'>
      <meta expr:content='data:post.url.canonical'/>
      <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'> </a>
        <time class='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'>
<span expr:id='post-timestamp-' + data:post.id'>
   <script type='text/javascript'>
       changeDateFormat('<data:post.id/>', '<data:post.date/>');
    </script>
</span>
   </time>
    </b:if>
  </span></div>
  </b:includable>

~この手前の行まで~
-->

タイムスタンプを整形する部分は、項目3と全く同じです。

以上で編集は完了です。


※2018/5/30 追記

1.上記コードに誤りがありました。最下部の2行を、
</span></div></b:if>
  </b:includable>
と、記述していましたが、

</b:if> という記述は不要でした。訂正してお詫び申し上げます。

2.上記コードの赤色の文字部分は、このままコピーするとエラーになることがあるようです。
'post-timestamp-'  を、
'&quot;post-timestamp-&quot; という表記に変更していただくとエラーが解消されます。


コードを貼る場所が適切ではないか、「時刻のフォーマット」の設定とjavascript が合っていないことが考えられます。とりあえず元に戻したい場合は、バックアップファイルを適用するほか、新規で非公開設定のブログを作成し、そちらから該当するコードをコピーして使用する方法がありますのでお試しください。

また、曜日が不要な場合は、javascrptを参照元のサイト様のコードにすれば大丈夫かと思います。

私は他のもっと単純なコードを試したこともありましたが、知識が足りずに上手くいかなくて、この記事での方法でやっと成功しました。

また時々、何かのカスタマイズ記事を書きたいと思います。
最後までお読みいただきありがとうございました。


この記事についてご質問等がありましたら、コメント欄か、こちらのページをご利用くださいませ。

コメント