はてなブログ記事、更新日の自動表示に成功！ - 理系夫婦Y子とＭの昭和から令和まで

薬剤師Ｙ子です。

私は過去に書いたブログ記事を自分で読み直して少しずつ加筆修正していく作業が大好きです。

また「ここ、このままでは少し変だから直そう」と思って直したからには、その箇所を読んで下さって私と同様に「ここは、どうにかした方が良い」と感じている方（いらっしゃるかどうか分かりませんが）に「直しましたよ！」と伝えたいです。

さらに、古い記事でも少しだけ加筆すれば「まさに今、役立つ情報」として提示できる場合があります。

そんなこんなで「自分のブログに更新日が自動表示されないこと」を前々から気にしていて「いつか必ず表示できるようにしよう！」と思っていました。

でもアドセンスさんから合格通知が届くまでは、合格こそが最優先。

そして、やっと合格したら今度は何だか安心してしまって、更新日の表示に関しては対応が遅れていました。

脱力の数日間を経て、この件でも先輩方のブログを参考にさせていただこうと合計10人ぐらいの方の関連記事を毎晩のように「熟読、そして完全理解」するつもりで読み始めたのですが、私にとって難しい表現が出てくると、いとも簡単に睡魔に負けてしまいました。

そんな中、この素晴らしい３人の皆様の記事のおかげで、最近やっと自動表示の夢が叶いました！

病院薬剤師「薬ザリ」様

女性ＳＥときどきネイリスト「とも」様

TRY SOMTHING NEW 「うたこ」様　

凡ミスによる二度手間などはあったものの終わってみれば実にシンプルで、まずブログのテーマについて「薬ザリ」様の記事に深く肯き、それまでのテーマから「Minimalism」に変更。

http://blog.hatena.ne.jp/-/store/theme/8599973812270629022

次に「とも様」ご教授の簡単３ステップで、めでたく更新日が表示されるようになりました。

コピペＯＫ、とのことですので、実際に私が「表示成功！」へと導いていただいた手順を記録しておきます。これからの方、お試し下さいませ。

ステップ1

まず、「デザイン」＞「カスタマイズ」（スパナのマーク）＞「ヘッダ」＞「タイトル下」に、以下を追記。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"

<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</script>

ステップ２

「デザイン」＞「カズタマイズ」（スパナのマーク）＞「記事」＞「記事下」に、以下を追記。

赤い文字で始まっている行は薬剤師Ｙ子の場合、

url = 'https://www.yakuzaishi-y-co.work/sitemap.xml ';

です。

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>

<script>
;(function($) {
'use strict';
var urls = [], opts = {cache: false, dataType: 'xml'}, p,
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>

ステップ3

「デザイン」＞「カズタマイズ」（スパナのマーク）＞「デザインCSS」に、以下を追記。

※文字の大きさはこの中の“font-size”で調整、とのことですが、私は何もしませんでした。

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

この３ステップで「記事のタイトルをクリックすれば、投稿日の右側に更新日が表示される」ようになったのですが、更新日の前に示されているアイコンが「クルリと更新しましたよ」という感じではなくて「横長の長方形」だったので、「うたこ様」の記事にある「日付の前のアイコンを変える」という箇所を参考に、上記「ステップ３」の真ん中あたり、

font-family: "Font Awesome 5 Free";　を

font-family: FontAwesome;　に、ダメ元で変更してみました。

f:id:Yakuzaishi-Y-co:20190725001557p:plain