なぜ投稿日付を年月日にするのか
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('post-timestamp-' + id);
// X曜日 , MM月 DD , YYYY を、YYYY年MM月DD日X曜日の形式に変換
var splDate = date.split(",");
var change_date = splDate[1]+"年 " + splDate[0] + "日";
div.innerHTML = change_date;
}
</script>
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[1]+"年 " + splDate[0] + "日";
div.innerHTML = change_date;
}
</script>
参考)ほぼコピペ。お世話になりありがとうございました。
Bloggerで「時刻のフォーマット」の表示形式をYYYY年MM月DD日X曜日の形式に変換する方法|ブログ(ぬりえブック着色探求 別館)
Bloggerで「時刻のフォーマット」の表示形式をYYYY年MM月DD日X曜日の形式に変換する方法|ブログ(ぬりえブック着色探求 別館)
参考)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 == "Blog"'>
<b:include name='super.headerByline'/>
<div><br/><b:include name='super.postLabels'/></div><br/>
<b:else/>
<b:include data='{ items: ["author", "labels"] }' 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>
<!-- ここから -->
<b:if cond='data:view.isSingleItem and data:widget.type == "Blog"'>
<b:include name='super.headerByline'/>
<div><br/><b:include name='super.postLabels'/></div><br/>
<b:else/>
<b:include data='{ items: ["author", "labels"] }' 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>
ここまで編集したら、画面の右上「保存(ディスクアイコン)」をクリック。
ブログのトップページを見て、表示が変わったことがわかります。
投稿ページの日付が変わらない?
投稿ページの日付を処理している箇所を変更します。
下記で検索。
<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='"post-timestamp-" + data:post.id'>
<script type='text/javascript'>
changeDateFormat('<data:post.id/>', '<data:post.date/>');
</script>
</span>
<!-- ここまで -->
<!-- 削除またはコメントアウト <data:post.date/>-->
</time>
</a>
</b:if>
</span>
</b:includable>
変更したら、保存をクリック。
日付の表示は必要なのか
日記や日次管理のブログなら必要でも、記事ブログなら要らない場合が多いです。
ただ、このページのような「やってみた」記事は、日付が重要な場合があるため、表示し続けることにしました。
日付を表示させない方法は、HTML編集が要らず簡単なようです。してみたい方は、検索してみてください。
コメント
コメントを投稿