【Blogger】投稿日付を年月日にするには


なぜ投稿日付を年月日にするのか

Bloggerでの日付は、英語を日本語に変えただけ。並びが英語なので「曜日, 19日, 7, 2020」になります。

日付は、新旧の目安として表示したいので曜日は要りませんし、英語の並びは違和感が…。そこで「2020年7月19日」表記にすることにしました。

トップページはこんな感じにします。

方法の手順

1. フォーマットを変更

全体と投稿それぞれ「曜日, 19日, 7, 2020」に設定します。

Blogger管理画面>設定>フォーマット


Blogger管理画面>レイアウト>「ページの本文」右上「編集(鉛筆マーク)」クリック

「ブログの投稿の設定」画面
投稿ページのオプション」の「日付:」ボックスを「月 日,年」選択します。
「日付:」表示をしない場合は、「日付:」内を削除。画面の下部「保存」クリック。


これで、フォーマットの変更はできました。次は、編集です。

2. HTML編集画面を開く

管理画面>テーマ>右上の「縦3つ点」クリック>「HTMLを編集」クリック

編集画面が開いたら、バックアップ用*に全体をコピーし、テキストエディタにペーストして保存します。
*HTML を保存、エラーが起きた場合。バックアップをコピペすれば、事なきを得られます😃

3.年月日に変換するJavaScriptを追加

追加する箇所はふたつ、</head>前</body>前。それぞれ検索して追加します。

検索するには

編集画面の行番号が表示されている中をクリックし、カーソルを編集画面の中に入れます。編集画面にカーソルが入ったら、検索ショートカットキー*を押します。画面の左上に、検索ボックスが表示します。
*Windows機なら「Ctrl」キーを押しながら「F」キーを押します。

検索ボックスが表示されたら、「</head>」を入力して「Enter」キーを押します。</head>の上に追加した状態は、こんな感じ。

追加する内容は下記。<script>~</script>括りで、JavaScriptを追加します。
<script type='text/javascript'>
function changeDateFormat (id, date)
{
  var div = document.getElementById(&#39;post-timestamp-&#39; + id);
   // X曜日 , MM月 DD , YYYY を&#12289;YYYY年MM月DD日X曜日の形式に変換
  var splDate = date.split(&quot;,&quot;);
  var change_date = splDate[1]+&quot;年 &quot; + splDate[0] + &quot;日&quot;;
  div.innerHTML = change_date;
}
</script>


参考)HTML編集画面を初めて見た時、ゲッソリした気を取り直す機会をいただきました。ありがとうございました。

同様に「</body>」検索して、</body>前に追加します。

4.JavaScriptを呼び出す処理を追加または変更

ここでも検索して、追加または変更します。
<b:includable id='headerByline'>」で検索し、<b:includable id='headerByline'></b:includable>括りの中を変更します。

変更内容は下記。「<b:includable id='headerByline'>」検索で、3箇所を変更します。変更した箇所が後でわかりやすいよう、コメント*を入れておくとよいかも。
*<!--コメント-->
<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='&quot;post-timestamp-&quot; + data:post.id'>
            
<script type='text/javascript'>
            
changeDateFormat(&#39;<data:post.id/>&#39;, &#39;<data:post.date/>&#39;);
            
</script>
        
</span>
        
</time>
        
</b:if>
        
</span></div></b:if>
        <!-- ここまで -->
</b:includable>

ここまで編集したら、画面の右上「保存(ディスクアイコン)」をクリック。
ブログのトップページを見て、表示が変わったことがわかります。

投稿ページの日付が変わらない?

投稿ページの日付を処理している箇所を変更します。
下記で検索。
<b:includable id='postTimestamp'>

3件が検索されるうち、2件目(行番号4370前後)の該当箇所の下、<time case~></time>を変更します。
<!-- ここから -->~<!-- ここまで -->を追加し、既存の<data:post.date/>を削除またはコメントアウトします。

<b:includable id='postTimestamp'>
  <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'>
        <time class='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'>
          <!-- ここから -->
          <span expr:id='&quot;post-timestamp-&quot; + data:post.id'>
            <script type='text/javascript'>
            changeDateFormat(&#39;<data:post.id/>&#39;, &#39;<data:post.date/>&#39;);
            </script>
        </span>
        <!-- ここまで -->
<!--  削除またはコメントアウト <data:post.date/>-->
        </time>
      </a>
    </b:if>
  </span>
</b:includable>

変更したら、保存をクリック。

日付の表示は必要なのか

日記や日次管理のブログなら必要でも、記事ブログなら要らない場合が多いです。

ただ、このページのような「やってみた」記事は、日付が重要な場合があるため、表示し続けることにしました。

日付を表示させない方法は、HTML編集が要らず簡単なようです。してみたい方は、検索してみてください。