はてなブログに更新日を自動で追加する方法（スマホ、https対応）

　さっきーです。

　ブログ記事も順調に増えてきましたが、リライトもしなければと思い、特定の記事のリライトも行っています。

　しかし、はてなブログには、投稿日は表示されるのですが、更新日は表示されません。ワードプレスなどでは、プラグインである様ですが、はてなブログを続ける身としては、何とかならないかと思い、先人の知恵にあやかる事にしました。

はてなブログの表示

　はてなブログでの投稿日表示は以下の様になっています。

　以下赤枠の様に投稿日が表示されます。

リライトした際も、この投稿日が変わる事はありません。

　私はやったことが無いのですが、投稿した記事を一度下書きに戻した後にもう一度投稿すると再投稿日に変わる様です（間違っていたらすいません）

ググりました

　ググりますと、色々な方のブログに当たりますが、最終的にはつばささんのブログを参考にしているとの事。　　

www.tsubasa-note.blog

　更にレスポンシブデザインの方用にカスタマイズをアップデートされています。

www.tsubasa-note.blog

この方法は、サイトマップを利用して、更新日をゲットするとの事です。

JavaScriptを使用するのですが、基本的にはコピペさせて頂く事で簡単にカスタマイズできます。

　CSSの記述は、最初の記事にしかありませんので、注意して下さい。

早速実装

　善は急げという事で、早速実装してみました。

　最初以下だったものが、

　以下の様になりました。右側に更新日が表示されるようになりました。更に日付の左側に投稿（時計）更新（矢印）が表示されます。

問題発生

　何も知らないと、やはり問題が発生します。

　アドレスバーの右側に問題のマークがあり、マウスをのせると「問題のあるスクリプトを読み込もうとしている」との表示。

　これはまずいという事で、調査。更にスマホも更新日が全く表示されません。ちなみにスマホはレスポンシブデザインにはしていません。

確認しました

　JavaScriptを確認すると、JQueryというJavaScriptライブラリーのアドレスが、httpから始まる様になっていました。

<!--[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>

　これは、httpsので配信しているページでは、ミックスドコンテンツとなり、エラーメッセージが出る事になります。

　なので、以下に変更する必要があります。

<!--[if lt IE 9]>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>

　http:を削除します。

結果は

　結果、以下の様になりました。投稿日の右側に更新日が入る様になりました。

PC版

スマホ版

またまた問題発生

　サイトマップファイルの変更により、時間まで表示される様になってしまいました。

　そのまま放置していましたが、以下ブログに対策が書いてありました。

www.denno-times.com

　以下の記述を

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 ($('.entry-header > .date').get(0).tagName.toLowerCase() === 'span') {
$('.entry-title').before($container);
} else {
$('.entry-date').append($container);
}

　以下に変更する事で、 

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);
}

　以下の通り、治りました。

まとめ

　今回は、更新日を自動で表示出来る様にしました。これにより、更新日をわざわざ記載しなくても自動で表示されるようになりますので、リライトした事が分かって頂けることになります。

　しかし、無意味に更新をしても同様の表示になりますので、更新は気を付けて行う必要があると思います。

　今後、古い記事のリライトを頑張って行きたいと思います。（笑）