電脳TIMES

ポケモン好きからブロガーに。ゲーム、ブログ関係のことを中心に、いろいろなことを書いていきます。

電脳TIMES

【はてなブログ】リライト時の更新日時が思い通りに表示されないときの対処法

スポンサーリンク

f:id:fpra1320:20181118000836j:plain
記事をリライトするのが好きな人にとって、更新日時の表示は必須ですよね。

更新日時が表示されているだけで、新鮮な記事であることを伝えることができます。
また、「この記事はちゃんと更新とかしているんですよ」と暗に示すだけで、情報の信憑性が上がるという効果も期待できます。

このブログも、更新日時の表示を導入してみました。


スポンサーリンク



更新日時の導入

まずは、記事修正時の更新日時を表示させる方法をググりました。
んで、いくつか詳細に書いてくださっている記事がちらほらと見つかりました。

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

www.tsubasa-note.blogutautan.hatenablog.com

さっそく参考にして、コードを埋め込みブログを確認してみると、そこには確かに更新日時の表示が!

あれ、キレイに表示されていない…?

f:id:fpra1320:20181117231258p:plain:w600
こんな感じで縦に更新日時が表示されてしまいました😌
試行錯誤を繰り返し、なんとか真横に表示させることができました!

f:id:fpra1320:20181117231319p:plain:w600

続きまして、このような現象への対処方法と僕が実際に導入しているコードを紹介します。

修正箇所は記事下のJavaScript

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

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

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

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

とりあえず、ここを変更するだけで更新日時を投稿日時の真横に表示することが可能になりました。
僕と同じ現象に陥っている方は試してみてください。


スポンサーリンク



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;
}

まとめ

リライト記事に更新日時の表示をさせるコードは、探せばたくさん見つかります。
しかし、自身のブログにすべてがあてはまるという訳ではないので注意が必要です。

僕の場合は原因不明でしたが、記事下のHTMLにはSNSボタンのコードも貼ってあったりしてたので、そっちに引っ張られたのかなというのが僕の見解です。

同じような現象で困っている方の参考になれば幸いです。


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