こんにちは、ジブリッシュマンブログのエイジです。
今回は、はてなブログでもワードプレスのようにリライトして更新するだけで、日付表示ができるようになる、そのやり方について説明していきたいと思います。
私が使っているデザイン『minimalism』でのやり方になりますので、自動更新の設定をしても更新されない場合は下の手動更新のやり方で設定してみてください。
違うデザインでも出来るかも知れませんので、やって見る価値ありです。
本題に戻りますが、更新日付はこんな感じになります。下図参照！！！
上の日にちは初回投稿日、その下にリライトした更新日が載るようになります。
更新日が記載されて嬉しいですね！！！
- 簡単に自動更新したい
- 自動更新したけど.....と悩む人
では、紹介していきたいと思います。
さらに私のブログで他の必要な絶対入れたほうがいいカスタマイズ１８選を下記の記事で紹介しています。
リライトした更新日を自動で表示『はてなブログ』2022年最新版
はてなブログで、ブログを書いてる人には自動で更新日を表示出来ないので更新日を表示出来るとありがたいですよね。
手動だと面倒なので自動更新が楽です！！！
<head>要素にメタデータを追加に設定方法
設定方法は、とっても簡単で『設定』➡『詳細設定』➡『head要素にメタデータを追記に』いきましょう。
詳細設定の中にある<head>要素にメタデータを追加に下のコードをコピペしてください。
< 最終更新日時表示 -->
<script>
(function () {
var blogData = document.getElementsByTagName("html")[0].dataset;
if (blogData.page === "entry") {
if (document.readyState == "uninitialized" || document.readyState == "loading") {
window.addEventListener("DOMContentLoaded", function () {
$.ajax({
dataType: 'html',
url: location.origin + location.pathname + "?amp=1"
}).done(function (data, status, xhr) {
data = data.match(/<script type="application/ld+json">(.*?)</script>/);
if (data != null) {
data = data[1];
var ldData = JSON.parse(data);
var datetimeHTML = new Date(ldData.dateModified);
var deltaDatetime = Hatena.Locale.deltaDatetime(new Date(ldData.dateModified));
console.log("data " + deltaDatetime);
var ButtonElm = document.createElement('div');
ButtonElm.innerHTML = '最終更新' + datetimeHTML.toLocaleDateString() + ' (' + deltaDatetime + ')';
document.querySelector("header.entry-header").appendChild(ButtonElm);
} else {
console.log('AMPを利用できる設定ではない');
}
}).fail(function (xhr, status, error) {
// 通信失敗
console.log('通信失敗');
});
}, false);
}
}
})()
</script>
<最終更新日時表示 -->
こちらのコードを『デザイン』➡『カスタマイズ』➡『記事』➡『記事下』にコピペしてください。
こうしないと更新日が出てきません。
<!--[if lt IE 9]>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<!--<![endif]-->
<script>
;(function($) {
'use strict';
var html = '', p,
_ua = (function(u){
return {
Tablet:(u.indexOf("windows") != -1 && u.indexOf("touch") != -1 && u.indexOf("tablet pc") == -1)
|| u.indexOf("ipad") != -1
|| (u.indexOf("android") != -1 && u.indexOf("mobile") == -1)
|| (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1)
|| u.indexOf("kindle") != -1
|| u.indexOf("silk") != -1
|| u.indexOf("playbook") != -1,
Mobile:(u.indexOf("windows") != -1 && u.indexOf("phone") != -1)
|| u.indexOf("iphone") != -1
|| u.indexOf("ipod") != -1
|| (u.indexOf("android") != -1 && u.indexOf("mobile") != -1)
|| (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1)
|| u.indexOf("blackberry") != -1
}
})(window.navigator.userAgent.toLowerCase());
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 (_ua.Mobile) {
$('.entry-title').before($container);
} else {
$('.entry-date').append($container);
}
}
p = getAmpHtml();
p.done(parseAmpHtml);
p.fail(function(error) {});
})(jQuery);
</script>
コピペが終わりましたら、これで終わりになります。
ブログの記事を更新してみて、更新日時が出来ているかを確認してみましょう！！！
どちらを選びますか？
今回紹介した自動更新についてですが、漢字の間違いや少しの言葉のミスを直したとしても、更新すると更新日が変わります。
それをイヤという人もいるので、そういう方は手動更新をオススメいたします。
自動表示できない人に手動で更新日を表示させる【Minimalism】【はてなブログ】2022年最新版 - Gibberish Man
さらに今回の自動更新だと日付のみになるので、下の写真にあるマークは付きません。
意外にこのマークが更新した感じがして、好む方がいるかと思います。（笑）
そういう方も手動更新をオススメです。
上のスクショから３つの日付があります。
- 投稿日
- 再投稿（リライト後）
- 再投稿（リライト後）手動更新
手動更新のコードも入れておくと再投稿（リライト後）には、両方とも表示してしまいます。これが嫌であれば、手動更新のコードを入れなければ表示されません。
私的には、どっちにしようか悩んでる感じです（笑）
簡単でいえば、でもマークが欲しければ手動更新。
どちらも捨てがたいですね！！！
まとめ
今回は、はてなブログにしてる人になりますが、を使うことでリライトした日付を自動更新してくれるやり方の説明をしました。
を使うことで、自動に更新してくれるのはありがたいですね。
ただ難点はやはりはてなブログってのが、良くないなと感じます。
今回も最後まで読んでいただきありがとうございます。
