リライト記事の更新日時表示のカスタマイズで時刻まで表示されるようになった件について

はてなブログで「リライト記事の更新日時を日付横に表示する」カスタマイズをされている方も多いと思います。
カスタマイズの作者はつばさノートさんです。
www.tsubasa-note.blog
www.tsubasa-note.blog

サイトマップで更新日時を取得するやり方をされていた方が多いと思いますが、昨日おととい？あたりから更新日時の表示がおかしくなっています。
これは過去のカスタマイズのクライアント様から教えていただきました。情報提供ありがとうございます。

時分秒まで表示される

更新日時の日の後に時刻も表示されています。前は日付だけでしたね。

流石に分秒単位までの表示はいらない笑

現在のはてなブログのサイトマップは↑こうなっています。
過去のはてなブログのサイトマップlastmodがどうなっていたかわからないのでググって調べてみました。
iscleさんの記事にサイトマップのスクリーンショット画像があったので引用させていただきます。

画像引用元：はてなブログのサイトマップを Search Console に登録する方法 | iscle [イズクル]

以前は時刻は省略されていたようです。

XML サイトマップのlastmodタグについて

XMLサイトマップについてよく知らないので調べてみました。

lastmod
ファイルの最終更新日です。 この日付は W3C Datetime 形式で記述します。 必要な場合は、時刻の部分を省略して YYYY-MM-DD の形式で記述することもできます。

このタグは、サーバーが返す If-Modified-Since (304) ヘッダーとは別のものです。検索エンジンは、両方のソースからの情報を別々に使用することがあります。

https://www.sitemaps.org/ja/protocol.html

W3C Datetime 形式：Date and Time Formats

バグではなくてサイトマップの日付の表示形式が仕様変更になっただけみたいですね。

はてなとしては、はてなブログのサイトマップを更新日時を表示するカスタマイズのために提供している訳ではないでしょうから、仕様変更でカスタマイズが崩れても仕方ありません。

サイトマップバージョンを一部改変

【追記】id:fpra1320さんがサイトマップで設定するやり方のJavaScriptのコードの修正版を公開されています。こちら↓の記事を是非ご参照下さい。
https://www.denno-times.com/entry/2019/06/07/070000www.denno-times.com

「Haruni」の日付デザインに合わせたJavaScriptのコードをご紹介します。id:fpra1320さんのコードを一部改変。"-"を"."に置換しています。
// ここにサイトマップへのURLを入力してください。のurl = '';の''の中にご自身のブログのサイトマップのurlを入れて下さい。このコードをデザイン＞記事下に貼り付けます。

<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 = ''; // ここにサイトマップへの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'}).text(lastmod.replace(/T.*0/,"").replace(/-/g,'.'));
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>

ハイフンをドットに置換せず、そのままの場合は

var $container = $('<div></div>', {'class': 'lastmod'}).text(lastmod.replace(/T.*0/,"").replace(/-/g,'.'));

↑を以下のようにして下さい。

var $container = $('<div></div>', {'class': 'lastmod'}).text(lastmod.replace(/T.*0/,""));

AMPバージョンなら今まで通り

はてなブログProのユーザーはAMPを有効にすれば上記のつばさノートさんの「AMPバージョン」のコードで今までどおりの表示になります。

jQueryをhttpsに対応したものに変更して引用します。

フッターに貼るscript

<!--[if lt IE 9]>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<!--<![endif]-->
<script>
/*
 * Show lastmod for Hatena Blog2 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 html = '', p;
function getAmpHtml() {
var d = new $.Deferred;
$.ajax({
dataType: 'html',
cache: false,
url: location.origin + location.pathname + "?amp=1"
}).done(function (data) {
html = data;
d.resolve();
}).fail(function () {
d.reject('Error');
});
return d.promise();
}
function parseAmpHtml() {
var m = html.match(/<script type="application\/ld\+json">(.*?)<\/script>/);
if (m === null) return;
appendLastmod(JSON.parse(m[1]).dateModified.split('T')[0]);
}
function appendLastmod(lastmod) {
var $container = $('<div></div>', {'class': 'lastmod'});
$container.append($('<span></span>', {'class': 'date-year'}).text(lastmod.split('-')[0]));
$container.append($('<span></span>', {'class': 'hyphen'}).text('-'));
$container.append($('<span></span>', {'class': 'date-month'}).text(lastmod.split('-')[1]));
$container.append($('<span></span>', {'class': 'hyphen'}).text('-'));
$container.append($('<span></span>', {'class': 'date-day'}).text(lastmod.split('-')[2]));
if ($('.entry-header > .date').get(0).tagName.toLowerCase() === 'span') {
$('.entry-title').before($container);
} else {
$('.entry-date').append($container);
}
}
p = getAmpHtml();
p.done(parseAmpHtml);
p.fail(function(error) {});
})(jQuery);
</script>

CSS

CSSは「Haruni」に合わせたものを置いておきます。

.lastmod {
color: #333;
background-color: #fff;
padding: 5px 0;
text-decoration: none;
font-size: .9rem;
display: inline;
margin-left: 5px;
font-weight:bold;
}
.lastmod::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
content: '\f021';
font-weight:bold;
}
.entry-date a {
padding: 5px 6px !important;
}
.entry-date a::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
content: '\f017';
}