オタクの戯言

隠れオタクが思うがままに書き連ねていく、とりとめのないブログです

はてなブログでリライト記事の更新日時を時刻なしで表示する方法

スポンサーリンク

はじめに


当ブログにお越しいただき恐悦至極にございます。あにおです。

 f:id:aniota-alvarado:20190531171859p:plain

つい先日の事らしいのですが、はてなの仕様変更に伴い更新日時に何時何分まで表示されるようになってしまいました。

f:id:aniota-alvarado:20190531155226p:plain

別に時間が知られて困るということはありませんが、カテゴリに被ったり見栄えが良くなかったりしてどうにも気になります。

そこで、今回はこの更新日時の「時間」部分だけ消去する方法がないか調べたので、備忘録代わりに残しておこうと思います。


それでは、最後までお付き合いいただければ幸いです。

原因はサイトマップの表示形式が変わったため

※一応原因を記述しますが、興味が無い方は次にある解決方法の項目まで読み飛ばしてください。

今回のバグともとれる表示変更ですが、更新日時のカスタマイズをサイトマップ経由で表示している人のみ起きているようです。

この辺りの事は以下のブログで詳細に説明して下さっているので、是非参考にしてみてください。

こちらでは簡単に説明するに止めますが、サイトマップの日付表示が時刻まで表示するようになったことで起きたというのが原因みたいですね。

ではどうすれば良いのか。はてなブログユーザーの場合は①Proに契約している人と、②無料会員やPro契約者向けの方法に抵抗がある人とで対応が異なることがわかりました。

はてなブログProの場合はAMPを利用した方法で解決

※変更前に必ずバックアップをとっておいてください!

はてなブログProのかたであれば、AMPを利用した方法に切り替えることですぐに解決が可能となっています。

AMP(Accelerated Mobile Pages)
本題とはズレるので簡単な説明に止めますが、GoogleとTwitterが共同開発しているモバイル端末でウェブページを高速表示するためのプロジェクトを指します。

※出典:SEO HACKS

やり方は非常に簡単で、まず[設定]→[詳細設定]→[AMP]「ベータ版機能: Accelerated Mobile Pages (AMP) を配信する」にチェックを入れます。

次に、私はつばさのーとさんの公開して下さっているコードを導入していたので、あとは[デザイン]→[カスタマイズ(スパナのアイコン)]→[記事]→[記事下]にあった元々のコードと以下のコードを差し替えるだけでOKでした。

<!--[if lt IE 9]>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<!--<![endif]-->
<script>
/*
 * Show lastmod for Hatena Blog2 v1.0.1
 * Date: 2016-12-20
 * Copyright (c) 2016 https://www.tsubasa-note.blog/
 * Released under the MIT license:
 * http://opensource.org/licenses/mit-license.php
 */
;(function($) {
'use strict';
var html = '', p;
function getAmpHtml() {
var d = new $.Deferred;
$.ajax({
dataType: 'html',
cache: false,
url: location.origin + location.pathname + "?amp=1"
}).done(function (data) {
html = data;
d.resolve();
}).fail(function () {
d.reject('Error');
});
return d.promise();
}
function parseAmpHtml() {
var m = html.match(/<script type="application\/ld\+json">(.*?)<\/script>/);
if (m === null) return;
appendLastmod(JSON.parse(m[1]).dateModified.split('T')[0]);
}
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') {
$('.entry-title').before($container);
} else {
$('.entry-date').append($container);
}
}
p = getAmpHtml();
p.done(parseAmpHtml);
p.fail(function(error) {});
})(jQuery);
</script>

※出典:つばさのーと

設定後は以下の通りとなりました。

f:id:aniota-alvarado:20190602183224p:plain

導入のメリットとデメリットを比較してAMP配信を止めた話

※こちらは本題から大きく外れるので興味がなければ読み飛ばしていただけると幸いです。

今回のこの一件によりAMP配信を導入すべくかなり色々と調べたのですが、結論からいって諦めることにしました。

かなり簡略化していますがメリットとデメリットをそれぞれ羅列していきます。

メリット
  • スマホで表示するさいに高速化が見込める
  • Googleの検索表示が上位になりやすい(といわれている)
  • アクセス数の増加が見込める(人が多い)


デメリット
  • ブログのデザインテーマがレスポンシブに対応していようとそうでなかろうとそのまま使えない(表示が大きく変わる)
  • アドセンスの自動挿入ができない(もしくは難しい)
  • 一部のコードがCSSで利用できないため記事中の表現に制限がある
  • カエレバのボタンがかなり簡素になる


アドセンスのほうは手動であれば挿入できますし、自動挿入について説明して下さっている記事もあったのでまだ何とかなりそうでした。

