bloggerで更新日を表示したい｜カスタマイズ｜テーマ｜canonical

bloggerで更新日を表示したい｜カスタマイズ｜テーマ｜canonical｜

2025/02/17 2021/03/28

　今回は、前々から表示したかった「最終更新日」をやってみました！
（WordPressだとプラグインで直ぐに出来そうな話ですが。）

よく後から追記をしているので、内容が新しくなったのが分かり易くなり、

間違えていたことを修正した事が分かります。

　ブロガーのテーマ毎に、色々調べたというか実際にやってみたので・・残しています。
検索して該当の文字を見付ければ良いのですが、同じ文字も沢山あるので見つけ難くて困りました。
やっている時は必死でしたので、少しでも参考になると嬉しいです。

2-1　テーマ、「simple」の場合。

テーマ→HTML編集のページに

タグをコピーしてきたものをペーストします。

860、1010、１３１０行目辺り～（アドセンスなどのタグを貼っていたり、

人によって多少は違うので目安です。）

以下の様な記述の「上に貼り付け」という説明がありましたが

</b:if>

というタグが彼方此方にあり、どこがそうなのか分かりませんでした。

なので、自分は分からなかった前後の部分を多めに表示します。以下の①・②の真ん中部分です。

以下の「datestart」とかのある記述部分の「＜/ｂ:ｉｆ＞」のすぐ下に該当のタグをコピペします。1010行目くらい（人によってカスタマイズのタグを入れてあったりすると違う）の場所です。

① <b:if cond='data:post.isDateStart'>

</b:if>

貼る場所が分からなくて探したので、備忘録として置いておきます。

貼った直ぐ下にはいかの記述です。上の①と下の②の間にペーストします。

② <b:if cond='data:post.dateHeader'>

<h4 class='date-header'><span><data:post.dateHeader/></span></h4>

</b:if>

②の下に貼りつけると、最初の投稿日が上、更新日が下になります。

お好みで多少は位置が変えれますが、突然消えることもあります。

2-2　テーマ：ｓｏｈｏの方法

3600行目くらいで、「date.post.iso8601」などという部分があり、

私はその周辺だと思って何度もやり直しましたが、違っていたという。

こちら、分からず終いでした。

日付けの部分は固定で動かせない？外部の呼び出しファイル？でしょうか。

無理でした。。

2-3　ｔｒａｖｅｌのテーマ

1360～1400行目位の場所に件のタグをコピペしたら投稿日の右横に表示されます。

<span class='post-timestamp'>

<b:if cond='data:top.showTimestamp'>

<data:top.timestampLabel/>

<b:if cond='data:post.url'>

<meta expr:content='data:post.url.canonical' itemprop='url'/>

<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>

</b:if>

</b:if>

</span>

の、直後です。

</span>の前に入れると、文字が重なってしまいます。

2-4　essentialのテーマ

２０２１年更新の
https://www.japaneo.co/2021/02/blogger-date.html#chapter-2　の、サイト様の説明の通りで出来ました。

紹介していただいたのは「https://e-pon7.com/date-of-article-update/#index_id6」のサイト様です。

３８８０行目あたり、４１８８行目辺りの２ヶ所に、以下の部分があります。

（そして、２か所の両方に全く同じことを以下の様にしないといけませんでした。意味が分かりませんが、それで実際に出来たので。。）

※　○○行目と必ず同じ数字になりません。目安として記録しています。
テーマの編集で、フォントなどの変更を行って、それを示す文字が増減するので、数行～数十行くらいズレるかもしれません。

<b:includable id='postTimestamp'>
<span class='byline post-timestamp'>
<data:byline.label/>

上記の直下に
以下の部分があり、その部分を置き替えします。

<b:if cond='data:allBylineItems.timestamp'>
<span class='post-date published' expr:datetime='data:post.date.iso8601'><data:post.date/></span>
</b:if>

置き換えする上記の部分に、以下のタグを貼り付け（貼り換え）ます。

