Bloggerの記事に自動で簡単に更新日時を追加する方法!

Blogger HTML コード 簡単 時短

t f B! P L

ブログやHPで見る『更新日時』を気にしたことはありますか?

ブログを始めるまで全く気にしたことが無かったのですが、よ~く考えたら、更新日時って大事な情報じゃん!と感じるようになりました(^-^;

詳しくは下に書きますが、更新日時が古い記事って、情報が古いってことの裏返しなんですよね。

なので、更新日時が表示されていると、検索者は「こっちの方が新しい情報が載ってるかも!」と思うのではないでしょうか?
言い換えると、更新日時は「この記事の情報は新しいですよ!」というアピールになると思います。

そんなこと知ってるよ!だから、更新するたびにその更新日時を書いている!と言う方もいると思います

ただ…更新日時の手書きって、記述漏れもあるでしょうし、何よりも面倒ですよね!

と言うことで、手抜き大好きなHobbyですので、この記事では(Bloggerであれば)ブログのテーマに関わらず、ブログ記事に自動で更新日時を入れる方法と表示内容のカスタマイズ方法をご紹介します。

更新日時は必要?

先程も聞きましたが、更新日時って本当に必要でしょうか?

結論から言いますと、情報は生もの!だと思うので、更新日時は必要な情報だと思っています!!

とは言え、ブログ執筆者からすれば、更新日時を書くのは面倒ですし、無くても、有意義な情報なら良いじゃないか!と思うかも知れませんが…

今の世の中、物事の考え方、テクノロジーやソフトウェアなど日進月歩で変わっている状況ですので、日付や時間は情報の新旧を判断する上で重要な情報と言えます。

貴方が情報を調べている時(例えば新しいバージョンのアプリの使い方など)に、古くて今は使えない情報は欲しいでしょうか?

私は、正直言って、“今は”使えない古い情報はいらないし、試した後に「時間の無駄だった…もう、この記事見ない!!」って思います。

更新日時を記述しない結果の波及効果を言い換えれば、自分のブログ記事への信頼を失う可能性があると言えます。

では、私なりに考えるブログに更新日時を付ける意味を整理してみますと…
  • 情報の新しさを明示できる。
  • 情報に対する誠実さを読者に与えられる。
  • 読者の信頼を損なわないで済む
  • ブログ執筆者で更新日時を気にしている人にも好感を持たれる
といった雰囲気でしょうか。

…「信頼」や「好感」までは持たれないかも知れませんが…

少なくとも、(有用な)新しい情報が欲しいに訪問してくた方に、読み進めて貰える可能性は高くなりますし、更新日時を記述する必要は十分にあると思います。


必要性や効果は理解できた!けど、やっぱり面倒…と言うアナタ!!

大丈夫です(^^)b

以下、自動で更新日時を表示する方法をご紹介します☆

自動で更新日時を表示する方法

自動で更新日時を表示する方法は、調べてみると幾つかありますが、先ずはどんなテーマにも使えそうな(一番汎用性がありそうな)方法をご紹介します☆

方法は簡単!bloggerの『レイアウト』にある『フッター』を選択、『Javascriptの挿入』をクリックし、以下のコードをコピペするだけです!!

フッターにコピペするコード(Javascript)

      <script>  // DisplayUpdatedDate_Bloggerモジュール
        var DisplayUpdatedDate_Blogger = DisplayUpdatedDate_Blogger || function(){
          var d = { // グローバルスコープに出すオブジェクト。
              callback: {  // コールバック関数。
                replace_date: function(json){  // 日付を置換する。
                  var published_date = json.feed.entry[0].published.$t; //公開日時を取得。「2013-08-29T22:07:」書式で返る。
                  var updated_date = json.feed.entry[0].updated.$t;     //更新日時を取得。「2013-08-29T22:07:」書式で返る。
                  var p = published_date.match(/\d+/g); // 公開年月日時分を配列に取得。
                  var u = updated_date.match(/\d+/g);   // 更新年月日時分を配列に取得。
                  g.elem.textContent = `公開日:${p[0]}年${p[1]}月${p[2]}日${p[3]}時${p[4]}分 更新日:${u[0]}年${u[1]}月${u[2]}日${u[3]}時${u[4]}分`;
                }
              },
              all: function(id){ // ここから開始する。
                g.elem = document.getElementById(id);
                var url = '/feeds/posts/summary?path='+location.pathname+'&alt=json-in-script&callback=DisplayUpdatedDate_Blogger.callback.replace_date';
                g.elem && writeScript(url);
              }
          };
          var g = { // モジュール内の"グローバル"変数。
              elem: null  // 日付を置換する要素。
          };
          function writeScript(url) {  // document.write()の代替。URLを読み込む。
              var newInclude = document.createElement('script');
              newInclude.type = 'text/javascript';
              newInclude.setAttribute("src", url);
              document.getElementsByTagName('head')[0].appendChild(newInclude);
          }
        return d;
        }();
        DisplayUpdatedDate_Blogger.all("single-header-date");
      </script>
    
コピー&ペーストが完了したら、忘れずに保存して下さい

どうでしょう?自分の記事を確認すると、更新日時が表示されてます!!

ただ…一瞬違う表示がでますよね…まあ、どんなテーマにも汎用的に使えるので細かいことは~気にしない!ってスタイルでしたら、全く問題ないと思います

更新日時の表示形式の変更方法

ここからは、更新日時の表示内容(形式)の変更方法をお伝えします!

正直簡単な書き換えなので、是非、自分好みに変えてみて下さい☆

変えるところは、10行目の
      g.elem.textContent = `公開日:${p[0]}年${p[1]}月${p[2]}日${p[3]}時${p[4]}分 更新日:${u[0]}年${u[1]}月${u[2]}日${u[3]}時${u[4]}分`;
    
だけです(*^▽^*)

例えば、日付は欲しいけど時間は不要!って事であれば、上記コードの『…時…分』の部分を削除してしまえば良いだけです!

勿論、『年月日』の部分を『/』にしたければ、純粋に、年月日の部分を『/』に書き換えれば変更可能です

まとめ

如何でしたでしょうか。

更新日時を自動でブログ記事に掲載する簡単な方法をご紹介しました。

コードのコピペで更新日時を自動表示させるだけで、情報の新しさを読者に示せるだけでなく、もしかしたら、誠実性を伝えられ、しかも信頼まで獲得できるかもしれませんので、是非とも試してみてください(^^♪

ただ、今回ご紹介した方法は、表示にやや時間がかかる&記事一覧画面には更新日時が表示されないといった難点はあることは事実です。

とは言え、汎用性があって、コピペする箇所も難しくないという意味では、充分に有用な方法かなと思います(^^)/

是非、ご活用下さい☆

追伸:
後日、表示の高速化&記事一覧画面にも更新日時を表示する方法もご紹介します☆乞うご期待(^_-)-☆

QooQ

Blogger