適用しているデザインテーマは Minimalism 。
これからBrooklynへ変更予定。
いつものことながら、先人たちお知恵をお借りしてもすぐには表示されず、あとで原因調査、と思っていたらいつのまにか表示されてる！！！
「記事の管理」から「記事を見る」と反映されない。
URLを直接入力して確認するとちゃんと反映されている。
サイトマップの登録
カスタマイズの前に、サイトマップが必要。
サイトマップの登録は次の２つサイトを参照。
サイトマップ名には 'sitemap.xml' 説と 'sitemap_index.xml' 説があるが、 'sitemap.xml' で登録。
参考にしたサイト
FontAwesome
設定 > 詳細設定 > headに要素を追加
アイコンにFontAwesomeを使用するので、以下の文を追加。Ver.5.6.3
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet">
'head'に記述すると、ページ読み込み速度が落ちると指摘しているサイトがたくさんある。
'ヘッダ'や'フッタ'、'記事上'や'記事下'に記載すると表示できなくなるケースもあるので、カスタマイズが落ち着いた時点で記述場所は検討。
JQuery
設定 > 詳細設定 > headに要素を追加
以下の文を追加。Ver.3.3.1
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
'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用、黒背景白字から白背景黒字に変更。
２つ目は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だからなのかとも思ったが、編集する術もない。
同じ悩みの人が多いよう。
はてなブログを使う以上しょうがないようだ。
ただ、XMLの中身を確認すると追加した記事や更新日は反映されている。
