はてなブログの記事に更新日を表示するカスタマイズ！そして「はてなブログ」に文法違反が見つかった件

　すでに気づいている方もいらっしゃると思いますが、記事上に更新日時を追加しました。
これは、記事を見た人に更新があったことを分かりやすくするためです。

和さんのブログ『黒木ノ水岩』を参考にしながら、

kurokinomizuiwa.hatenablog.com
和さん、ありがとうございますm(_ _)m
記事のページ上部、公開日の横に更新日が表示されるようにしました(^^ゞ

このときに、いろいろと調べてみて分かったことがありました！
記事のHTMLコードをチェックしてみたら...

　<time pubdate datetime=

と！
？？？

pubdate 属性は、HTML5 で time要素における導入が検討されましたが、最終的には導入されず、2011年11月に廃止となっています。
指定した場合、文法違反扱いとなりますが、多くのブラウザーなどはpubdate 属性は無効扱いとしているので、実害はないと思いますが...

W3Cの定義書にも記述されていません！

www.w3.org

また、いくつかの有名ブログをチェックしましたが、
　① 構造化データを定義している
　② pubdate 、datePublished ともに指定しない
が大半でした。

Google ウェブマスター向け公式ブログの『ウェブページの最適な日付を Google 検索に知らせるには』にも

webmaster-ja.googleblog.com

pubdateの記載はありません。

はてなさん、これってブログシステムを全くチェックしていないのと同じですよ〜！？

更新日付の表示については...

設定→ヘッダー

追加または置換コード

<!--「jQuery」参照URL-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--「Font Awesome」参照URL-->
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet">

デザイン→記事上または下

追加コード

<script>
/*
 * Show lastmod for Hatena Blog v1.0.1
 * Date: 2016-12-20
 * Copyright (c) 2016 https://www.tsubasa-note.blog/
 * Released under the MIT license:
 * http://opensource.org/licenses/mit-license.php
 */

;(function($) {
'use strict';
var urls = [], opts = {cache: false, dataType: 'xml'}, p,
//url = 'https://www.tsubasa-note.blog/sitemap.xml'; // URLの入力例
url = 'https://retiresaki.hatenablog.com/sitemap.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();
}
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() {});
}
function nextURL() {
urls.shift();
if (urls.length) findURL(urls[0]);
}
function appendLastmod(lastmod) {
var $container = $('<div></div>', {'class': 'lastmod'});

$container.append($('<time itemprop="dateModified"><span></span></time>', {'class': 'date-year'}).text(lastmod));

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>

　現在のsitemapの更新日の文字列フォーマットを変更する必要がなかったので、元のスクリプトの日付を設定する部分を若干変更・簡素化しています。

デザイン→デザインCSS

追加コード

/*更新日時表示*/
.lastmod {
background-color: transparent;
padding: 5px 0px;
text-decoration: none;
font-size: 14px;
display: inline;
margin-left: 0px;
// font-family: 'Montserrat', sans-serif;
color: #101080;
}
.lastmod::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
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: FontAwesome;
content: '\f017';
}

　修正するのは、Java-script の
『url = 'https://retiresaki.hatenablog.com/sitemap.xml'; // ここにサイトマップへのURLを入力してください。』
のurlを各自のサイトマップファイルを指定するだけです！

　これで、記事をみた人が更新されたのだと、理解し易くなったと思います(^o^)v
しかし、これはsitemap.xmlから更新日を取得する方法で、sitemap には時間までの記述がないので、残念がら日付だけです。

　記事一覧の方は指定する箇所がないのと、無料版ではスマフォのhtmlの編集ができないので、どうしようもないですね！(苦笑)