MuLife

MuLife

楽天とAmazonのお得情報を発信

MuLife

更新日を表示させる。はてなブログ

SPONSORED LINK


はてなブログカスタマイズ

参考サイト

www.itjigoku.com ありがとうございます。

更新日のコード追加場所は3つ

コードを追加する場所は3つあります。

カスタマイズから記事下にコードを追加

カスタマイズからCSSにコードを追加

設定から詳細設定のheadに要素を追加にコードを追加

記事下のコード記述場所(コピペする場所)

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

はてなブログカスタマイズ はてなブログカスタマイズ はてなブログカスタマイズ



記事下に追加するコード
<!--日付更新-->
<!--[if lt IE 9]>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<!--<![endif]-->
<script>
/*
 * Show lastmod for Hatena Blog v1.0.0
 * 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,
_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 = 'サイトマップの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.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>


 上記コードの「サイトマップのURL」に自分のサイトマップのURLを入れてください!
サイトマップのURLは自分のブログアドレスの後ろにsitemap.xmlを追加します。

例えばこのブログのサイトマップのURLは
https://mulife.hatenablog.comの後ろに/sitemap.xmlを追加し、 https://mulife.hatenablog.com/sitemap.xmlとなります。

ブラウザのアドレスバーに自分のサイトマップのURL入れるとよくわからないコードが表示されるので 一度確認してみるといいと思います。

表示されない場合は恐らくサイトマップのURLが間違っていると思います。

 間違っても''は消さないでください!
url = 'あなたのサイトマップのURL';
必ず''の間にURLを入れてくださいね。

CSSコードの記述場所(コピペする場所)

デザインカスタマイズ{}デザインCSS

はてなブログカスタマイズ はてなブログカスタマイズ

CSSに追加するコード

下記コードをCSSの場所へコピペして下さい

/*更新日表示*/
.lastmod {
color: #FFF;
background-color: #EB8686;
border-radius:5px; /*背景角を丸くする*/
padding: 5px 6px;
text-decoration: none;
font-size: 100%;
display: inline;
margin-left: 10px;
}
.lastmod::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
content: '\f021';
}
.entry-date a {
padding: 5px 6px !important;
}
.entry-date a::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
content: '\f017';
}


背景を丸くするコード
border-radius:5px; /*背景角を丸くする*/を追加していますが、必要ない方はこの行を消してもらって大丈夫です。

もしくは/**/で囲ってコメントアウトしても問題ありません。

背景色の変更は上記コードの
background-color: #EB8686;
の部分を変更すればお好みの背景色になります。 #EB8686の部分ですね。
この値を変更する事で自分の好きな色に変更できます。

こちらのサイトで色を参考にしてお好みの色に変更してください。
www.colordic.org
その他の細かい設定は一切行っていません。
背景を丸くするコードを入れて色を変更しただけです。
色々表示の設定を変更したいという方は触ってみてもいいと思います。

headに要素を追加するコード場所(コピペする場所)

設定詳細設定headに要素を追加
はてなブログカスタマイズ はてなブログカスタマイズ はてなブログカスタマイズ

headに要素を追加するコード
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">


このコードは入れなくても更新アイコンは表示されましたが、 アイコンが表示されないという方はこのコードを追加する事でアイコンが表示されるようになると思います。
はてなブログカスタマイズ
以上、更新日を表示させる方法でした。