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


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

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

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

<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で記事に最終更新日を付ける方法』へのコメント

  1. 名前:universe : 投稿日:2013/05/24 17:32

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

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

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

  2. 名前:管理人 : 投稿日:2013/05/24 18:02

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

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

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

  3. 名前:universe : 投稿日:2013/05/24 20:56

    管理人様、迅速なご返信誠にありがとうございます。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>



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

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

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

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

  4. 名前:管理人 : 投稿日:2013/05/24 22:24


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

    以前のサンプルで
    >間違い
    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が投稿日付です。

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

  5. 名前:universe : 投稿日:2013/05/24 23:25

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

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

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

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

  6. 名前:管理人 : 投稿日:2013/05/24 23:59

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

  7. 名前:universe : 投稿日:2013/05/25 00:19

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

  8. 名前:管理人 : 投稿日:2013/05/25 00:43

    確かに、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/

  9. 名前:universe : 投稿日:2013/05/25 00:58

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

    ですが、
    今、

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

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

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

  10. 名前:管理人 : 投稿日:2013/05/25 01:16

    <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日」になる。

  11. 名前:universe : 投稿日:2013/05/25 01:24

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

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

  12. 名前:p--q : 投稿日:2013/08/29 21:50

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

  13. 名前:だんべぇ : 投稿日:2014/09/13 07:47

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

  14. 名前:たけもも : 投稿日:2017/03/09 21:06

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

  15. 名前:7091 : 投稿日:2017/07/04 16:44

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

  16. 名前:管理人 : 投稿日:2017/07/04 17:20

    記事に追加しました。

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

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

  17. 名前:7091 : 投稿日:2017/07/04 18:35

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

コメントを残す

メールアドレスは公開されません。
また、コメント欄には、必ず日本語を含めてください(スパム対策)。