今日は記事の更新日時を表示する方法について記載していきます！
そこら辺のブログで、更新日時を記載していないブログはないくらい大事な情報なんですよね。
このブログを見て、ご自身のブログにも更新日時を入れてもらえるといいと思います。
それでは記事をご覧ください～！
完成イメージ
こんな感じになります～。色は各々設定できます。
タイトル下にコピペ①
デザイン→スパナマーク→ヘッダ→タイトル下に以下のコードをコピペします。
（※はてなブログ設定→詳細設定→<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">
もうすでに「jQuery」や「Font Awesome」が入っている場合はとくにコピペする必要はありません。
次に進んでくださいね(*^^)v
タイトル下に入れる②
上記①同様、デザイン→スパナマーク→ヘッダ→タイトル下に以下のコードをコピペします。
<!--[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 = 'https://www.blog-custom.net/sitemap.xml';
// ↑に自分のサイトマップへのURLを入力。'https://www.blog-custom.net/'を自分のサイトのURLにかえればOK。CSSに貼るときこの文章は消してくださいね。
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>
CSS
デザイン→デザインCSSにコピペでいけます。
/*----更新日表示----*/
.lastmod {
background-color: transparent;
padding: 5px 0px;
font-size: 15px;/*更新日の大きさ*/
display: inline;
margin-left: 1em;
color: #333;/*更新日の色*/
}
.lastmod::before {
margin-right: 5px;
font-family: "Font Awesome 5 Free";
content: '\f01e';/*更新日付のアイコンの種類*/
color: orange;/*同アイコンの色*/
font-weight: bold;
}
.date {
background-color: transparent;
padding: 5px 0px;
font-size: 15px;/*作成日の大きさ。色は指定していない*/
display: inline;
}
.date::before {
font-family: "Font Awesome 5 Free";
content: '\f073';/*作成日のアイコンの種類*/
font-weight: bold;
}
/*----更新日表示----*/
その他細かい文字色だとか、文字の大きさ、余白、左からの距離だとかを設定しない部分もあるので、自分の好きなようにカスタマイズしてみてくださいね！
目立つように更新日の背景塗りつぶしもオススメですよ(*^^)v
まとめ
やはり更新日付があるのとないのでは全然違いますね～。
いつ更新したか読者さんが分かるということは、読者さん自身が情報の新旧を判断できるというメリットがあります！
是非皆さんも、自分の記事に記載してみてくださいね！
参考HP
こういうのを考えられるサイトさんは天才です。
まぁ自分のサイトに適応させるには結局微修正が必要なわけで、ある程度の理解も必要不可欠なんですけどね(´･ω･｀)ﾄﾎﾎ…
・【はてなブログ】記事の更新日付を自動表示させる方法を解説 - 日々シングルの奮闘日記
・はてなブログをカスタムする際に役立つ記事のまとめ - 推し三昧
・【はてなブログ】記事の更新日時を表示させる方法！ - 黒木ノ水岩
ありがとうございました！
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ブログ村に参加しています！ポチっとお願いします(*'▽')
