やぁん？ヤドクイーンです。
古い記事を更新したとき、最新の更新日を自動で表示させることができたら便利ですよね？
そんな思いから、更新日を自動表示できるように設定しました！
コピペで簡単に設置できたので、気になる方はぜひ参考にしてください。
本ブログでは、はてなブログのテーマ「Haruni」を使用しています。
「更新日を自動表示」の設定方法
参考にした（コピペさせていただいた）サイトです。
ありがとうございます！
【コピペOK】【はてなブログ】更新日付を自動表示したい！設定方法を解説^^ - tomomore
headに入力するコード
以下のコードを「設定」>「詳細設定」>「headに要素を追加」に入力してください。
<!--「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">
記事下に入力するコード
以下のコードを「デザイン」>「カスタマイズ」>「記事」>「記事下」に入力してください。
<!-- 更新日時表示 -->
<!--[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 urls = [], opts = {cache: false, dataType: 'xml'}, p,
url = 'あなたのブログURL/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').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>
<!-- ここまで更新日時表示 -->
「あなたのブログURL」という部分に、自分のブログURLを入力します。
この《ヤドめで》であれば「https://www.yadomede.com/sitemap.xml」となります。
デザイン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;
}
/*↑----更新日時表示----↑*/
設置したときの画面の見え方
【パソコンから見た場合】
【スマホから見た場合】
こんな感じで、ページの上部（タイトルの上）に表示されています。
おわりに
簡単に設定することができました。
よく記事をリライトされる方など、もし興味がある方がいれば、参考になると幸いです。
ただし、テーマや他のカスタマイズの状況によっては上手くいかない場合もありますので、あらかじめバックアップをとっておくことをおすすめします。
・・・ちなみに、なぜこの記事をこのタイミングで書いたのか？
ヤドンのマンホールの記事を更新したから！
ありがたいことに、《ヤドめでブログ》での１番閲覧数の多い記事がヤドンのマンホールをまとめた記事です。
マンホールが１個追加されたことにより、記事を更新したので、更新したことが分かりやすいようにしたかったからです。
＼こちらです／
以上です。
最後まで読んでくださって、ありがとうやぁん♡
＼他のブログカスタマイズ記事はこちら／