こんにちは。シーナと申します。
ブログのカスタマイズ、特別編第2弾になります。
はてなブログの記事にサイトマップを利用して更新日を表示させている人向けです。
2019年5月30日頃から何か変だな、違和感があるなと思っていました。
どうやら記事の最初に表示させている更新日が、
2019-05-30
という表記から
2019-05-30T12:34:56+09:00
というような表記になっていることが違和感の正体でした。
正直、更新した時刻の情報は必要ありません。
そこまでは（人は）誰も求めていないでしょう。
しかも普通に時刻が表示されるのであればともかく、表記が分かりにくいですからね。
ということで、いつものように先人の皆様のお知恵に頼りながら元の表記に戻したいと思います。
あなたのブログの参考になれば幸いです。
原因は、はてなブログ側の仕様変更
はてなブログのサイトマップの仕様変更が原因でした。
更新日を設定する「lastmod」タグを業界標準の W3C Datetime 形式にしたようです。
W3C Datetime 形式が「2019-07-01T20:19:49+09:00」のような表記です。
必須ではないとはいえ、むしろ今までが業界標準ではなかったのですね。
確かに時刻まであった方が記事をいつ更新したのか、GoogleやBingといった検索サイト側からするとはっきり分かりますから、必要な情報でしょう。
ということで、この仕様変更が元に戻ることはなさそうです。
ちょっと困るのは、サイトマップを利用して更新日を表示させていた人ですね。
はい。私です。
はてなブログのサイトマップは、ブログのトップページのURLの最後に「/sitemap.xml」と付ければブラウザで確認することが出来ます。
当ブログの場合は「https://www.inside-shiina.com/sitemap.xml」となります。
さらに100記事毎に末尾に「?page=1」、「?page=2」と付与されて分割されています。
更新日から不要な時刻部分を消すために必要な1ステップ
最初に私が行った設定に必要なことを記載します。
そのまま該当部分を修正すればおそらく動作すると思います。
何をしているのかは後述しています。
紹介するコードを編集する前にすでに追加しているコードのバックアップ（どこかにコピペ）を取っておくことをお勧めします。
前提
当ブログでは、更新日を表示させる方法として、「つばさのーと」さんの以下の記事で公開されている「サイトマップ利用バージョン」を利用させていただいています。
素晴らしい内容で大変お世話になっています。
ありがとうございます。
こちらを基に、はてなブログの仕様変更に対応するべく、必要な部分だけ修正することになります。
修正方法を公開されている全ての皆様、いつも助かっております。
ありがとうございます。
なお、はてなブログPro版を利用している場合は、「つばさのーと」さんが同ページで公開されている「AMP利用バージョン」を採用する方法もあります。
こちらならサイトマップは関係ありませんから更新日に時刻が表示されることもありません。
ただ、私には無視できないデメリット（後述しています）があったため利用しませんでした。
以降は、「サイトマップ利用バージョン」を使用している人が前提となります。
ステップ1 コードの修正
既にあなたがブログのどこかに設定している該当（「サイトマップ利用バージョン」）のコードを探します。
私は、「デザイン => カスタマイズ => 記事 => 記事下」に設定しています。
修正する部分は「サイトマップ利用バージョン」の55行目からになります。
赤字の行を修正、青字の行は削除します。
他の部分はそのままです。
修正前（8行あります）
function appendLastmod(lastmod) {
var $container = $('<div></div>', {'class': 'lastmod'});
$container.append($('<span></span>', {'class': 'date-year'}).text(lastmod.split('-')[0]));
$container.append($('<span></span>', {'class': 'hyphen'}).text('-'));
$container.append($('<span></span>', {'class': 'date-month'}).text(lastmod.split('-')[1]));
$container.append($('<span></span>', {'class': 'hyphen'}).text('-'));
$container.append($('<span></span>', {'class': 'date-day'}).text(lastmod.split('-')[2]));
if ($('.entry-header > .date').get(0).tagName.toLowerCase() === 'span') {
修正後（3行になります）
function appendLastmod(lastmod) {
var $container = $('<div></div>', {'class': 'lastmod'}).text(lastmod.replace(/T.*0/,""));
if ($('.entry-header > .date').get(0).tagName.toLowerCase() === 'span') {
上記のように修正して、［変更を保存する］をクリックして確定します。
以上で設定は完了です。
更新日の表示は元に戻りましたでしょうか。
当ブログはこの設定で元に戻りましたが、もしあなたのブログでうまく行かない場合は、別の方法をお探しください。
CSSで年、月、日を個別にカスタマイズしているケースでは期待する結果にならない可能性があります。
オリジナルと異なる部分の補足
後は、直接動作に関係は無いはずですが、「つばさのーと」さんが公開されているオリジナルのコードの一番最初で指定している jQuery のバージョンを最新にしてみるとよいかもしれません。
当ブログでは、以下のバージョンを指定しています（最新ではありません）。
<!--[if lt IE 9]>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!--<![endif]-->
jQuery については、以下の記事で紹介しています。
それでは、今回修正した内容についての補足です。
修正した部分は何をしているのか
まず、赤字の部分です。
この部分が今回の肝ですね。
var $container = $('<div></div>', {'class': 'lastmod'}).text(lastmod.replace(/T.*0/,""));
「.text(lastmod.replace(/T.*0/,""))」を最後に追記しています。
この部分で、サイトマップから取得した更新日時から「T」で始まり「0」で終わる文字列を「文字無（""）」に置換（replace）しています。
更新日時の以下の赤字部分ですね。
2019-05-30T19:42:15+09:00
不要な部分は必ず「T」で始まり「0」で終わります。
次に、削除した青字の部分です。
$container.append($('<span></span>', {'class': 'date-year'}).text(lastmod.split('-')[0]));
$container.append($('<span></span>', {'class': 'hyphen'}).text('-'));
$container.append($('<span></span>', {'class': 'date-month'}).text(lastmod.split('-')[1]));
$container.append($('<span></span>', {'class': 'hyphen'}).text('-'));
$container.append($('<span></span>', {'class': 'date-day'}).text(lastmod.split('-')[2]));
ここではサイトマップから取得した更新日を年、月、日とそれぞれ独立して扱い、再度ハイフン（-）を間に挿入するという処理をしているようです。
敢えてこのような処理をしている理由は、恐らく個別にCSS等で表記を変更できるようにするためと思います。
当ブログでは不要な処理ですからこの機会に削除することにしました。
この部分を削除しないままだと（赤字部分だけ修正すると）更新日時が取得される現在では表記が余計におかしくなります。
AMP利用バージョンを私が採用しなかった理由
正直に結論から申し上げます。
一番の理由は。
アドセンスが表示されなかったからです。
アドセンスのためにブログを始めた訳ではないとはいえ、当ブログを1年間続けている現在、収益もある程度発生しており、今では確実にブログを継続するモチベーションの一部になっています。
やはり表示はされて欲しいですよ。
もちろんMinimalism等のデザインテーマが適用されないといった点も困りますけどね。
さて、「AMP利用バージョン」を採用にするには、はてなブログでAMP（Accelerated Mobile Pages）機能を有効にする必要があります。
利用上での注意点や機能については、はてなブログのヘルプで公開されています。
AMP機能を有効にすると自動的（強制的）にAMP版の記事も別途配信されるようになります。
この中で私にとって一番問題となったのは、
記事中のJavaScriptが実行されない
という点です。
当ブログでは、アドセンスのコードを記事中に自動挿入するようにJavaScriptで設定しているのですが、その処理がAMP版の記事では動きません。
とはいえ、AMP版の記事の方がGoogle検索で上位に来る記事に対して、手動で（通常版の記事には表示されない、AMP版の記事にだけ表示される）AMP用のアドセンスコードを張り付けるぐらいは許容しようと考えて、実際に一度は運用してみました。
全ての記事がAMP版の方が検索で上位になるなら（面倒すぎて）許容出来ませんが、大抵の場合は（どういった基準なのか不明ですが）一部の記事だけですからね。
AMP版の記事には、URLの最後に「?amp=1」を付ければ、PCでもスマホでもアクセス出来ます。
（はてなブログでAMP機能を有効にしている必要はあります。設定自体はチェックボックスをオンにするだけです。）
では、なぜ現在は利用していないのか。
繰り返しとなりますが、アドセンスが表示されなかったからです。
正確にはAMP用のアドセンスが表示されないのです。
元々、手動で記事内に張り付けていた通常のアドセンスはAMP版の記事でも表示されます。
そして、はてなブログの記事のプレビュー機能やURLの最後に「?amp=1」を追加してアクセスした場合は、PCやスマホでもAMP用のアドセンスはきちんと表示されていました。
（そのため問題ないと判断して、しばらく運用していました。）
しかし、Googleで検索して表示されたリンクをクリックして表示されるAMP版の記事では表示されないのです。
わざわざURLに「?amp=1」を追加してアクセスする人なんて自分しかいませんよね。
Googleで検索して表示されるリンクからアクセスした時に表示されないと意味がありません。
当ブログのとある記事がAMP版でアクセスされていることにGoogleアナリティクスを見ている時に気づいたため、試しに確認してみたところ分かりました。
（ちなみに、本当に記事の読み込み時間は一瞬でした。）
その後、いろいろ試行錯誤しましたが、私には解決策が分かりませんでした。
現在行っている自動挿入を止めて、すべての記事に手作業で通常のアドセンスコードを張り付けるのは私には面倒すぎて無理だと判断しました。
もしあなたがAMP機能を有効にして、AMP用のアドセンスコードを使用する際は、検索サイトからあなたのブログにアクセスした時にも意図した通りに表示されているか確認することをおすすめします。
終わりに
（私からすると）突然の仕様変更でした。
お陰でいろいろと勉強になりましたが、たまにでよいですね。
それでは、また。
おすすめ記事です。
iOS からもブログの見え方を確認しておきたいですね。
ブログ更新のお供に体重に優しい飲み物はいかがですか。
うますぎるグリーンダカラ。実は糖質量50%オフです。
おやつもあります。特にラスクはおすすめです。
普段の商品選択の参考にどうぞ。
おいしく食べた後はお口のお手入れも忘れずに行いたいです。
