はてなブログで更新日を自動で表示する

今回ははてなブログで更新日時を自動的に表示する方法を紹介したいと思います。せっかく記事を更新しているのに、作成日しか表示されていないと記事が古いと思われてしまいます。記事が古いと誤解され見ていただけなかったというのは、ページ作成者、閲覧者ともによくないことだと思います。それでは説明していきます。

参考にさせて頂いたページの紹介

下記のページを参考にさせて頂きました。先駆者の方には本当に感謝しかありません。

www.tomomore.com

javascriptとcssを追加することで、更新日を自動で表示できるようになります。上記ページのコードをコピペで使用すると作成日と更新日が2行で表示されてしまったので、1行で表示されるように修正を入れています。また、カレンダーアイコンを追加で表示するようにしています。

Font Awesome 5 FreeとJQueryの読み込み

更新日の表示には、Font Awesome 5 FreeのアイコンとJQueryを使用します。下記のjavascriptコードの前に下記コードでインポートしてください。既にインポート済みであれば、不要です。私は はてなブログの[設定] ⇒ [詳細設定] ⇒ [headに要素を追加]の項目に下記コードを記載しています。

<!-- Font Awesome 5 Free インポート -->
<link href="//use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet">
<!-- Jqueryのインポート -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

更新日追加のjavascriptコード

下記が私のページで使用しているjavascriptになります。[デザイン] ⇒ [カスタマイズタブ] ⇒ [記事] ⇒ [記事下]に貼り付けます。コード内に簡単ですがコメントを記載しましたので、参考にしてください。

<!-- 更新日時表示 -->
<script>
  (function($) {
    'use strict';
    var urls = [], opts = {cache: false, dataType: 'xml'}, p,
    url = 'https://www.raspberrypirulo.net/sitemap.xml';

    <!-- 指定されたサイトマップ.xmlからURLを抜き出す関数 -->
    function parseSitemapXML(url) {
      var d = new $.Deferred;
      $.ajax($.extend(opts, {
        url: url
      })).done(function(xml) {
        $(xml).find('sitemap').each(function() {
          urls.push($(this).find('loc').text());
        });
        d.resolve();
      }).fail(function() {
        d.reject();
      });
      return d.promise();
    }
        
    <!-- サイトマップ内のURLと現在表示されているページのURLが一致するまで検索する -->
    <!-- 一致した更新日をappendLastmod関数の引数に渡す -->
    function findURL(url) {
      $.ajax($.extend(opts, {
        url: url
      })).done(function(xml) {
        var isMatched = false;
        $(xml).find('url').each(function() {
          var $this = $(this);
          if ($this.find('loc').text() === location.href) {
            isMatched = true;
            appendLastmod($this.find('lastmod').text());
            return false;
          }
        });
        if (!isMatched) nextURL();
      }).fail(function() {});
    }
        
    <!-- 次のURLに移動する -->
    function nextURL() {
      urls.shift();
      if (urls.length) findURL(urls[0]);
    }
        
    <!-- 取得した更新日の不要な部分を置き換え、既存のhtmlに追加して表示する -->
    <!-- 横並びにするために、<span></span>を使用 -->
    function appendLastmod(lastmod) {
      var $container = $('<span></span>', {'class': 'lastmod'}).text(lastmod.replace(/T.*0/,""));
      if ($('.entry-header > .date').get(0).tagName.toLowerCase() === 'span') {
        $('.entry-title').before($container);
      } else {
        $('.entry-date').append($container);
      }
    }

    <!-- 上記の関数を実行 -->
    p = parseSitemapXML(url);
    p.done(function() {findURL(urls[0])});
    p.fail(function(error) {});
    
    })(jQuery);
</script> 

更新日追加のcssコード

下記が私のページで使用しているcssになります。[デザイン] ⇒ [カスタマイズ] ⇒ [デザインCSS] に貼り付けます。コード内に簡単ですがコメントを記載しましたので、参考にしてください。

/*----更新日時表示----*/
/*----更新日時、アイコンの設定----*/
.lastmod {
  background-color: transparent;
  padding: 5px 0px;
  text-decoration: none;
  font-size: 15px;
  display: inline;
  margin-left: 0px;
  color: #888888;
}

.lastmod::before {
  margin-right: 5px;
  margin-left: 10px;
  padding-left: 3px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f01e';
}

/*----作成日時、アイコンの設定----*/
.entry-date a {
  background-color: transparent;
  padding: 5px 0px 5px 6px;
  text-decoration: none;
  font-size: 15px;
  display: inline;
}

.entry-date a::before {
  margin-right: 5px;
  padding-left: 3px;
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: "\f017";
}

/*----カレンダーアイコンの設定----*/
.date:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 300;
  content: "\f073";
  left: 0;
  font-size: 95%;
  top: 0;
}

これで更新日が自動的に表示されるようになります。これで記事を更新していることが、閲覧者に伝わるので、記事が古いから見るのをやめようと離脱してしまう人を軽減できると思います。

トップに戻る