【表示の不具合に対応】はてなブログで記事の最終更新日を自動表示させる方法を紹介しますの！

 

みんなー！うしるだよー☆

 

今回はねえ！はてなブログで記事の「最終更新日」を自動表示させる方法を紹介しちゃうんだ！

 

刮目して見てね♡

 

 

リライトした記事の最終更新日を表示させたい！

 過去に書いた記事をリライトるって人は多いと思います。誤字とか脱字とか・・・え？

しかし、リライトしてもはてなブログだと更新した日付は表示されません。そこで、最終更新日を表示させる方法を紹介します！ 

下記の記事を参考に導入していきます。

www.tsubasa-note.blog

 

追記（2019年6月12日）:はてなブログ仕様変更に伴う不具合の修正

はてなブログの仕様に伴い、上記の記事を参考に導入すると更新日付のだけではなく「HH:mm:ss＋09:09」と時間、分、秒、タイムゾーンまで表示されてしまうようになってしまいました。

はてなブログの仕様変更に対応したコードに修正しました。当記事のコードをそのままコピペすれば問題なく日付のみ表示されると思います。

 

最終更新日表示のJavaScriptコード

<!--日付更新-->
<!--[if lt IE 9]>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<!--<![endif]-->
<script>
/*
 * Show lastmod for Hatena Blog v1.0.0
 * Date: 2016-12-20
 * Copyright (c) 2016 https://www.tsubasa-note.blog/
 * Released under the MIT license:
 * http://opensource.org/licenses/mit-license.php
 */
;(function($) {
'use strict';
var urls = [], opts = {cache: false, dataType: 'xml'}, 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()),
url = ''; // ここにサイトマップへのURLを入力してください。
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>

上記のコードに36行目の「url = '';」に自分のサイトのサイトマップ※を記述します。

サイトマップを記述したら上記のコードをコピーします。

 

※サイトマップは以下の例のように「自分のブログのURL/sitemap.xml」と言ったように記述します。

例：https://www.charlottehibi.com/sitemap.xml

 

「記事下」にhtmlコードを貼り付け

はてなブログの管理画面にアクセスして、「デザイン」⇒「①スパナマーク」⇒「②記事」」⇒「③記事下」に上記のJavaScriptコード貼を貼り付けます。

「④変更を保存」をクリックして設定を保存します。

 

ぺローンて貼り付けるんだぞ！ぺローンって！！

 

最終更新日表示のCSSコード

/*更新日表示*/
.lastmod {
color: #999;
background-color: #000;
padding: 5px 6px;
text-decoration: none;
font-size: 100%;
display: inline;
margin-left: 10px;
}
.lastmod::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
content: '\f021';
}
.entry-date a {
padding: 5px 6px !important;
}
.entry-date a::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
content: '\f017';
}

次に上記のCSSコードを使用します。 以下の値を弄れば大きさやアイコンを変えることが出来ます。

2行目で文字色を指定して、3行目で背景色を指定しています。

以下のカラーコードを参考にして好きな色に適宜変更してください。

www.colordic.org

 

4行目の左側の値が①上下の余白、右側の値が②左右の余白。

6行目が③文字の大きさ。

14行目が④最終更新日のアイコン、23行目が投稿日のアイコン。
アイコンは、以下のサイトから適宜変更してください。

fontawesome.com

 

めっちゃムズイけどちゃんと理解するんだぞ☆

 

上記のようにアイコンが表示されない場合は、以下のコードを「設定」⇒「詳細設定」⇒「headに要素を追加」に追加してください。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

 

「デザインCSS」にCSSコードの貼り付け

はてなブログの管理画面にアクセスして、「デザイン」⇒「①スパナマーク」⇒「②デザインCSS」に上記のコードを貼り付けます。

「③変更を保存」をクリックして設定を保存します。

 

上記のように最終更新日が表示されたら完了です。

 

 スマホ版での設定（PROのみ）

次にスマホ版はてなブログで最終更新日を自動表示させる方法紹介します。

 

JavaScriptコード

<!--日付更新-->
<!--[if lt IE 9]>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<!--<![endif]-->
<script>
/*
 * Show lastmod for Hatena Blog v1.0.0
 * Date: 2016-12-20
 * Copyright (c) 2016 https://www.tsubasa-note.blog/
 * Released under the MIT license:
 * http://opensource.org/licenses/mit-license.php
 */
;(function($) {
'use strict';
var urls = [], opts = {cache: false, dataType: 'xml'}, 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()),
url = ''; // ここにサイトマップへのURLを入力してください。
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>

スマホ本も同様に上記のコードに36行目の「url = '';」に自分のサイトのサイトマップを記述します。

ちなみに上記のコードはPCと同じものを使用してます。

 

 はてなブログの管理画面にアクセスして「デザイン」⇒「①スマホマーク」⇒「②記事」⇒「③記事下」に上記のJavaScriptコード貼を貼り付けます。

「④変更を保存」をクリックして設定を保存します。

 

スマホ版CSSコード

<style type="text/css">
/*日付更新*/
span.date::before {
margin-right: 5px;
font-family: FontAwesome;
content: '\f017';/*投稿日のアイコン*/
}
.lastmod {
font-size: 90%;/*文字サイズ*/
padding: 0px 10px;
margin-left: 15px;
display: inline;
font-weight: 700;
color:#18B2E0; /* 文字色 */
}
.lastmod::before {
margin-right: 6px;
font-family: FontAwesome;
content: '\f021';/*最終更新日のアイコン*/
}
</style>

次に上記の「<style type="text/css">～</style>」で囲ったCSSコードを使用します。

コードの内訳は以下のようになってるのでアイコンや文字色を設定を適宜設定してください。

• 6行目が投稿日のアイコン
• 9行目が文字サイズ
• 14行目が文字色
• 19行目が最終更新日のアイコン

 

はてなブログの管理画面にアクセスして「デザイン」⇒「①スマホマーク」⇒「②タイトル下」に上記のCSSコードを貼り付けます。

 

上記のように投稿日表示エリアの下に最終更新日が表示されたら完了です。

 

はてなブログのフッターに『コピーライト』や『お問い合せリンク』を導入する方法を紹介しますの！

 

まとめ

終更新日を表示させることで、「この記事の情報が新しいのか古いのか」を判断される要因になるで導入することをおすすめします。

 

このブログでもサブブログでも最終更新日表示させるのとっくに導入してるのに記事にするの遅くない？

 

だってブログカスタマイズ記事って書くの面倒なんだもん！！

 

自慢気に言うなよ！バカタレ！！

 

 

最後まで読んでいただきありがとうございました♡