しあわせ情報室

辞書と能率手帳好きが書く、しあわせのための知識がテーマのブログです。

人気記事
中学生 国語辞典 比較 おすすめ
NOLTY 能率手帳1 おすすめ
BMW  アクティブツアラー F45 218i
一流スポーツ選手27人の親の事例集

はてなブログのテーマ「Minimalism」のカスタマイズ - その2(更新日表示、上に戻るボタン)

はてなブログのテーマ「Minimalism」のカスタマイズ - その1(タイトルまわり、見出し、囲み枠、引用の背景)」にある内容以外のカスタマイズのメモです。

設定のため、「ダッシュボード」以下の次の所にコードを追記しています。

・「設定」>「詳細設定」の「headに要素を追加
・「デザイン」>「カスタマイズ」>「記事」の「記事下」
・「デザイン」>「カスタマイズ」>「フッタ
・「デザイン」>「カスタマイズ」>「デザインCSS
(※2020.4.6 現在の設定)

 

【2020.9.14 追記】
デザインテーマを「SOHO」に変更。 更新日の表示と上に戻るボタンは以下の設定を使用中。

 

更新日の表示

 

・「headに要素を追加」に以下を追記

<!--「jQuery」参照URL-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--「Font Awesome」参照URL-->
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

 

・「記事下」に以下を追記

<!--[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.kendenblog.com/sitemap.xml';
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>

https://www.kendenblog.comのところを設定するブログのアドレスに

 

・「デザインCSS」に以下を追記

.lastmod {
background-color: transparent;
padding: 5px 0px;
text-decoration: none;
font-size: 15px;
display: inline;
margin-left: 0px;
color: #888888;
}
.lastmod::before {
margin-right: 5px;
margin-left: 10px;
padding-left: 3px;
font-family: "Font Awesome 5 Free";
font-weight: bold;
content: '\f2f1';
}
.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;
}

こちらのtomoさんのブログに学びました。アイコンの種類はf2f1の部分で設定できます。

【コピペOK】【はてなブログ】更新日付を自動表示したい!設定方法を解説^^

 

上に戻るボタン」を右下に表示

 

・「headに要素を追加」に更新日を表示と同じ内容を追記

・「フッタ」に以下を追記

<div id="page-top">
<a id="move-page-top"><i class="fa fa-chevron-circle-up fa-3x"></i></a>
</div>
<script>
$(window).scroll(function(){
var now = $(window).scrollTop();
if(now > 200){
$("#page-top").fadeIn("slow");
}else{
$("#page-top").fadeOut("slow");
}
});
$("#move-page-top").click(function(){
$("html,body").animate({scrollTop:0},"slow");
});
</script>

 

・「デザインCSS」に以下を追記

#page-top {
display:none;
position:fixed;
right:10px;
bottom:20px;
margin: 0;
padding: 0;
text-align:center;
}
#move-page-top{
color:rgba(0,0,0,0.4);
text-decoration:none;
display:block;
cursor:pointer;
}
#move-page-top:hover{
color:rgba(0,0,0,0.6);
}
@media only screen and (min-width: 400px){
#page-top{
right:35%;
margin-right: -450px;
}
}

fa-chevron-circle-upでアイコンの種類、3x でアイコンの大きさ、35% のところで位置が設定できます。

こちらのトモノリさんのブログに学びました。

はてなブログで超簡単に「トップページに戻る」ボタンを設置する方法 - はてぶ丸

以上、カスタマイズの記録と情報まで。

 

>>>おすすめの本のチェックはこちら!!