【はてなブログ・Brooklyn】記事の更新日を表示させるカスタマイズ

はてなブログでは、記事の一番上にその記事が初めてアップされた日付が表示されるようになっています。

しかし記事によっては日々情報を最新のものにアップデートしていることもあり、出来れば読者の方に最終更新日を知らせたいと思っていました。

そこで、今回ははてなブログの人気テーマの一つである「Brooklyn」で記事の更新日を表示させるカスタマイズを紹介したいと思います。

はてなブログ・Brookylnで記事の更新日を表示させる前に現状を確認
はてなブログ・Brookylnで記事の更新日を表示させる方法
記事の更新日を表示させるカスタマイズを更にカスタマイズ
【はてなブログ・Brooklyn】記事の更新日を表示させるカスタマイズ～まとめ～

はてなブログ・Brookylnで記事の更新日を表示させる前に現状を確認

Brookylnが人気テーマである理由の一つとして、何もカスタマイズしなくてもデザインが素晴らしいということがあげられます。

そのため何もカスタマイズしなくてもお洒落なブログとして成り立ちます。

そんなBrooklynの記事の作成日の表記はこんな感じ↓になっています。

黒地白字というデザインで、ワンポイントで該当記事の作成日を示してくれています。

今回は上の画面で言うところの「2020-4-30」の横に、更に記事の更新日を載せたいと思います。

はてなブログ・Brookylnで記事の更新日を表示させる方法

基本コピペで行けるように紹介したいと思います。

尚、途中で自分のサイトマップのURLを記入する箇所があります。

コピペする前に自分のサイトマップのURLを確認しておきましょう。

ちなみに、当ブログのURLは↓↓です。

(https://brooklyn-custom.hatenablog.com/sitemap.xml)

※トップページのURLに/sitemap.xmlをくっつけたURLになります。

それでは早速コピペしていきましょう！

「headに要素を追加」にコピペするコード

ダッシュボード→設定→詳細設定→headに要素を追加

に下記のコード(FontAwesomeとJQuery)をコピペします。

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

ちなみに、既に似たようなコードが入力されている場合は追加しなくても設定可能なこともあるので一旦スルーしてみましょう。

次以降の工程を行ってもうまく設定できなかった際に追記してみて下さい。

「記事下」にコピペするコード

ダッシュボード→デザイン→カスタマイズ→記事→記事下

に下記のコードをコピペします。

<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 = 'ここにサイトマップへの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 lastDate = lastmod.split('T');

		var $container = $('
', {'class': 'lastmod'});

		$container.append($('', {'class': 'date-year'}).text(lastDate[0].split('-')[0]));

		$container.append($('', {'class': 'hyphen'}).text('-'));

		$container.append($('', {'class': 'date-month'}).text(lastDate[0].split('-')[1]));

		$container.append($('', {'class': 'hyphen'}).text('-'));

		$container.append($('', {'class': 'date-day'}).text(lastDate[0].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>

ここにサイトマップへのURLを入力のところに先ほど準備してもらった自分のブログのサイトマップURLを入力します。

「デザインCSS」にコピペするコード

ダッシュボード→デザイン→カスタマイズ→デザインCSS

に下記のCSSをコピペします。

/* 更新日表示 */

.lastmod {

	color: #ffffff;

	background-color: #000000;

	padding: 5px 6px;

	text-decoration: none;

	font-size: 90%;

	display: inline;

	margin-left: 10px;

}

.lastmod::before {

	margin-right: 5px;

	padding-left: 3px;

	font-family: 'Font Awesome 5 Free';

	content: '\f021';

}

.entry-date a {

	padding: 5px 6px !important;

}

.entry-date a::before {

	margin-right: 5px;

	padding-left: 3px;

	font-family: 'Font Awesome 5 Free';

	content: '\f017';

これで完成です！

完成図↓↓

Brooklynでの更新日表記のカスタイマイズ — Brooklynでの更新日表記のカスタマイズ

記事の更新日を表示させるカスタマイズを更にカスタマイズ

今回完成した更新日の表示ですが、日付の前にアイコンがあります。

記事作成日前には時計のアイコン、更新日前には更新を表す矢印アイコン。

これらは上のコードで言うところのf017(時計アイコン)、f021(更新矢印アイコン)で規定されています。

Font Awesomeのサイトで多数のアイコンが紹介されています。

好みのアイコンを検索等で探し、そのアイコンをクリックすると「f000」などのコードを見つけることが出来ますので、f017とf021が書かれているところをそのコードに書き換えてあげると該当のアイコンへ変更することができますよ。

※アイコンの一覧が表示されている画面で薄く灰色がかっているアイコンは「PRO」仕様のため有料となります。黒く表示されているアイコンを選択しましょう！