黒木ノ水岩

黒木ノ水岩

ゲームを中心に様々なものを趣味の赴くままに紹介していきます。尚、当ブログの利用や掲載内容等により生じた損害等の責任は一切負いかねますので、ご了承下さい。

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

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

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

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

 

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

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

 

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

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コード>

www.tsubasa-note.blog

CSS

utautan.hatenablog.com