【はてな】「Minimalism」リライト記事の更新日自動化カスタマイズ

どうも、ヨリミチです。

今回はリライト時の更新日時自動化カスタマイズをやってみようと思います。

ボクのテーマは「Minimalism」です。それ以外を使っている方は、結果が違うことになるかもしれませんので、ご注意ください。

また、カスタマイズする前にちゃんとバックアップを取るようにしておいてくださいね。

f:id:WalkingYorimichi:20191001152303j:plain

リライトしたけど日時が古いまま
それではさっそくやってみよう

リライトしたけど日時が古いまま

WordPressならリライトすれば当たり前に更新されるけど、はてなはなぜか未対応。

更新日時を表示するシステムがはてなにはありません。なのでカスタマイズして表示させようってことです。

前々から気にはなっていたけど、放置してた（笑）

今回やっとこさ、やろうと思い立った。が…コピペでパパっとできると思っていたけど、つまづいて、1時間ぐらいかかってしまった。

それではさっそくやってみよう

www.yakuzari.work

上記の記事では「Minimalism」の様々なカスタマイズがまとめられています。更新日カスタマイズ以外にもいろいろあるので、参考にしてみてください。

それではまず、上記の記事で「記事の更新日を記載」というタイトルを探してください。基本はここの手順通りですが、少し詰まりました。

ここからは、非常にリンクだらけで、ややこしいですが、がんばりましょう。

①jQueryとFont Awesomeの読み込み設定

まず、下記の記事通りに設定していきます。

kurokinomizuiwa.hatenablog.com

②HTMLの設定

下記の記事を参考に進めます。

www.tsubasa-note.blog

ボクはここのサイトマップバージョンを使いました。

ここのコードを「記事下」にコピペ。

その際、サイトマップURLの記入を忘れないように！

この時点で更新日は表示されるものの、更新日の表示がバグってます。

③②のコードを修正します

www.yakuzari.work

上記の記事のコードをそのまま張ると、今度は更新日が表示されなくなります。

そこで以下のコードで張りかえます。

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

<div></div>の部分が抜け落ちていたんですね。

これでちゃんと表示されると思います。

④デザインCSSの設定

下記の記事を参考にしながら進めます。

utautan.hatenablog.com

ここでは②でコピペしたコードの一部を修正しています。

これも手順通りやっていけました。

ボクはこのようにしました。

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

デザインCSSに張るコードも上記の記事のコードをそのまま張っても問題なかったですし、下記の記事のCSSコードを張っても問題なかったです。

kurokinomizuiwa.hatenablog.com

僕は修正してこのようにしました。

/*↓----更新日時表示----↓*/
.lastmod {
background-color: transparent;
padding: 5px 0px;
text-decoration: none;
font-size: 15px;
display: inline;
margin-left: 0px;
font-family: 'Montserrat', sans-serif;
}
.lastmod::before {
margin-right: 5px;
margin-left: 10px;
padding-left: 3px;
font-family: "Font Awesome 5 Free";
font-weight: bold;
content: '\f01e';
}
/*↑----更新日時表示----↑*/