Bloggerで記事に最終更新日を付ける方法【2018年更新】

投稿 : 2013-05-24
更新 : 2018-06-23

記事を投稿した後に、更新することもあろうかと思います。そういう時に、最終更新日を自動で付けれたら良いのにと思ったことはないでしょうか？

Bloggerの場合、Feed（RSS)情報には最終更新日があるので、それを取得して表示します。(内部では、投稿日時と別に更新日時を持っていると思われる）

以下が、そのサンプルです。

追記：2018/02/20
すたすた式さんで、<data:post.timestampISO8601/>を使用したものが公開されたので、それに合わせて「新バージョン」を追加しました。

旧バージョンと似たような書き方にしたので、すでに導入済みの人が置き換えるのに便利だと思います。

新旧とも挿入するところは同じでOKです。

新バージョン

<span class='updated post-timestamp' id="last-modified" itemprop='dateModified' expr:title='"Post was updated on " + data:post.lastUpdatedISO8601'>
   <data:post.lastupdatedISO8601/><!-- 右側に表示される -->
</span>
<script>
// 投稿日
var published=new Date("<data:post.timestampISO8601/>");
// 最終更新日  
var updated =new Date("<data:post.lastUpdatedISO8601/>");
</script>
<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>

新バージョンは、<data:post.timestampISO8601/>というBloggerに追加されたと思われるタグを利用しています。旧バージョンにある制限＜ブログの公開範囲が「すべてのユーザー」でないと表示されません。＞がありません。

参考：
・[Blogger 最終更新日を表示]<data:post.lastupdatedISO8601/>を使ったものにしました[Blogger last updated / last modified] | すたすた式
・Show last updated date in Blogger posts · One Transistor

月日を0埋めしたくない

var pp_M = (" "+(published.getMonth()+1)).slice(-2);
var pp_D = (" "+published.getDate()).slice(-2);
var dd_M = (" "+(updated.getMonth()+1)).slice(-2);
var dd_D = (" "+updated.getDate()).slice(-2);

上記の４か所の0の部分を空白（スペースに置き換えてください。

日付表示を少し変えたい

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

上記の部分を書き換えます。

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

「YYYY/MM/DD」形式にする

var updated_dd ='<i aria-hidden="true" class="fas fa-sync-alt fa-fw"></i>'+"最終更新日："+ dd_Y+"年"+dd_M+"月"+dd_D+"日";

Font Awesomeが読み込まれているテーマーで、文字アイコンを表示する

新バージョンのカスタマイズ事例

・【Blogger】最終更新日を表示する|多趣味のつらつらブログ

わかりやすく書かれてるので、参考になるかと思います。

旧バージョン

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span id="last-modified"><!-- ここに表示される --></span>

<script type="text/javascript">
// <![CDATA[
function show_last_modified(root) {
  var published="";  
  var updated="";
 for (var i = 0; i < root.feed.entry.length; i++) {
    published = root.feed.entry[i].published.$t;
    updated= root.feed.entry[i].updated.$t;
  }
  var dd_Y = updated.substring(0,4);
  var dd_M = updated.substring(5,7);
  var dd_D = updated.substring(8,10);

  var pp_Y = published.substring(0,4);
  var pp_M = published.substring(5,7);
  var pp_D = published.substring(8,10);
  
  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>

<script type='text/javascript'>
  var sHome="<data:blog.homepageUrl/>";
  var sURL="<data:post.url/>";
  sURL = sURL.replace(sHome, "");
  sURL = "/" + sURL;

  document.write(unescape("%3Cscript")+" src='"+sHome+"/atom.xml?redirect=false&amp;path="+sURL+"&amp;max-results=1&amp;alt=json-in-script&amp;callback=show_last_modified' type='text/javascript'"+unescape("%3E%3C/script%3E"));
</script>
</b:if>

【補足】
※テンプレートタグを使用してるので、テンプレートに直接貼り付けないと動作しません。
※Feed（RSS)情報を使用しているため、ブログの公開範囲が「すべてのユーザー」でないと表示されません。 確認箇所は、設定-＞基本-＞許可-＞ブログの閲覧者が「すべてのユーザー」

サンプルの動作

・個別記事のときのみ表示
・投稿日と同じ日付の場合は表示しない

投稿日と同じ日付でも表示したい場合は、
「//日付が同じときは出力しない」の下に

  var updated_dd ="最終更新日："+ dd_Y+"年"+dd_M+"月"+dd_D+"日";
  document.getElementById("last-modified").innerHTML = updated_dd;

を貼り付けてください。

補足

Bloggerの標準テンプレート

        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
         ここに挿入

Bloggerの標準？テンプレートを使用してるのなら、上記の部分の「ここに挿入」あたりの部分にコピペするとよいかも。Blog1というウィジェットの中にあるかと思う。

Vaster2の場合

・Vaster2|レスポンシブ対応済みのblogger日本語テンプレート

                    <!--TOP カテゴリ アーカイブここまで-->
                    <b:else/>
					<!--記事ページの時-->
                    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
<div class='top-meta'>
 <p class='kousin'>
                     <span class='post-timestamp'>
                          <i aria-hidden='true' class='fa fa-clock-o'/>
  <b:if cond='data:post.dateHeader'>
     <script type='text/javascript'>var hiduke = &quot;<data:post.dateHeader/>&quot;</script>
   </b:if>
 
     <b:if cond='data:top.showTimestamp'>
       
        <b:if cond='data:post.url'>
            <meta expr:content='data:post.canonicalUrl' itemprop='url'/>
           <abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><script type='text/javascript'>document.write(hiduke)</script></abbr>
        </b:if>
    </b:if>
  </span>

このあたりに挿入

<span class='post-tag'>

「このあたりに挿入」と書かれている場所あたりに、挿入してください。

上記を適用すると、こんな感じになる。

追記：2017/08/25

はじめ、これに沿って設置したところ、PCの表示は問題ないのですが、スマホの表示が崩れてしまいました。

このスクリーンショットでいうと、19行目のと20行目のの間に挿入すれば崩れませんでした。
[Blogger]Vaster2に最終更新日を設置する[ズレない]|すたすた式

らしいです。

タグ#Blogger #code

コメント一覧

名前:universe :

KUROさん、
本当に度々すみません。m(__)m
（あまりにもKUROさんの記事が魅力的な為すぐに試したくなってしまいます。）

最終更新日のスクリプト、
昨日からテンプレートのどこに挿入しても"最終更新日”としか表示されません。(>_<)

具体的にBloggerブログでは、個別ページのどこに配置したら良いのでしょうか？
何卒よろしくお願い申し上げます。
≦(._.)≧ ≦(._.)≧ m(__)mm(__)m。

2013/05/24 17:32
名前:管理人 :

記事に内容を追加しました。

おそらく、確認用のブログが非公開にしているからだと思います。
動作確認する間だけでも、公開すれば表示されるかと思います。

【確認した事項】
記事内のサンプルソースを補足に書かれた場所にコピペして、動作することを確認しました。

2013/05/24 18:02
名前:universe :

管理人様、迅速なご返信誠にありがとうございます。m(__)m

しかし、
おっしゃるところに挿入しても、
やはり、最終記事更新日の日付が表示されません。

なぜでしょう…。
(´;ェ;`)ウゥ・・・

また、非公開ブログでの確認ではなく公開ブログであちこちに挿入しての確認をしていました。

それと、
以前に伺った投稿記事すべてに日付を付ける方法のコメントにてスクリプトを記載して頂いた所が、
補足の部分に当たると思うので、
こちらのコメント欄のスクリプトです。
http://blog2.k05.biz/2013/01/bloggerdateheader.html

そのスクリプトの以下いくつかの場所に挿入したのですが…。

<b:if cond='data:post.dateHeader'>
<script type='text/javascript'>
var dateHeader = "<data:post.dateHeader/>";
</script>

（ここに挿入してもNG）

</b:if>

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

（ここに挿入してもNG）

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

（ここに挿入してもNG）

<b:else/>

（ここに挿入してもNG）

<p class='date-header'><span>

（ここに入れると最終更新日の後に投稿日が最終更新日として表示される投稿もありますが、
特に更新した記事という投稿ではありません。
また最終更新日というのだけ表示され、初回の投稿日自体が表示されないです。）

<script type='text/javascript'>
document.write(dateHeader);
</script>
</span></p>

（ここに挿入してもNG）

</b:if>

現在は、
（ここに入れると最終更新日の後に投稿日が最終更新日として表示される投稿もありますが、
特に更新した記事という投稿ではありません。
また最終更新日というのだけ表示され、初回の投稿日自体が表示されないです。）

の部分に挿入したままにしております。

何か解決方法はありますでしょうか？

それとも、
すべての記事に日付を付ける方法との併用はできないのでしょうか？

2013/05/24 20:56
名前:管理人 :

■
一部記事を書き換えたので、新しいサンプルで試してみてください

以前のサンプルで
＞間違い
var dd = new Date(updated)
＞正しい
var dd = new Date(updated);

のようにセミコロンが抜けていたので、環境やタイミングによってはエラーになっている可能性があります。私の環境では間違いでも動作していた。

※Javascript自体が動作しない状況になる？

■
ソースのコピーは
「view plain」をクリックして、それをお願いします。

■挿入位置
http://blog2.k05.biz/2013/01/bloggerdateheader.html
を適用している場合は、
その適用した「真後ろ」に追加です。

■個別記事の時だけ表示
サンプルはそういう仕様なので、個別記事で確認してください。
一覧表示の時は全く表示されないように、サンプルも書き換えました

■更新日付
feedの情報には「updated：更新日付」「published：投稿日付」があります。

・インポートした場合は、その日の日付がupdatedに設定される
・新規投稿した場合は、updatedにも投稿日と同じ値が設定される

実際問題、更新日付＝投稿日付の時に、更新日を表示するのはうれしくないと思うので、表示しないように、サンプルを書き換えました。

■更新日付の確認方法
・記事のURL
http://blog.example.com/2010/12/blog-post.html

・Feed情報
http://blog.example.com/atom.xml?redirect=false&path=/2010/12/blog-post.html

path=の後ろに記事のドメイン抜きのURLをかいてブラウザ（Chorme）でたたけば、XML形式？でテキスト表示されると思います。

<published>2010-12-19T11:12:00.007+09:00</published><updated>2013-01-26T14:35:24.045+09:00</updated>

のようになってる部分の情報を取得してきています。
この値と同じならば、仕様通りです

※updatedは、publishedの次の奴です、ほかにもupdatedがありますがそれではありません。publishedが投稿日付です。

■記事一覧でも表示したい
出来ますが、本記事では対応予定はありません。

2013/05/24 22:24
名前:universe :

管理人様、本当にありがとうございます。
見事解決しました。m(__)m
すべての投稿に日付を表示するスクリプトの後でちゃんと表示されました。

その後、
投稿記事下部の投稿者と時間が記載されている所に、
timeStampISO8601という記載があったのでそちらに挿入してもOKかと思い挿入して確認した所、
その場所でもちゃんと表示されました。

また、
記事直下にも挿入してもちゃんと表示されました。

現在は記事直下に表示する様にさせて頂いております。
毎回、解決までして頂きまして本当に感謝致します。
ありがとうございます。
_(._.)_

2013/05/24 23:25
名前:管理人 :

IEでは
最終更新日：NaN年NaN月NaN日
と表示されることが判明したので、サンプルを書き換えました。

■旧ソース
var dd = new Date(updated);
var pp = new Date(published);
if(dd.getFullYear()== pp.getFullYear() && dd.getMonth() == pp.getMonth() && dd.getDate() == pp.getDate()){
//日付が同じときは出力しない
}else{
var updated_dd ="最終更新日："+ dd.getFullYear()+"年"+(dd.getMonth()+1)+"月"+dd.getDate()+"日";
document.getElementById("last-modified").innerHTML = updated_dd;
}
■新ソース
var dd_Y = updated.substring(0,4);
var dd_M = updated.substring(5,7);
var dd_D = updated.substring(8,10);

var pp_Y = published.substring(0,4);
var pp_M = published.substring(5,7);
var pp_D = published.substring(8,10);

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;
}

2013/05/24 23:59
名前:universe :

管理人様、
私のブログでは、
旧ソースでもIEでもちゃんと最終更新日が日付にて表示されています。
（私のPC環境にてですが…。）

2013/05/25 00:19
名前:管理人 :

確かに、IE9で確認しましたがそちらのサイトは動作してますね。
おそらく、ヘッダー部分に
<meta content='IE=edge, chrome=1' http-equiv='X-UA-Compatible'/>
が書かれているからだと思います。

この記述があると、Chromeをインストールしている環境だと、IEで見てもChromeのエンジンが使われるとかでは？

■
IEでjavascriptのDate.parseがNaNになる
http://blog.techboon.info/archives/228

javascriptでDate.parse()を使うときブラウザ毎に差異が・・・
http://www.hk-factory.net/program-neta/47/

2013/05/25 00:43
名前:universe :

確かに<meta content='IE=edge, chrome=1' http-equiv='X-UA-Compatible'/>
を記載してあるとおっしゃる通りの動作となります。

ですが、
今、

１．chrome=1のみを削除した場合。
２．<meta content='IE=edge, chrome=1' http-equiv='X-UA-Compatible'/>すべてを削除した場合。

の両方にて、
IEでの表示を確認しましたが、
どちらでも表示されていました。

今は元に元に戻してあります。
<meta content='IE=edge, chrome=1' http-equiv='X-UA-Compatible'/>

2013/05/25 00:58
名前:管理人 :

<script type="text/javascript">
var dd = new Date("2013-01-26T14:35:24.045+09:00");
var updated_dd ="最終更新日："+ dd.getFullYear()+"年"+(dd.getMonth()+1)+"月"+dd.getDate()+"日";
alert(updated_dd);
</script>

htmlファイルを作成して、ローカルで動作させれば、わかると思います。

IE9では、「最終更新日：NaN年NaN月NaN日」になる。
Chromeでは、「最終更新日：2013年1月26日」になる。

<meta content='IE=edge, chrome=1' http-equiv='X-UA-Compatible'/>
を入れると、IE9でも「最終更新日：2013年1月26日」になる。

2013/05/25 01:16
名前:universe :

管理人様、
ローカルで確認しました。
確かに、最終更新日：NaN年NaN月NaN日
という表示になりました。

早速、書き換えてテンプレート更新します。

2013/05/25 01:24
名前:p--q :

とても参考になり、ありがとうございました。
34行目のsURLがダブっています。

2013/08/29 21:50
名前:だんべぇ :

できました。記事を後から更新しても公開日が古いままで、何とかしたいと思っていた技。
コチラのご説明のとおり、うまく出来ました。
とても参考になる記事でした。

2014/09/13 07:47
名前:たけもも :

はじめまして、たけももと申します。
こちらを参考にさせていただいて、無事Bloggerでに更新日を表示させることができました。
ありがとうございます。

2017/03/09 21:06
名前:7091 :

始めまして。
今現在、BloggerでVaster2のテンプレートを使用している7091です。
今回、Bloggerで記事の最終更新日を自動更新したく調べていたら、こちらの管理人さんのページにたどり着きました。
上記ページを参考にテンプレート内のダグに張り付けてみたのですが、Vaster2のタグに■補足のタグが見つからず、うまく作動出来ませんでした。
Vaster2のテンプレートで最終更新日の表示をさせる方法ありますでしょうか。
教えて頂けると大変ありがたいです。

2017/07/04 16:44
名前:管理人 :

記事に追加しました。

data:post.dateHeader を検索して、日付を表示されている個所を見つけ出して、そのあたりにコピペすれば表示されるかと思います。

こちらで、Vaster2で試してみたところ、表示されたので問題ないかと・・。

2017/07/04 17:20
名前:7091 :

早急の回答感謝です。
早速試しました！見事、表示されました。
本当にありがとうございます。
感謝です。

2017/07/04 18:35
名前:アクド :

はじめまして、記事を読んで悪戦苦闘しています。

vaster2を使用しています。

新バージョン

// 投稿日
var published=new Date("");
// 最終更新日
var updated =new Date("");

//

をコピーして

document.write(hiduke)

このあたりに挿入

のこのあたりに挿入とかいてある箇所の挿入したのですが、何も変化がありません。

解決方法についてご教授ください。

2018/03/01 20:31
名前:管理人 :

HTMLソースを見る限りでは、成功してるようには見える。
サンプルは、投稿日と更新日が同じだと表示されません。
＝＝＝＝＝＝＝＝＝
■
「このあたりに挿入」というところに、
なんでもよいので、＠＠＠とか文字を挿入してみて
その文字が、表示されることを確認してみてください。

＠＠＠が表示されないとしたら、なにか勘違いしてると思います。

表示されるのなら、挿入個所が間違ってないので、そのほかの原因だということになります。

■
Bloggerのテーマ編集画面で、
1688行目あたり、
<span class='post-tag'>の上に
記事通りに、再度、新バージョンの方をコピペしてみましたが、動作してますね。

chromeで動作確認しました。

もしかすると、テーマをテキストエディターで直接編集して、それをBloggerの管理画面で読み込むだとうまくいかないとかはあるかも。

2018/03/01 21:08
名前:アクド :

返信ありがとうございました。

自分なりに調べてみたところ、ブログ記事を公開するときに日付と時間を設定していたことが原因でした。

2018/03/05 16:16

ブログや記事に関する質問・感想など

ご意見やお問い合わせは、お問い合わせ窓口から受け付けています。

記事に関する質問・感想などは、この記事のコメントをご利用ください。

記事にコメントを書くお問い合わせ

Bloggerで記事に最終更新日を付ける方法【2018年更新】

新バージョン

月日を0埋めしたくない

日付表示を少し変えたい

新バージョンのカスタマイズ事例

旧バージョン

サンプルの動作

補足

Bloggerの標準テンプレート

Vaster2の場合

コメント一覧

ブログや記事に関する質問・感想など

コメントを残す

関連記事

Bloggerのサイドバーにアコーディオンメニューを導入する方法

404ページへのアクセスを簡単に調べる方法

Bloggerで使いやすい「レスポンシブ」無料テンプレート【2015年】

Bloggerで画像の周りのスペース（余白、margin）を取る方法

Google BloggerのNavバーを消す【ナビゲーションバー】

無料のBloggerテンプレートを配布してる海外サイト10個

Bloggerで記事に最終更新日を付ける方法【2018年更新】

新バージョン

月日を0埋めしたくない

日付表示を少し変えたい

新バージョンのカスタマイズ事例

旧バージョン

サンプルの動作

補足

Bloggerの標準テンプレート

Vaster2の場合

関連記事

コメント一覧

ブログや記事に関する質問・感想など

コメントを残す

関連記事

Bloggerのサイドバーにアコーディオンメニューを導入する方法

404ページへのアクセスを簡単に調べる方法

Bloggerで使いやすい「レスポンシブ」無料テンプレート 【2015年】

Bloggerで画像の周りのスペース（余白、margin）を取る方法

Google BloggerのNavバーを消す 【ナビゲーションバー】

無料のBloggerテンプレートを配布してる海外サイト10個

Bloggerで使いやすい「レスポンシブ」無料テンプレート【2015年】

Google BloggerのNavバーを消す【ナビゲーションバー】