タメブロ

日々の中で気付いた少し為になること

MENU

更新日時がうまく表示できないときの最後の手段【はてなブログ】

はてなブログで更新日時を表示させる方法をネットで調べてもできない人の最後の手段

 

それは、アホになること。

次の手順で淡々とコピペをしましょう。

うまくいけば等ブログのように更新日時が出てきます。

これで出来なかったら他の方法を当たるか、ココナラで外注しましょう。

 

PC版(3ステップ)

PC-1.ダッシュボード→設定→詳細設定→headに要素を追加に次をコピーしてを貼り付ける。

<!--「jQuery」参照URL-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

 

忘れずに変更を保存すること!

PC-2.ダッシュボード→デザイン→カスタマイズ→記事→記事下に次をコピーして貼り付け

※必ず以下の赤字部分の「ここに自分のURLを入力」と「ご自身のブログのURL」を置き換えてください!

<!--[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>
;(function($) {
'use strict';
var urls = [], opts = {cache: false, dataType: 'xml'}, p,
_ua = (function(u){
return {
Tablet:(u.indexOf("windows") != -1 && u.indexOf("touch") != -1 && u.indexOf("tablet pc") == -1)
|| u.indexOf("ipad") != -1
|| (u.indexOf("android") != -1 && u.indexOf("mobile") == -1)
|| (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1)
|| u.indexOf("kindle") != -1
|| u.indexOf("silk") != -1
|| u.indexOf("playbook") != -1,
Mobile:(u.indexOf("windows") != -1 && u.indexOf("phone") != -1)
|| u.indexOf("iphone") != -1
|| u.indexOf("ipod") != -1
|| (u.indexOf("android") != -1 && u.indexOf("mobile") != -1)
|| (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1)
|| u.indexOf("blackberry") != -1
}
})(window.navigator.userAgent.toLowerCase()),
//url = 'https://www.tameblo.work/sitemap.xml'; // URLの入力例
url = 'ここに自分のURLを入力/sitemap.xml'; // ←にご自身の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.replace(/T.*0/,""));
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>

 

忘れずに変更を保存すること!

PC-3.ダッシュボード→デザイン→カスタマイズ→デザインCSSに以下をコピーして貼り付け

/*更新日時表示*/
.lastmod {
background-color: transparent;
padding: 5px 0px;
text-decoration: none;
font-size: 15px;
display: inline;
margin-left: 0px;
font-family: 'Montserrat', sans-serif;
color: #888888;
}
.lastmod::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
content: '\f01e';
}
.entry-date a {
background-color: transparent;
padding: 5px 0px 5px 6px;
text-decoration: none;
font-size: 15px;
display: inline;
}
.entry-date a::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
content: '\f073';
}

 

忘れずに変更を保存すること!

スマホ版(2ステップ)

スマホ-1.ダッシュボード→デザイン→スマートフォン→記事→記事下に以下をコピーして貼り付け

※必ず以下の赤字部分の「ここに自分のURLを入力」と「ご自身のブログのURL」を置き換えてください!

 

<!--[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>
;(function($) {
'use strict';
var urls = , opts = {cache: false, dataType: 'xml'}, p,
//url = 'https://www.tameblo.work/sitemap.xml'; // URLの入力例
url = 'ここに自分のURLを入力/sitemap.xml'; // ←にご自身の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.replace(/T.*0/,""));
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>

 

忘れずに変更を保存すること!

スマホ-2.ダッシュボード→デザイン→スマートフォン→ヘッダ→タイトル下スマートフォン用にHTMLを設定するに以下をコピーして貼り付け

<style type="text/css">
/*日付更新*/
span.date::before {
margin-right: 5px;
font-family: FontAwesome;
content: '\f017';/*投稿日のアイコン*/
}
.lastmod {
font-size: 90%;/*文字サイズ*/
padding: 0px 10px;
margin-left: 15px;
display: inline;
font-weight: 700;
color:#18B2E0; /* 文字色 */
}
.lastmod::before {
margin-right: 6px;
font-family: FontAwesome;
content: '\f021';/*最終更新日のアイコン*/
}
</style>

 

忘れずに変更を保存すること!

3.日付が出てこないとき

  1. 長いこと色々コピペしているうちに、日付の表示を隠すようなコードを入れてしまっている可能性がありますので、”日付”や”display none"などのワードがコードの中に入っていないかチェックし、日付を隠しているような雰囲気があったら、そのコードを削除してみるのも手です。慎重にね!
  2. ただ貼り付けただけでは駄目です。PC-2とスマホ-1には、ご自身のURLを入力しなくてはならない箇所がありますので、ご注意下さい。

4.今回参考にさせていただいた神ブログ

つばさノート様

https://www.tsubasa-note.blog/entry/last-modified-customize/

 

電脳TIMES様

https://www.denno-times.com/entry/2018/11/18/000906

 

TRY SOMETHING NEW様

https://utautan.hatenablog.com/entry/2018/05/07/120000

ありがとうございました。