みやもとブログ

好きなものの感想などを書いています。読書、ラジオ、資格、Notionなど。

【はてなブログ-カスタマイズ】更新日を追加表示する(JavaScript・CSS対応)

この記事をシェアする

数日前から適用しているのですが、記事ページに「更新日」を追加表示しています。
これはJavaScriptCSSを追加適用することで実現しています。

たまに自分のブログの過去記事を見返すのですが、少し古くなった内容や、表現がイマイチだったものを見直して更新しています。
ですが、更新日を表示していなかったので記事ページからは更新した旨が分からない状態でした。

別に更新日が表示されなくても特に問題はないのですが、更新日を表示しているサイトにはちょくちょく遭遇していました。
なので、自分のブログでも更新日を表示したいなと思い、対応してみました。

ということで、変更内容や適用手順について書いていきます。

変更内容(画像)

まずは変更前後の画像を貼ります。

変更前

変更前

変更後

変更後

こんな感じです。

変更前は作成日のみだったのですが、変更後は作成日と更新日の両方が表示されます。
変更後の画像は、作成日が「2023-04-20」、更新日が「2023-05-24」となります。

元のデザインがアイコンだったので、それに倣って「更新日」もアイコンで表示することにしました。
「作成日」「更新日」という文言で表示することも考えたのですが、とりあえずアイコンで様子見します。

あと、変更前の「作成日」は少し傾いた状態での表示でした。
それを今回の対応で、傾けて表示しないように変更しました。
これは「更新日」を追加表示することにより、傾きがない方がバランスが良いなと思ったためです。

参考サイト

以下のサイトを参考にさせて頂きました。ありがとうございます。
shiroyuki2020.hatenablog.com
www.fuji-blo.com

適用したコード

JavaScriptCSSを適用しています。

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;
}
/***記事ヘッダーの作成日・更新日ここまで***/

上記のJavaScriptCSSを適用すると「更新日」が追加表示されます。

JavaScriptは参考サイトのコードをそのままコピペでいけました。

CSSは自分のブログに合うように変更しました。

挙動に関して

「更新日」は必ず表示されるわけではなく、

  • 作成日と更新日が同じ場合:更新日を表示しない
  • 作成日と更新日が違う場合:更新日を表示する

という挙動になります。

また、「更新日」が表示されるのは記事ページのみです。
トップページでは表示されません。

デザインの適用手順

一応、適用手順を載せておきます。

①ヘッダーの右上あたりにあるところをクリックして「デザイン」をクリック

②「カスタマイズ」→「記事」をクリック

③「記事下HTML」の記述領域をクリック

④上述のJavaScriptをコピペする(既存のコードは消さずに)

⑤続いて「カスタマイズ」→「デザインCSS」→「CSS記述領域」をクリック

⑥上述のCSSをコピペする(既存のCSSは消さずに)

⑦「変更を保存する」をクリック

⑧デザインが変更されているか確認する(挙動も確認する)
デザインが変更されなかったり、想定の挙動になっていない方は
手順が間違っているか、今使っているデザインテーマと相性が悪いか、他にもCSSやJSを埋め込んでいてその影響か、、などなど原因は色々考えられます。

注意事項

はてなブログで適用したものです。
はてなブログ以外では試してないので、うまく動かない可能性があります。

今使っているSilenceというデザインテーマに追加でJavaScriptCSS適用した形となります。

他のデザインテーマを使っている方や、他にもCSSやJSを埋め込んでいる人はうまく動かない可能性がありますので、もし今回記載のJavaScriptCSSを適用しようとしている方はその辺りご了承ください。

おわりに

ということで、「更新日の追加表示」に関してアレコレ書いてみました。

更新日の追加表示はちょっと難しいかなと思っていたのですが、すんなり対応できました。
参考サイトのおかげです。ありがたい。

CSSはほぼ自力でしたが、デザインテーマに馴染む感じに対応できたかなと思っています。

またなにかブログカスタマイズしたら記事にします。

(追記)
はてなブログ公式が「最終更新日の表示」に対応したようで、そちらに乗り換えました。
以下記事で詳しく書いているので、こちらも良ければぜひ。
miya-moto-blog.hatenablog.com

ブログカスタマイズはいくつか記事にしています。
気になる記事があればぜひ。
miya-moto-blog.hatenablog.commiya-moto-blog.hatenablog.commiya-moto-blog.hatenablog.com

TOP HOME