はてなブログ リライト日付の表示方法
ブログというのは、リライトが重要であることを最近学びました。
このBuchoLOG Globalも地道にリライトしています。
さて、せっかくリライトしたのにその日付を手動で書くのはなんとも非効率です。 自動で表示させたいものです。
いろいろ調べ、うまくいかなかったことを乗り越えた結果、やっとわたしもこの設定ができました。
今回はその方法を簡潔にまとめます。 参考にしていただけたらと思います。
リライト表示設定
前提
はてなProであること。
無料バージョンはソースコードが違いますので、オリジナル（記事末）をご確認ください。
ソースコード貼り付け
以下のソースを
デザイン→ PC →記事下
に挿入します。
なお、オリジナルソースを一部修正しています。
jquery-2.2.3を3.2.1にバージョンアップしています。
<!--[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-3.2.1.min.js"></script> <!--<![endif]--> <script> /* * Show lastmod for Hatena Blog2 v1.0.1 * Date: 2016-12-20 * Copyright (c) 2016 http://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>
参照元は記事末に記載しています。
更新日付の表示設定
デザインCSSに以下のコードを挿入します。
白の背景に合うように、書式変更しています。
実際の表示のされ方は、わたしの記事の冒頭をご確認願います。
この部分は単なる表示の書式です。
ご自身のテーマにあわせてカスタマイズして問題ございません。
.lastmod {
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 {
font-size: 90%;
padding: 5px 6px !important;
}
.entry-date a::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
}
うまく表示されなかったら・・・・
１）AMP設定がONになっているか確認してください
設定→詳細設定→AMP
これはProのみの機能です。
これをONにすると更新日時のデータを拾うようになります。
２）Font-awesomeが使える状態が確認してください
記述した記憶がなければ、
デザイン→PC→ヘッダ→記事下
に以下追記してみてください。
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
参考元
更新日自動表示のカスタマイズをアップデートしました、レスポンシブデザインの方はご確認ください | つばさのーと
はてなブログのMarkdown法における複数行改行コードは、＜br＞、＜br/＞、＜br /＞のいずれかを連続して入力すればOK
