こんにちは🌱シンプルライフナビです。
さて、わたしは今月、過去に書いた記事の一部見直しをしています。記事のリライト（書き換え）です。
記事のリライトをしていると、どの記事をいつ書き換えたかが簡単にわかるといいな、と思いますよね。
そこで、記事を書き換えた日をわかるようにしました😊
この記事では、これから記事のリライトをしようと思っている人の参考となる、ブログに更新日付の情報を表示する方法についてご紹介します。
- ブログ記事のリライト（更新）をする方
- ブログ記事の情報をアップデートし、記事の内容の最新性や正確性をアピールしたい方
- ブログデザインをカスタマイズしたい方
《ご留意事項》
2023年8月に、はてなブログの新機能として「最終更新日」表示機能がリリースされました。新機能のリリースにより、より簡便に最終更新日の表示設定ができるようになっています。
はてなブログ公式対応の新機能については、下記の記事を参考にしてください。
- どの記事をリライト（更新）したかをわかりやすくしたい
- わたし流カスタマイズ！最新の更新日付を表示させる方法（CSSとHTMLコード付き）
- 更新日を表示させることで気をつけること
- 更新日付の自動表示のまとめ
どの記事をリライト（更新）したかをわかりやすくしたい
記事をリライト（書き換え）してみたけれど…日付表示が気になる
記事を書き換えてはみたものの、 記事の作成日（投稿日）は書き変わりません。日付が古いままなのでちょっと気になります🤔
（タイトル表示例）
せっかく記事の内容を見直しして更新したので、いつ情報更新したのかがわかるようにしたいですよね。
作成日（投稿日）が古いままだと、せっかく新しい情報を追加したとしても、ぱっとみたときにそれがわかりません。
記事の更新日情報が表示されると、内容が最新のものにアップデートされているとか、記事をわかりやすくするように手直ししたんだなとかわかるので、記事の信頼性が上がりそうですよね😃
（タイトル表示に更新日情報を追加）
更新日（書き換えた日）を表示させる方法をリサーチ
そこで、書き換えたブログ記事の更新日を簡単に表示させる方法がないかリサーチ（調査）しました。
すると、すでに他の方がブログの更新日を自動表示する方法を公開されていたので、こちらの記事を参考にして、わたしのブログに合うよう、研究、調整しました。
tomomoreさん、記事をありがとうございます。
作業の前にデザインCSSをバックアップ
これからご紹介する方法は、CSSに情報を書き込む作業があります。そのため、CSS情報を誤って消してしまったりした場合に備え、また元に戻したくなった時の対策として、必ずバックアップを取っておきましょう😉
バックアップの取り方は、デザインCSSのバックアップの取り方の記事を参考にしてください。
わたし流カスタマイズ！最新の更新日付を表示させる方法（CSSとHTMLコード付き）
この記事でご紹介する方法は、自動表示の方法を紹介されている記事を参考にしながら、わたし流にデザインや見た目をアレンジしています。
更新日の情報はサイトマップの情報を利用
この記事で紹介する更新日を表示させる仕組みは、あなたのブログのサイトマップの情報（sitemap.xml）を利用し、記事の更新日情報を取得します。
従って、サイトマップが作成されていないブログの場合は利用できません（表示されません）。*1
わたしの場合は、グーグルサーチコンソールにサイトマップ情報を登録しており、グーグルサーチコンソールでは/sitemap_index.xmlのステータスは「成功しました」と表示されていますが、/sitemap.xmlのステータスは「取得できませんでした」のままです。
ですが、この記事の方法で更新日情報は正確に取得できているので、同じような状況の方でも利用できるのではないかと思います。（動作を保証するものではありませんのでその点ご了承ください）
外部読み込みを減らす（表示速度対策）
記事の更新日を自動表示させるには、jQueryという外部のプログラムを参照して表示させます。このとき、外部のサイトから情報を取ってくるため、あなたのブログの表示スピードが若干低下してしまう懸念があります。
外部ページの参照が多くなるほどスピードの低下が起きやすいので、必要最低限のもの以外は外部ページを参照しないようにしました。
具体的には参考にした記事では外部フォントの読み込みを行なっていますが、わたしの場合ははてなブログ標準のアイコンフォントを利用することでスピードアップを図っています。
好きなように表示させるデザインカスタマイズ
また、フォントの大きさや、表示色を変えたり、日付の前のアイコンの表示、変更に加えて日付の後の文字表示もできるようにわたし流にアレンジしています。
適宜ご自身のブログデザインに合わせてカスタマイズしてみてください😄
組み込むコード（CSSとHTML）のご紹介
それではいよいよ組み込むコードをご紹介します。
はてなブログユーザの方はコピペすれば使えると思いますが、ご利用のデザインテーマ によっては使えない可能性もありますのでご了承ください。
CSSコードと、HTMLコードの両方を書き込む必要があります。
（ご利用のテーマや利用されているPC、スマホ等の機材、OSのバージョン等により動作しないこともあります。その場合はあらかじめ作成していただいたバックアップデータを使って元に戻してください）
CSSコードの内容
CSSコードの内容は下記の通りです。
コピペする場合はグレー背景の部分を選択してコピーしてください。
/* jQuery利用更新日表示 */
.lastmod {
margin-left: 0px;
padding: 5px ;
display: inline;
text-decoration: none;
font-size: 90%;
color: gray;
background-color: transparent;
}
.lastmod::before {
margin-right: 5px;
margin-left: 15px;
padding-left: 3px;
font-size: 90%;
content: "\f02b";
font-family: blogicon;
vertical-align: top;
}
.lastmod::after {
margin-right: 5px;
margin-left: 3px;
padding-left: 3px;
font-size: 85%;
content: "更新";
}
.entry-date a {
background-color: transparent;
padding: 5px ;
display: inline;
text-decoration: none;
}
.entry-date a::before {
margin-right: 5px;
padding-left: 3px;
content: "投稿日";
}
最初に一度、上記をCSSをコピペして、さらにこのあと説明するHTML部分もコピペし、更新日が表示されるかお試しください。
今はとりあえずコピペ対応で独自カスタマイズは必要ない、という方は、次の見出しの「CSSコードを貼り付ける場所」へ進んで、更新日が表示されることをまず確認してください。
更新日の表示形式などを独自にカスタマイズする場合は下記を参考にして調整してください。
文字の大きさや色などは適宜変えることができます。主なカスタマイズ項目は次の通りです。なお、利用されているデザインテーマで強制適用される表示形式がある場合、下記記載の内容の指定ができないこともあります。ご了承ください。
オレンジ色の部分：更新日の文字の大きさを指定できます。
緑色の部分：更新日の文字の色を指定できます。色指定が不要なら削除してください。
水色の部分：背景色を指定できます。例えば色指定部分が transparent の場合は背景無色、yellow とした場合は黄色になります。背景色指定が不要なら上記コードの水色部分を削除してください。（ブログのデザインテーマにブルックリン(Brooklyn)を利用されている場合など、利用されているデザインの初期設定で作成日表示に背景色がついている場合は、コードの水色部分を削除した方がページ全体の統一感が保てると思います）
紫色の部分：更新日の前後の文字を指定できます（更新日（lastmod）の前にはてなブログのアイコンフォントを利用していますが、任意の文字にも変更できます。更新日の後ろに表示する文字も変更可能です。なお、記事投稿（作成）日（entry-date）の前後にも文字やアイコンを追加することができます）。文字表示が不要な部分は削除してください。
marginやpaddingの値も文字間隔の調整を細かくしたい方は必要に応じて調整できます。
なお、カスタマイズする際に、; . { } などの必要な情報を削除してしまうと正しく動きませんので、コードを削除する場合は行単位で行うなど注意してください。
こちらの記事の内容を参考にして変更してください。
例えば、上記の content: "投稿日"; をアイコン表示に変えたい場合は、
content: "\f043";
font-family: blogicon;
などに変えてください。
CSSコードを貼り付ける場所
ダッシュボードから、デザインを選択してください。
デザイン＞カスタマイズ＞デザインCSSの順にクリック・選択してください。
デザインCSSをクリックし、詳細画面が表示されたら、コードの最後にコピペしたCSSコードを追加してください。
この際、既存のCSSコードは絶対に消去しないでください。
CSSコードの情報を追記後、「変更を保存する」ボタンをクリックして情報を保存してください。
HTMLコードの内容
続いてHTMLコードです。こちらも指定の場所に貼り付けるだけです。
ただし、赤字の部分はあなたのブログのアドレスを記述してください。
例）あなたのブログのアドレスが https://hetenablogers-xxx.com の場合は、'https://hetenablogers-xxx.com/sitemap.xml' になります。
<!-- jQuery Ver3.6利用 更新日表示 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
;(function($) {
'use strict';
var urls = [], opts = {cache: false, dataType: 'xml'}, p,
url = 'https://あなたのブログのアドレス/sitemap.xml';
function parseSitemapXML(url) {
var d = new $.Deferred;
$.ajax($.extend(opts, {
url: url
})).done(function(xml) {
$(xml).find('sitemap').each(function() {
urls.push($(this).find('loc').text());
});
d.resolve();
}).fail(function() {
d.reject();
});
return d.promise();
}
function findURL(url) {
$.ajax($.extend(opts, {
url: url
})).done(function(xml) {
var isMatched = false;
$(xml).find('url').each(function() {
var $this = $(this);
if ($this.find('loc').text() === location.href) {
isMatched = true;
appendLastmod($this.find('lastmod').text());
return false;
}
});
if (!isMatched) nextURL();
}).fail(function() {});
}
function nextURL() {
urls.shift();
if (urls.length) findURL(urls[0]);
}
function appendLastmod(lastmod) {
var $container = $('<div></div>', {'class': 'lastmod'}).text(lastmod.replace(/T.*0/,""));
if ($('.entry-header > .date').get(0).tagName.toLowerCase() === 'span') {
$('.entry-title').before($container);
} else {
$('.entry-date').append($container);
}
}
p = parseSitemapXML(url);
p.done(function() {findURL(urls[0])});
p.fail(function(error) {});
})(jQuery);
</script>
HTMLコードを貼り付ける場所
ダッシュボードから、デザインを選択してください。
カスタマイズをクリックし、デザインの詳細画面が表示されたら、「ヘッダ」を選択してください。
ヘッダを選択後表示される「タイトル下」のHTML記述欄の最後に、コピペしたHTMLコードを貼り付けてください。
すでに入力されているHTML情報は絶対に消さないようにしてください。
HTMLコードの情報を追記後、「変更を保存する」ボタンをクリックして情報を保存してください。
以上で設定は完了です。
あなたのブログの個別の記事を表示して、更新日付が表示されていることを確認してください。
「更新日」の情報が表示されたら、あなたのブログのサイトマップ情報が作成されていて、読み込んで利用できる状態ということです。
あとはお好みに応じてそのままでよいか、さらにカスタマイズしたいか判断してください。
表示形式をカスタマイズしたい場合は、「CSSコードの内容」の解説部分に戻って、この記事を参考にしてカスタマイズしてください。
更新日を表示させることで気をつけること
更新日を表示させる場合に、気をつけることが何点かありますのでご確認ください。
更新日が表示されることによる留意事項は下記の通りです。
- すべての記事に更新日が表示される
- タイトルの一部や画像を変更しただけでも更新日が書き換わる
記事の内容を変更しなくても、タイトルや画像の一部を変更しただけで更新日情報は書き換わります。そのため、そういった更新日を表示したくない場合にはこの記事の方法は適していません。
また、記事の一部でも書き換える場合には、記事の信頼性を高めるため、更新日時点の情報に合うように、記事全体を見直して書き換えることも考慮して対応することが望ましいということになると思います。
更新日付の自動表示のまとめ
更新日情報が表示されることで、各記事がいつ頃内容を見直したり、書き換えたのかがわかりやすくなりました☺️
途中で更新日情報の表示をやめたくなったら、この記事で紹介しているコード部分だけを削除すればいつでもやめることができます。
わたしは当面記事に更新日を表示するようにして、いつ記事の内容を更新したのかわかるようにして、このブログを運営していきたいと思います。
表示があったほうが記事のメンテナンスがしやすそうです。また、記事を読んでいただいている皆さんにも、いつ更新したのかがわかりやすいのではないかと思っています。
この記事で紹介した方法は、みなさんも自由にカスタマイズできますのでぜひ活用してみてください！
*1:はてなブログでは自分でサイトマップを作成できません。またブログを開設してからサイトマップが作成されるまでしばらく時間（数ヶ月？）がかかかるようです。