<br />
<div align='right'>
<b:if cond='data:post.date != data:post.lastUpdated'>
<span class='fa fa-history'/>
<time itemprop='data:post.dateModified.iso8601'>
<b:eval expr='data:post.lastUpdated format "yyyy/MM/dd"'/>
</time>
</b:if>
<span class='fa fa-calendar'/>
<time expr:datetime='data:post.datePublished.iso8601'>
<b:eval expr='data:post.date format "yyyy/MM/dd"'/>
</time>
</div>

貼り付けた直下には、以下の文字列があります。

</span>
</b:includable>

「○○行目」と書いてあっても必ず同じ数字になるとは限りません。目安として記録しています。
テーマの編集で、フォントなどの変更を行うと都度、リセットになるかもしれません。

何度も日付の設定をやり直しています。
そのため、初心者レベルでも慣れて漸く分かってきました。

参考になると良いですが。。

３：　曜日が表示したい件（未解決）

　曜日も表示したくて随分と調べては、他のサイトのタグを切り貼りして

何度もやってみましたが、今日は１日潰れてしまったのに全く理解が進まないので

投稿日と更新した日の曜日・・は、もう諦めました。

曜日は「GetDay」と入力すればOK・・らしいのですが、Getをする日、

つまり、「今日」・「本日」の曜日限定？更新日の曜日ではない様子だったので。。難しい。。
ほかにも、更新日をゲットして、

記事の更新日＝updatedなのか、lastupdatedなのかも説明によって違う為、

統一した方が良いかと思い、何度かそこだけ書き換えたりしたものの、
上手くいった感じはなかったので戻し、イマイチ分からず。
どうやら、外部ファイルを作らないと難しいみたい？・・なので、

またいつか時間ある時に行う事としました。とても疲れました・・。

「曜日の表示」で検索して色々なサイトを見ましたが・・

「今日」の曜日で、「更新した日の曜日」を表示という説明は粗ありませんでした。

又は、あっても貼り付けてみると表示されず・・残念ながら。。

「undefined」と表示されたり、「+１」「+2」等と追記しても急に２日先になったり、

変わらなかったり・・曜日がなかなか調整出来ず困りました。

（結局、未だ出来ていませんが・・）

４：　貼り付けた、更新日を表示するためのタグ

貼り付けたのは、全てのテンプレートに全く同じ
以下のタグです。

<data:post .lastupdatediso8601="">

</data:post></span>

// 投稿日

var published=new Date("<data:post.timestampISO8601/>");

// 最終更新日

var updated =new Date("<data:post.lastUpdatedISO8601/>");

</script>

// <![CDATA[

// 投稿日

var pp_Y = ""+published.getFullYear();

var pp_M = ("0"+(published.getMonth()+1)).slice(-2);

var pp_D = ("0"+published.getDate()).slice(-2);

// 最終更新日

var dd_Y = ""+updated.getFullYear();

var dd_M = ("0"+(updated.getMonth()+1)).slice(-2);

var dd_D = ("0"+updated.getDate()).slice(-2);

if(dd_Y == pp_Y && dd_M == pp_M && dd_D == pp_D){

//日付が同じときは出力しない

}else{

var updated_dd ="最終更新日："+ dd_Y+"年"+dd_M+"月"+dd_D+"日";

document.getElementById("last-modified").innerHTML = updated_dd;

}

//]]>

</script>

５：　ブログの記事の日付たるもの｜canonical｜参考・終わり

今回は、ブログの記事の日付について

思った＆調べてみたことです。

過去に投稿した記事を少しでも

追記したりで編集を行い、

現在の情報が書き加えられた新しい記事へと

リニューアルされた場合、

最初に公開した古い日付を今の日付に変えて公開

しても良いのかなと急に気になってしまい

検索してみました。

（私の場合は追記した記事の日付は、追記したその日を

最新の更新日として書き加えることもあります。）

日付の変更はどこの規約でも禁止されているということはなく

いけないのは、まるっきり同じ記事を

コピーして違う日付で増やしたりすること‥です。

どうやら、

そういったリライトした記事を投稿することが

