数日前から適用しているのですが、記事ページに「更新日」を追加表示しています。
これはJavaScriptとCSSを追加適用することで実現しています。
たまに自分のブログの過去記事を見返すのですが、少し古くなった内容や、表現がイマイチだったものを見直して更新しています。
ですが、更新日を表示していなかったので記事ページからは更新した旨が分からない状態でした。
別に更新日が表示されなくても特に問題はないのですが、更新日を表示しているサイトにはちょくちょく遭遇していました。
なので、自分のブログでも更新日を表示したいなと思い、対応してみました。
ということで、変更内容や適用手順について書いていきます。
変更内容(画像)
まずは変更前後の画像を貼ります。
変更前
変更後
こんな感じです。
変更前は作成日のみだったのですが、変更後は作成日と更新日の両方が表示されます。
変更後の画像は、作成日が「2023-04-20」、更新日が「2023-05-24」となります。
元のデザインがアイコンだったので、それに倣って「更新日」もアイコンで表示することにしました。
「作成日」「更新日」という文言で表示することも考えたのですが、とりあえずアイコンで様子見します。
あと、変更前の「作成日」は少し傾いた状態での表示でした。
それを今回の対応で、傾けて表示しないように変更しました。
これは「更新日」を追加表示することにより、傾きがない方がバランスが良いなと思ったためです。
参考サイト
以下のサイトを参考にさせて頂きました。ありがとうございます。
shiroyuki2020.hatenablog.com
www.fuji-blo.com
適用したコード
JavaScriptとCSSを適用しています。
JavaScript
<!-- 記事ヘッダーの作成日・更新日 --> <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
/***記事ヘッダーの作成日・更新日***/ /*作成日のデザイン調整*/ .entry-header .date a { transform: none; } .entry-header .date a:before { vertical-align: middle; } /*更新日のデザイン*/ .entry-header .date span.modified-date { display: inline-block; background-color: #111; padding: 0 6px 1px; margin-left: 10px; color: #fff; } .entry-header .date span.modified-date:before { font-family: "blogicon"; content: "\f02b "; vertical-align: middle; } /***記事ヘッダーの作成日・更新日ここまで***/
上記のJavaScript・CSSを適用すると「更新日」が追加表示されます。
JavaScriptは参考サイトのコードをそのままコピペでいけました。
CSSは自分のブログに合うように変更しました。
挙動に関して
「更新日」は必ず表示されるわけではなく、
- 作成日と更新日が同じ場合:更新日を表示しない
- 作成日と更新日が違う場合:更新日を表示する
という挙動になります。
また、「更新日」が表示されるのは記事ページのみです。
トップページでは表示されません。
デザインの適用手順
一応、適用手順を載せておきます。
①ヘッダーの右上あたりにあるところをクリックして「デザイン」をクリック
②「カスタマイズ」→「記事」をクリック
③「記事下HTML」の記述領域をクリック
④上述のJavaScriptをコピペする(既存のコードは消さずに)
⑤続いて「カスタマイズ」→「デザインCSS」→「CSS記述領域」をクリック
⑦「変更を保存する」をクリック
⑧デザインが変更されているか確認する(挙動も確認する)
デザインが変更されなかったり、想定の挙動になっていない方は
手順が間違っているか、今使っているデザインテーマと相性が悪いか、他にもCSSやJSを埋め込んでいてその影響か、、などなど原因は色々考えられます。
注意事項
はてなブログで適用したものです。
はてなブログ以外では試してないので、うまく動かない可能性があります。
今使っているSilenceというデザインテーマに追加でJavaScript・CSS適用した形となります。
他のデザインテーマを使っている方や、他にもCSSやJSを埋め込んでいる人はうまく動かない可能性がありますので、もし今回記載のJavaScript・CSSを適用しようとしている方はその辺りご了承ください。
おわりに
ということで、「更新日の追加表示」に関してアレコレ書いてみました。
更新日の追加表示はちょっと難しいかなと思っていたのですが、すんなり対応できました。
参考サイトのおかげです。ありがたい。
CSSはほぼ自力でしたが、デザインテーマに馴染む感じに対応できたかなと思っています。
またなにかブログカスタマイズしたら記事にします。
(追記)
はてなブログ公式が「最終更新日の表示」に対応したようで、そちらに乗り換えました。
以下記事で詳しく書いているので、こちらも良ければぜひ。
miya-moto-blog.hatenablog.com
ブログカスタマイズはいくつか記事にしています。
気になる記事があればぜひ。
miya-moto-blog.hatenablog.commiya-moto-blog.hatenablog.commiya-moto-blog.hatenablog.com