↓↓ はてなブログに標準の機能としてこちらが搭載されました！
（2023-08-01より）
はてなブログに最終更新日を追加する機能がないので、以前からjQueryやJavaScriptを使ったやり方をいろ〜んな方が色々と説明してくださっています。
↓↓これね。
様々なコードがあり、私のブログではこれまでは、
→はてなブログの記事の最終更新日を取得 - はしくれエンジニアもどきのメモ
こちらの方のコードをアレンジしたものを利用していました。
sitemap.xml から最終更新日を取得してくるというコード。
（↑↓この辺、わからない人は読み飛ばしてOK）
ところが、最近自分の「はてなブログ」のソースを見ていて気づいたのですが、AMP対応していなくても
<head>にきちんと
↓↓こんな感じで"dateModified"が表示されていたのです。
<script type="application/ld+json">
{"@context":"http://schema.org",
"@type":"Article",
"dateModified":"2021-11-13T07:32:53+09:00",
"datePublished":"2021-11-13T07:26:22+09:00",
"headline":"javascript-test creatElement",
"image":["https://cdn.blog.st-hatena.com/images/theme/og-image-1500.png"]}
</script>
ということは、いちいちsitemap.xml から引っ張って来なくて良いんじゃない？
sitemap.xml から何回も行ったり来たりして100記事ごとにデータ取るとかいつの時代の出来事？
というわけで、ページに記載されているJSONから最終更新日「dateModified」を取得して、SEO対策的なコードを加えつつ、新しいコードを作ってみたら、ちょー短くて良い感じになりました♡
（SEO効果があるかは、使い始めたばかりなのでまだ分かりません）
最終更新日を追加するコードはこちら↓
CSSも一緒に載せているので、まるっとコピーして
ダッシュボード＞デザイン＞カスタマイズ（スパナマーク）＞記事＞記事下
にボーンと入れればOKです！
CSSは、解説を見て使っているテーマに合わせて変更してみてくださいね(^-^)
（下記のCSSは私のテーマ「Palette」に合わせてあります）
<!-- 最終更新日 -->
<style>
.lastmod{
margin-left: 1em;
padding: 0.2em 1em;
background-color: #f5f5f5;
border-radius: 0.5em;
color: #000;
}
.lastmod:before{
font-family:"blogicon";
content: "\f02b";
position: relative;
letter-spacing: 0.5em;
font-size: 1em;
color: #000;
}
.date a:before{
font-family:"blogicon";
content: "\f024";
position: relative;
letter-spacing: 0.5em;
font-size: 1em;
color: #000;
}
</style>
<script type="text/javascript">
var jsonld = JSON.parse(document.querySelector('script[type="application/ld+json"]').innerHTML);
var dateModified = jsonld.dateModified;
var date = document.querySelector('div.date');
var time = document.createElement('time');
var lastmod = dateModified.substr(0, 10);
time.innerText = lastmod
time.setAttribute("datetime", lastmod );
time.setAttribute("dateModified", "最終更新日：" + lastmod);
time.className = 'lastmod';
date.appendChild(time);
</script>
コードに関してのお願い
＊コードは、試行錯誤しながら時間をかけて考えたものです！
＊コピペしてご自身のブログで使っていただいて良いですが、コード自体をブログで紹介するときは引用や、改変時には参照を必ず載せてくださいね。
＊何も無いまま、自分で考えたコードかのように掲載されているのを見ると悲しくなります(T-T)
簡単にコード解説
CSS
アイコンははてなブログに標準搭載のアイコンを使っているので、FontAwsomeなどを呼び出す必要はありません♪
これ以外のアイコンにしたい時は、
はてなブログのアイコンフォント(124種類）の一覧＆使い方 を参考にアイコンの番号を変えてみてください♪
<!-- 最終更新日 -->
<style>
.lastmod{
margin-left: 1em;/*位置調整 - 左からの距離*/
padding: 0.2em 1em;/*位置調整 - 周りの余白*/
background-color: #f5f5f5; /*背景色 -不必要ならこの行消す*/
border-radius: 0.5em; /*背景の角丸 -不必要ならこの行消す*/
color: #000; /*日付の色*/
}
.lastmod:before{
font-family:"blogicon";
content: "\f02b";/*更新日のアイコン*/
position: relative;
letter-spacing: 0.5em;/*アイコンと日付の隙間*/
font-size: 1em;/*アイコンのサイズ*/
color: #000; /*アイコンの色*/
}
.date a:before{
font-family:"blogicon";
content: "\f024";/*作成日のアイコン*/
position: relative;
letter-spacing: 0.5em;/*アイコンと日付の隙間*/
font-size: 1em;/*アイコンのサイズ*/
color: #000; /*アイコンの色*/
}
</style>
アイコンを使わない場合はこちらで↓↓
<!-- 最終更新日 -->
<style>
.lastmod{
margin-left: 1em;
padding: 0.2em 1em;
}
.lastmod:before{
content: "更新日：";
position: relative;
font-size: 1em;
color: #000;
}
.date a:before{
content: "作成日：";
position: relative;
font-size: 1em;
color: #000;
}
</style>
JavaScript
マニアックなので興味のない人は飛ばしてください(*^-^*)
◆JSONから最終更新日(dateModified)の値を取り出す
（参考にしたページ：Stack Overflow）
↓
JSON.parse(document.querySelector('script[type="application/ld+json"]').innerHTML);
var dateModified = jsonld.dateModified;
◆SEO的に一応dateModifiedと最終更新日を属性に加えてみた。効果があるかはわかりません。
（参考にしたページ：Google Developers ）
↓
time.setAttribute("datetime", lastmod );
time.setAttribute("dateModified", "最終更新日：" + lastmod);
このブログについて
著者：元CAバンビ
もともとは国際線のCAをしていました。趣味で「旅行ブログ」を書いているうちにブログ運営そのものに興味を持ち、HTMLやCSS、Javascripなどの言語やSEOについて独学で勉強し、はてなブログのテーマ「Palette（パレット）」を公開しました。
現在では、はてなブログやWordPressなどで5つのブログを運営しています。
当ブログでは、自身の経験からブログ運営やカスタマイズ方法などを紹介しています。
詳しくはサイトマップをご覧ください♪
はてなブログの方は読者登録よろしくお願いします。
↓↓
自分自身の経験からはてなブログを収益化して、ブログで戦略的に稼ぐ方法も解説しています。
◆アフィリエイトやSEO対策については、こちらもご覧ください♪
はてなブログ【アフィリエイト】で素人が月間10万円の収益を得た5つの方法
ブロガー必見！アドセンスよりアフィリエイトASPに登録すべき３つの理由
戦略的アフィリエイトのすすめ！雑記ブログを収益化して月々5万円稼ぐ方法
