低所得の青色申告個人事業主のブログ

開業から経験で得た情報をお知らせしていきたいと思います。

= グローバル ナビゲーション =

【無料はてなブログ】【カスタマイズ】更新日の表示【Minimalism】【Brooklyn】【反映されない】【時刻を消す】


[ スポンサー リンク ]

適用しているデザインテーマは Minimalism 。

これからBrooklynへ変更予定。

いつものことながら、先人たちお知恵をお借りしてもすぐには表示されず、あとで原因調査、と思っていたらいつのまにか表示されてる!!!

「記事の管理」から「記事を見る」と反映されない。

URLを直接入力して確認するとちゃんと反映されている。

 

 

サイトマップの登録

カスタマイズの前に、サイトマップが必要。

サイトマップの登録は次の2つサイトを参照。

www.future-nova.com

www.tkd-wanderer.com

サイトマップ名には 'sitemap.xml' 説と 'sitemap_index.xml' 説があるが、 'sitemap.xml' で登録。

 

参考にしたサイト

www.tsubasa-note.blog

 

FontAwesome

設定 > 詳細設定 > headに要素を追加

アイコンにFontAwesomeを使用するので、以下の文を追加。Ver.5.6.3

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

'head'に記述すると、ページ読み込み速度が落ちると指摘しているサイトがたくさんある。

'ヘッダ''フッタ''記事上''記事下'に記載すると表示できなくなるケースもあるので、カスタマイズが落ち着いた時点で記述場所は検討

 

JQuery

設定 > 詳細設定 > headに要素を追加

以下の文を追加。Ver.3.3.1

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

'head'に記述すると、ページ読み込み速度が落ちると指摘しているサイトがたくさんある。

'ヘッダ''フッタ''記事上''記事下'に記載するとscriptが動作しなくなるケースもあるので、カスタマイズが落ち着いた時点で記述場所は検討

 

 

動きの定義 [更新日] 取得【時刻を消す】

デザイン > カスタマイズ > 記事 > 記事下

以下の文を追加。ここでサイトマップURLが必要。

<時刻なしバージョンへジャンプ>

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

2019/06/01現在、時刻まで表示されるので消す修正

サイトマップ上、「2020-12-31T01:01:01+09:00」と記述されているため、"lastmod"から substr メソッドにより、先頭から10文字を取得するコードに変更し、不要部分を削除

<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'}).text(lastmod.substr(0,10));
		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>

 

デザイン定義 [更新日] 表示

デザイン > カスタマイズ > デザインCSS

1つ目はMinimalism用、黒背景白字から白背景黒字に変更。

2つ目はBrooklyn用。

/* 更新日時表示 */
.lastmod {
	color: #383838;
	padding: 5px 6px;
	text-decoration: none;
	font-size: 80%;
	display: inline;
	margin-left: 10px;
}
.lastmod::before {
	margin-right: 5px;
	padding-left: 3px;
	font-family: FontAwesome;
	content: '\f021';
}
@media screen and (min-width: 480px){
	.lastmod {
		font-size: 95%;
	}
}
.entry-date a {
	padding: 5px 6px !important;
}
/* 更新日表示 */
.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';
}

 

追記:サイトマップを読み込めませんでした

2019/06/01現在、取得に成功している

Gogle Search Console のステータスでは成功しましたと表示されている。

サイトマップインデックスをクリックして確認すると、ステータスは取得できませんでしたと表示されている。

さらにクリックするとサイトマップを読み込めませんでしたとなる。

エンコードUTF-8でなくISO-8859-1だからなのかとも思ったが、編集する術もない。

同じ悩みの人が多いよう。

support.google.com

Googleサイトマップを読み込めていない模様。

はてなブログを使う以上しょうがないようだ。

ただ、XMLの中身を確認すると追加した記事や更新日は反映されている。