最終更新日の追加 - 徒然　夕焼け：跡地

前回も少し触れたけど、私は誤字が多い。文章修正も多い。攻略っぽいメモ書いてると当然内容も変化していくから追記や修正も少なくない。ネット見てると、更新日が投稿日の横に入ってる記事が・・最近多い気がする（寧ろデフォルト）。ただし、何を更新したの？って思うくらい古い情報のまま（そこ直さないか、っていう）の記事も多いけど、そこはおいといて。

それ（最終更新日）って自動で入らないのかなぁ・・・ということで、やり方を探してみた。

うまくいかなかった方法
- 備忘録メモ
最終更新日が表示できた方法
微調整はこれから・・・

うまくいかなかった方法

2018年～2019年くらいにその手の記事が多く、

　jQuery を使って、
　sitemap.xml※ から "dateModified" を読み込んで表示
　アイコンは Awesome ※※ を利用

この３セットが主流のようだ。

※サイトマップ（sitemap.xml）は、はてなブログの場合、自動作成されているらしい。自分のアドレスは、https://nonbiritime.hateblo.jp/sitemap.xml

※※アイコンは、日付の前の、スパナマークとか時計マークとかクルッと回った矢印マーク、よく見かけるヤツ

jQuery はアコーディオンの開閉で使っているのでどこかに追記済みの筈・・・サイトマップは（はてなブログの場合）勝手に自動作成されているようなのでOK、Awesome だけはこのブログだとイマイチ反映出来ないので（既に試行錯誤して諦めた）やや不安だが、はてなの既定アイコン使う場合もあるようなのでそれでいいか。

で、親切サイトが沢山あるので、その通りにコピペしていったんだが、、この方法では（jQuery を使って sitemap.xml から読み込む）出来ませんでした；

なぜでしょうね・・・（遠い目）

備忘録メモ

お試しにあたり加えた修正のうち、下記の部分はそのままでいいかな、と思ったのでそまま。jquery が動いているなら最新 Ver. っぽいのがいいかな、と

★デザイン → カスタマイズ → ヘッダ要素のところ、

この一文（jquery の読み込み文）を削除して

　↓

これに書き換えました。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

※jQuery の記述は、設定 → 詳細設定 → <head>要素にメタデータを追加と書いてあるサイトがある。けど、そこではなく、デザインカスタマイズのヘッダ要素の方が良さそう、と書かれたサイトのが新しかったのでそっちにしました。別情報がない限りは今後もそうします。

最終更新日が表示できた方法

浸透しているらしい一般的なやり方ではうまく行かず、シンプルに、「ページ内の JSONから最終更新日「dateModified」を取得して表示するコード」をコピペで貼ったらできました ♡ jQuery も sitemap.xml も不要

既に CSS とかカスタマイズをいろいろ入れてるので、動かないのはそのせいかな、とか、ベースのデザインテーマから変更してイチから調整も考えたけど、取り敢えずできて良かった。

★こちらのサイト様

【はてなブログ】最終更新日を追加する方法（短くて簡単！コピペでOK）CSSとJavascript利用 - バンビの初心者ブログ教室

ありがたや～ (｡-人-｡) 大規模工事が必要かと思ったもん、助かった

ソースも貼らせて頂きます m(_ _)m

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>

CSS の解説も引用。

<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>