【はてなブログ】Minimalismで更新日を表示する(トップページのエラー対策付き

ブログカスタマイズ

概要

たまに過去記事を修正したり追加したりした時に、更新日が表示されないのはもったいな〜という事で、カスタマイズして表示するようにしました。
こんな感じです。
f:id:moyashidaisuke:20191020025722p:plain

やり方

www.tomomore.com

ほとんどこのままです。

トップページで以下のエラーが出てたので(エラーが出るだけで動作上は問題無さそう)、微修正しています。

エラー

hatenablog.js?version=4cbff299be1219037c65e826e20075ea9027b5e7&env=production:19 Uncaught TypeError: Cannot read property 'tagName' of undefined
at appendLastmod ((index):1762)
at Element.<anonymous> ((index):1745)
at Function.each (jquery.min.js:2)
at r.fn.init.each (jquery.min.js:2)
at Object.<anonymous> ((index):1741)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at A (jquery.min.js:4)
at XMLHttpRequest.<anonymous> (jquery.min.js:4)
at XMLHttpRequest.o (hatenablog.js?version=4cbff299be1219037c65e826e20075ea9027b5e7&env=production:19)

以下コピペ用コード

フッタ

「デザイン」->「カスタマイズ」->「フッタ」

<script>
;
(function ($) {
'use strict';
var urls = [],
opts = {
cache: false,
dataType: 'xml'
},
p,
url = 'https://tech.moyashidaisuke.com/sitemap.xml';  // ドメインを自分のサイトのに変えてね
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/, "")); // 「更新日」という文字を表示
// エラーが出ないように修正
if ($('.entry-header > .date') && $('.entry-header > .date').get(0) && $('.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」

/*↓----更新日時表示----↓*/
.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: bold;
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;
}
/*↑----更新日時表示----↑*/

所感

サイトマップには表示されるのだから、はてなブログ的にはDBにもってるんだよね、、、

公式で対応してくれればこんな面倒な事しなくていいのに、、、wordpressに移行する人の気持ちが少しわかったきた感

コメント

タイトルとURLをコピーしました