電脳TIMES

ゲーム、プログラミング好きのブログです。関連する情報を発信していきます。

【はてなブログ】リライト時に更新日付を表示させる方法【不具合の対処法も解説!】

【はてなブログ】リライト時に更新日付を表示させる方法【不具合の対処法も解説!】
ブログを運営していると、記事のリライト(修正)が必要になってくることが多いです。

古い記事を更新することで、読む人に最新で適切な情報を発信することができるようになるため、とても大切な作業です。

そして、リライトしたならしっかり更新日付を表示させて、記事の更新があったことを知らせたいものですよね。
更新日付をしっかり表示させることで、新鮮な記事であることを伝えることができます。
また、「この記事はちゃんと更新しているんですよ」と暗に示すだけで、情報の信憑性が上がるという効果も期待できます。

当ブログでも、更新日付の表示を導入しています。

この記事では、はてなブログにおける更新日付の表示方法について記載していきます。

また、更新日付表示の導入をしたものの、うまく表示されないといった不具合への対処法も合わせて記載しております。

時間まで表示される不具合に悩んでいる方は、今すぐこちらへ

www.denno-times.com




更新日付を導入してみよう

現在はてなブログでは、標準機能の中に更新日付を表示させるものはありません。

そのため、基本的には有志のありがたいコードを導入するか、自分で開発するしかありません。

ここはひとつ、ありがたくコードを使わせてもらいましょう。
記事修正時の更新日付を表示させる方法についてググってみると、いくつか詳細に書いてくださっている記事がちらほらと見つかります。

参考にしたブログ様はこちら

www.tsubasa-note.blogutautan.hatenablog.com

1つ目の「つばさのーと」様の記事は、更新日付を導入している、ほぼすべてのはてなブロガーは参考にしているであろうほど読まれているほど有名ですね。
こちらの記事を参考にすれば、ひとまず更新日付の導入が完了します。

2つ目の「Try Something New」様の記事では、CSSを用いて更新日付表示の細部を調整する方法について記載してくださっています。
簡単なCSSですので、マークアップへの理解があまりなくても平気です。

さっそく参考にして、実践してみてください。

以降、この記事では不具合の対処方法について記載していきます。

更新日付の不具合の対処法

更新日付が投降日と縦関係になってしまう場合

上記導入方法を参考にして、コードを埋め込みブログを確認してみたところ、更新日付の表示ができたけど表示がおかしい場合があります。

例えば以下のように、投稿日付と縦の関係になるときがあります。

f:id:fpra1320:20181117231258p:plain:w400

こんな感じで縦に更新日時が表示されてしまうかもしれません😇

実際に、僕もこの不具合が出ました。
そのときの修正方法を紹介します。

修正方法

修正する箇所は、デザイン> 記事下のJavaScriptです。

現状のコード
function appendLastmod(lastmod) {
var $container = $('<div></div>', {'class': 'lastmod'});

function appendLastmod(lastmod) の箇所を修正します。

修正コード
function appendLastmod(lastmod) {
var $container = $('<span></span>', {'class': 'lastmod'});

本来spanタグのところは、divタグでした。
しかし、僕のブログではdivタグではダメでした。

とりあえず、ここを変更するだけで更新日付を投稿日時の真横に表示することが可能になりました。

f:id:fpra1320:20181117231319p:plain:w400

僕と同じ現象に陥っている方は試してみてください。

CSSもテーマ用に最適化

僕のブログテーマは、ZENO-TAELですので、上記修正は他テーマではうまくいくのか不明ではあります。

ちなみに、CSSをZENO-TAEL用に最適化させてあります。
同じテーマの方は、使ってみてください。

<!-- 更新日時表示 -->
.lastmod {
color: #666;
background-color: transparent;
text-decoration: none;
font-size: 100%;
display: inline;
margin-left: 10px;
}
.lastmod::before {
margin-right: 10px;
padding-left: 3px;
font-family: blogicon;
content: '\f02b';
}
.entry-date a {
padding: 5px 6px !important;
}

更新日付に日時まで表示される場合

この記事で紹介した更新日付の取得方法は、ブログのサイトマップが保持している年月日を取り込むというものです。

最近、はてなブログのサイトマップに更新がかかり、年月日に加えて時間も保持するようになりました。
そのため、今のコードでは日時部分まで表示されてしまい、更新日付がきれいに表示されなくなっています。

↓のような感じです。

f:id:fpra1320:20190607010236p:plain:w600

この現象に対して、僕は早急にコードを修正し対応させましたので、以下の記事を参考にしてみてください。

時間まで表示される不具合に悩んでいる方はこちら

www.denno-times.com

まとめ

リライト記事に更新日時の表示をさせるコードは、探せばたくさん見つかります。

しかし、自身のブログにすべてがあてはまるという訳ではないので注意が必要です。
不具合で困っている方の参考になれば幸いです。


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