記事に更新日を表示する方法です。読者の方にいつ更新したのか分かるようにするため、更新日を表示するようにしました。今までは、記事を更新しても分からない状態でした。
参考サイトで紹介しているコードを使わせて頂きました。CSSは当ブログに合うように変更しました。コードと表示のbefore、after画像を掲載します。
方針
更新日を表示する記事は沢山あります。jQuery、sitemap.xml、FontAwesomeを使っている記事を見かけます。当ブログでは、外部ファイルを使わずに実現したかったので、参考サイトの方法を取り入れました。
上記の3つを使わない代わりに、以下で対応します。
- JavaScriptで記述
- JSON-LD*1の利用
アイコンは必要ないと判断したので、使いません。
JavaScriptの追加
JavaScriptの追加場所は、以下です。
管理画面 > デザイン > 工具マーク > ヘッダ
管理画面 > デザイン > 工具マーク > 記事
トップページとアバウトページで以下のようなエラーが出ていたので、コードをヘッダから記事に移動しました。
Uncaught TypeError: Cannot read properties of undefined (reading 'innerText') at HTMLDocument.<anonymous>
追加したコードは以下です。
<script> /* 記事ヘッダーの作成日・更新日 */ document.addEventListener('DOMContentLoaded', function () { // 各要素を取得 const jsonld = JSON.parse(document.querySelectorAll('head script[type="application/ld+json"]')[0].innerText); // JSON-LD const datePublished = jsonld.datePublished; // 作成日文字列 const dateModified = jsonld.dateModified; // 更新日文字列 const entryDate = document.querySelector('header.entry-header .entry-date'); // 日付表示領域 // 取得できなかったら処理終了 if (!jsonld) return; if (!datePublished) return; if (!dateModified) return; if (!entryDate) return; // 「更新日要素」を作成 const modifiedElm = document.createElement('span'); modifiedElm.innerText = dateModified.substr(0, 10); modifiedElm.className = 'modified-date'; // 日付が違った場合は「更新日要素」を追加 if (datePublished.substr(0, 10) !== dateModified.substr(0, 10)) { entryDate.appendChild(modifiedElm); } }); </script>
CSSの追加
CSSの追加場所は、以下です。
管理画面 > デザイン > 工具マーク > {}デザインCSS
ここでは、投稿日と更新日のテキストを追加して、微調整しています。
/* 記事ヘッダーの作成日・更新日 */ .entry-header .entry-date a time { font-size: 0; /* スペースもろとも配下の文字を消してしまう */ } .entry-header .entry-date a time > span { font-size: .9rem; /* 表示したいのでサイズを上書き */ } .entry-header .entry-date a time::before { content: "投稿日"; font-size: .9rem; margin-right: 3px; } .entry-header .entry-date .modified-date { font-size: .9rem; margin-left: 16px; } .entry-header .entry-date .modified-date::before { content: "更新日"; font-size: .9rem; margin-right: 3px; } .entry-header .modified-date{ color: #6f8383; }
CSSは、ご自身のブログに合うように変更してください。
before、after画像
beforeでは、投稿日のみが表示されます。afterでは、投稿日と更新日が表示されます。