アクセスアップに繋がったりするみたいです。

最初に公開した日付と

後日ブラッシュアップした日付の両方が

分かる様な記述が一番良いのかもしれませんが‥。

「〇〇〇〇年〇〇月〇〇日更新」

などという書き方の方が

良いのではないかと。

ちなみに、ブログ記事の日付を表示していない

という状態は、google consoleなどの

アクセス解析やらでエラー

になることがあるそうです。

日付が古いと読まれ難くなりそうで、

敢えて日付ナシにしている人がいると思うのですが、

（私もそうしようかと思ったことがあります。）

得策ではないようです。

今回分かったこと：過去記事を書き直したり新しくした場合には

日付を最新のものにしても大丈夫です。

（上記の様に新旧両方ともの日付を載せておく

方が尚良いかと思われますが。）

　あと、重複するページなど「canonical」というタグを入れないと検索エンジンから嫌われる？みたいで
調べていたのですが、＜ｈｅａｄ＞内に双方に＜canonical＞タグ入れないといけなかった様です。

調べても自分のパターンと違ったりして、コピペでは済まないので進みませんが。。
きちんと解決法が判明したら両方のタグを設置したいと思います。

（どうも複数はよくないらしいので、２つまでくらいにしておくのがよさそうです）

あと、ついでに言うと

（あんまり関係ない話）

　ブログのデザインを選ぶ際、ずっとテンプレートと呼んでいたので、テーマという呼び名だと未だに
デザインのことではなくテーマ＝「主題」ってこと？と、思ってしまいます。

ここまで読んで頂きありがとうございました。いかがでしたでしょうか。

自分自身の為の覚書みたいなものですが・・
何か少しでも参考になれば幸いです。

良かったら気が向いた時にでもまた覗いてやってくださいませ。

よろしくお願い致します。

参考：

参考文献：

参考サイト：

新しい情報を上に表示しています。

【blogger】記事公開日を最終更新日に変えるには?
https://e-pon7.com/date-of-article-update/#index_id6

Bloggerの日付を変更させたい！更新日を表示させる方法
https://www.japaneo.co/2021/02/blogger-date.html#chapter-2

ISO 8601 - Wikipedia Wikipedia https://ja.wikipedia.org › wiki › ISO_8601

[Blogger]Vaster2に最終更新日を設置する[ズレない]
https://sutasutashiki.blogspot.com/2017/08/last-modified.html

Bloggerに更新日を表示する
https://www.bugbugnow.net/2018/01/blogger.html

Bloggerで記事の公開日/最終更新日を表示してみた
https://spoontofork.blogspot.com/2018/06/blogger-show-last-modified-date.html

日付（Date）とほほのＷＷＷ入門
https://www.tohoho-web.com/js/date.htm

[Blogger] 2022年版最終更新日を表示する [widget version1用]
https://sutasutashiki.blogspot.com/2022/01/2022-show-last-modified-date-WidgetVersion1-Blogger.html

更新日時を表示する（2） JavaScriptのサンプル
https://www.tagindex.com/javascript/time/update2.html

ServiceNow - 曜日を表示する
https://qiita.com/htshozawa/items/aa1f4fc01dfa873783b7

にししふぁくとりー > JavaScript TIPSふぁくとりー > 日付・時刻 > 指定された日の曜日を得る
https://www.nishishi.com/javascript-tips/get-day-of-the-week.html

JavascriptでYYYY/MM/DDみたいな形式で出力＋日本語の曜日を手軽に出力/Cluttered Room
https://clutte.red/blog/2019/06/javascript-formatted-date/

JavaScriptで日付と時刻をフォーマットしてみよう！
https://proengineer.internous.co.jp/content/columnfeature/8417#31

Top » ワークフローシステム逆引きガイド » システムの操作・設計 » フォームの作成 » 日付の曜日を表示する日付の曜日を表示する
https://support.createwebflow.jp/manual/files/v5/reverse/reverse/workflow_design/form/form_js_day_week.html

このブログを検索

gotaku memo