最近、このブログの記事をリライトをすることが多くなっています。このブログも開設してから約2年になろうとしています。読み返すたびに自分の書いた文章がいかに読みにくいかというを実感しているんですが、記事のリライトをするようになって記事の更新日が記載された方が分かりやすいと思うようになりました。
他の方のブログの記事では格好よく投稿日の横に更新日が光っています。自分のブログにも更新日の表示が出来るようにと思い、記事のリライトを行うと更新日を自動的に表示してくれる設定を調べてみました。
更新日自動表示の設定
更新日自動表示のカスタマイズをアップデートしました、レスポンシブデザインの方はご確認ください | つばさのーと
つばささんのコードを利用させて頂きました、これをHEADに追加の部分にコードをコピペします。
<!--[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 Blog 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 urls = [], opts = {cache: false, dataType: 'xml'}, p,
//url = 'https://www.tsubasa-note.blog/sitemap.xml'; // URLの入力例
url = ''; // ここにサイトマップへのURLを入力してください。
function parseSitemapXML(url) {
var d = new $.Deferred;
$.ajax($.extend(opts, {
url: url
})).done(function(xml) {
$(xml).find('sitemap').each(function() {
urls.push($(this).find('loc').text());
});
d.resolve();
}).fail(function() {
d.reject();
});
return d.promise();
}
function findURL(url) {
$.ajax($.extend(opts, {
url: url
})).done(function(xml) {
var isMatched = false;
$(xml).find('url').each(function() {
var $this = $(this);
if ($this.find('loc').text() === location.href) {
isMatched = true;
appendLastmod($this.find('lastmod').text());
return false;
}
});
if (!isMatched) nextURL();
}).fail(function() {});
}
function nextURL() {
urls.shift();
if (urls.length) findURL(urls[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 = parseSitemapXML(url);
p.done(function() {findURL(urls[0])});
p.fail(function(error) {});
})(jQuery);
</script>更新日設定表示の修正
ところが、こちらのコードそのままでは私の環境では更新日が表示できませんでした。どうしてだろうと調べてみるとこちらの方、うたこさんの記事が。
はてなブログで更新日時を自動表示させる方法 – Try Something New
こちらのコードを
こちらに書き換えを行ったら更新日の表示が出来るようになりました。
ところが、更新日が縦に表示されてしまう状態になってしまいました。これでは格好悪い、そこで更に調べてみます。
【はてなブログ】リライト時の更新日時が思い通りに表示されないときの対処法 – 電脳TIMES
電脳TIMESさんのコードを利用させて頂いたところ横に出るようになりましたが、これで更新日は出るようになりましたが更新日の横にアイコンが出ません。
リライト好きな方へおススメしたい最終更新日を自動で表示するカスタマイズ | つばさのーと
.lastmod {
color: #f0f0f0;
background-color: #111;
padding: 5px 6px;
text-decoration: none;
font-size: 90%;
display: inline;
margin-left: 10px;
}
.lastmod::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
content: '\f021';
}
.entry-date a {
padding: 5px 6px !important;
}
.entry-date a::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
content: '\f017';
}
つばささんのこちらの記事を読まずにコピペしておりCSSをコピペするのを忘れていました。
BrooklynテーマをMinimalism用に書き換える
color: #000000;
background-color: #ffffff;つばささんのコードはテーマ「Brooklyn」用なので私が使っている「Minimalism」用に2行目のcolorと3行目のbackground-colorを#000000と#ffffffにそれぞれ書き換えます。
font-family: FontAwesome;
content: '';しかし、こうなると投稿日の左側にアイコンがダブって表示されるようになるので上記のコードの￥f017を削除します
これで更新日が正常に表示するようになりました 。
まとめ
先人の皆さんの知恵というものは本当にありがたいものだと実感しました。ほとんどがコピペで立派に更新日の自動表示が出来るようになりました。ただ、Minimalismでこの設定について書かれている方がいらっしゃらなかったのでまとめてみました。
これでまた自分の記事のリライトをしていくモチベーションを上げていきたいと思い、少しでも読みやすい記事にしていきたいと思います。
