理系夫婦Y子とMの昭和から令和まで

都内で働く薬剤師Y子と、パソコン・DIY・生物などに詳しい理系の夫M。昭和30年代から今日までの実体験に最新の情報を加え、多くの方々、特に子育て・孫育て世代の皆様のお役に立つことを願いつつ発信する夫婦(めおと)ブログです。

はてなブログ記事、更新日の自動表示に成功!

薬剤師Y子です。

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

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

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

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

 

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

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

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

 

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

 

病院薬剤師「薬ザリ」様

 

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

 

TRY SOMTHING NEW 「うたこ」様 

  

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

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

 

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

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

 

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

 

ステップ2 

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

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

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

です。

<!-- 更新日時表示 -->
<!--[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 = 'ご自身のサイト/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;
}
/*↑----更新日時表示----↑*/

 

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

font-family: "Font Awesome 5 Free"; 

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

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

その結果、投稿日の前に「カレンダー」アイコン、更新日の前に「クルリと更新」アイコンという表示になりました。

 

その後、『薬剤師Y子の「どこで働く?」』という別ブログも開設し、こちらも更新日が自動表示されるようにしました。

dokode-hataraku.hatenablog.com

 

 

皆様、ありがとうございました!