通常、記事を書くとその記事を初めて作った日、つまり「記事の作成日」が表示されますよね。
しかし、私のように一度書いた記事をよく「書き直す」人もいるかと思います。
そこで、「記事の作成日」と同時に「記事が更新された日時」も一緒に表示する方法を紹介します。
更新日時を表示するメリットとしては、記事を書く側も見る側も「この記事の情報がいつのものか」が分かりやすくなる事が挙げられます。
情報が古いままなのか、随時更新されていっているのかが分かりやすくなると、特に見る側にメリットがあるのではないかと思います。
記事の更新日時を表示する設定
「ダッシュボード」→「設定」→「詳細設定」→「headに要素を追加」の欄に下記のコードを追記します。
既に同じファイルを読み込むコードが追記されている場合は、この作業は不要です。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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