しかし、デザインに関してはどうしても限界があり、特にCSSに制限があるというのが個人的には痛かったです。

将来的にこの辺りが改善されたり、それ以上のメリットが現れたりしなければAMP配信はおそらくやらないと思います。

はてなブログ無料会員やAMPを利用したくない場合は手動しかない?

※変更前に必ずバックアップをとっておいてください!

こちらの方法を調べるのにかなり苦労しましたが、唯一有効な方法を紹介して下さっているのが以下のサイトでした。



先に結論から述べると完全に自動化する方法は見つからず、記事作成中に手動で行うというのが限界でした。

つまり、過去記事に関してはいちいち書き換えるか、諦めるかしかないというのが現状のようです(新しいコードの公開待ちという完全なる人任せ状態ですね・・・)。

以下、その方法を詳しく書きます。

1.事前にカスタマイズ前に戻す

まず前提としていったんカスタマイズ前の状態に戻す必要があります。

私はつばさのーとさんの以下の記事を参照してカスタマイズしていたようなので、それを元にコードを探し出してすべて消去しました。

一応あった場所だけお伝えしておくと、以下の3か所でした。

  • [デザイン]→[カスタマイズ(スパナのアイコン)]→[記事]→[記事下]
  • [デザイン]→[カスタマイズ(スパナのアイコン)]→[デザインCSS]
  • [設定]→[詳細設定]→[検索エンジン最適化]→[headに要素を追加]

こんな感じで綺麗に表示がなくなっています。 f:id:aniota-alvarado:20190531161337p:plain

2.表示に必要となるコードを追加する

まず、[デザイン]→[カスタマイズ(スパナのアイコン)]→[フッタ]に以下のコードを追加します。

<script>
document.addEventListener('DOMContentLoaded', function(){
   var entry = document.getElementsByClassName("page-entry");
   if(entry.length >=1){
      var x = entry[0].getElementsByClassName("date entry-date first");
      var y  =entry[0].getElementsByClassName("entry-updated updated");
      if(x.length >=1 && y.length >=1){
          x[0].appendChild(y[0]);
      }
  }
}, false);
</script>

※出典:Plane Note

次に、[デザイン]→[カスタマイズ(スパナのアイコン)]→[デザインCSS]に以下のコードを追加します。

/* 更新日時を表示させるコード */
.entry-content .updated{
    display:none;
}
.page-entry .entry-header .updated{
    display:inline-block;
}

.page-entry .entry-header .updated:before {
    font-family: FontAwesome;
    content: "\f021";
    left: 0;
    font-size: 95% !important;
    top: 0;
    color: #373c38;
    padding-left: 20px;
    padding-right: 8px;
}

※参照:Plane Note

色については下から4番目にあるcolor: #373c38;の#英数字部分を変更すれば好きな色にすることが可能です。

これで完了となりますが、更新日時の前にアイコンが表示されない場合は[設定]→[詳細設定]→[検索エンジン最適化]→[headに要素を追加]に以下のコードを追加してください。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

※出典:つばさのーと

なお、私は日付前にアイコンを表示したかったので、[デザイン]→[カスタマイズ(スパナのアイコン)]→[デザインCSS]に以下のコードを追加しました。

/* 日付の前にアイコンを付ける */
.date:before {
font-family: "blogicon";
content: "\f043";
margin-right: 2px;
}

※出典:だちたまログ

3.あとは記事の冒頭にコードを貼り付けて日付を設定するだけ

以上の準備が終わったら、あとは記事の冒頭に以下のコードを貼り付けるだけで完了となります。

<time class="entry-updated updated" datetime="20XX-XX-XX(任意の日付)">20XX-XX-XX(任意の日付)</time>

※参照:Plane Note

日付についてですが、datetime="〇〇"とそのあとに続く>〇〇</time>は共通してリライトした日付を入力してください。

datetime="2019-05-31T20:00:00"のようにすることで時間まで表示することも可能との事です。

過去記事で試してみましたがこんな感じになりました。 f:id:aniota-alvarado:20190531165301p:plain

おわりに

今回の事をきっかけにAMP配信を導入するのもアリかと思ったのですが、私はそれよりも手動で更新日を挿入する手間のほうを選びました。

どうせリライトする時に記事を修正するので、そのとき一行目に差し込めばいいだけですしね。

かるい誤字修正のときは日付を反映させないという選択もできるので、考え方によってはこちらのほうが良いかもしれません(と無理やり自分を納得させました)。

どちらの方法をとるにせよ、今回の表示で「なんだこれは!バグか?!」と私のようにアワアワしたかたの参考になれば幸いです。


長くなってしまいましたが、最後まで読んでいただきありがとうございました。

それでは、またのお越しをお待ちしております。

Copyright © 2016-2019 オタクの戯言 All rights reserved.