【はてなブログ】記事の更新日時を表示させる方法！

通常、記事を書くとその記事を初めて作った日、つまり「記事の作成日」が表示されますよね。

しかし、私のように一度書いた記事をよく「書き直す」人もいるかと思います。

そこで、「記事の作成日」と同時に「記事が更新された日時」も一緒に表示する方法を紹介します。

更新日時を表示するメリットとしては、記事を書く側も見る側も「この記事の情報がいつのものか」が分かりやすくなる事が挙げられます。

情報が古いままなのか、随時更新されていっているのかが分かりやすくなると、特に見る側にメリットがあるのではないかと思います。

記事の更新日時を表示する設定

jQueryとFont Awesomeの読み込み設定

「ダッシュボード」→「設定」→「詳細設定」→「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">

HTMLの設定

下記のサイト様の「サイトマップ利用バージョン」に掲載されているコードを「ダッシュボード」→「デザイン」→「カスタマイズ」→「記事」→「記事下」の欄に貼り付けます。

www.tsubasa-note.blog

デザインCSSの設定

下記のサイト様に掲載されているCSSコードを「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」の欄にコピペします。

utautan.hatenablog.com

上記のCSSをコピペしてみたけど、更新日時の左側にあるべきアイコンが□で表示されてしまうという方は、下記のコードを代わりにコピペしてみて下さい。

こちらのコードは、上記で紹介されているCSSをFont Awesomeの最新バージョンに対応するように書き変えたものになります。

/*↓----更新日時表示----↓*/
.lastmod {
	background-color: transparent;
	padding: 5px 0px;
	text-decoration: none;
	font-size: 15px;
	display: inline;
	margin-left: 0px;
	font-family: 'Montserrat', sans-serif;
	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";
	content: '\f073';
}
/*↑----更新日時表示----↑*/

参考サイト様

今回、参考にさせて頂いたサイト様はこちらです。感謝！

＜jQueryコード＞