【無料はてなブログ】【カスタマイズ】上に戻るボタン【Minimalism】【Brooklyn】【表示できない】

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

これからBrooklynへ変更予定。

どちらも同じ手順でカスタマイズできる。

参考にしたサイト

aniota-alvarado.hatenablog.com

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が動作しなくなるケースもあるので、カスタマイズが落ち着いた時点で記述場所は検討。

動きの定義 [上に戻る] ボタン

デザイン > カスタマイズ > フッター

「fas fa-arrow-alt-circle-up」は種類。「fa-5x」はサイズ。

500スクロールしたら表示させる。以下の文を追加。

<!-- ページトップに戻る -->
<div id="page-top">
	<a id="move-page-top"><i class="fas fa-arrow-alt-circle-up fa-5x"></i></a>
</div>
<script>
	$(window).scroll(function(){
		var now = $(window).scrollTop();
		if(now > 500){
			$("#page-top").fadeIn("slow");
		}else{
			$("#page-top").fadeOut("slow");
		}
	});
	$("#move-page-top").click(function(){
		$("html,body").animate({scrollTop:0},"slow");
		return false;
	});
</script>

デザイン定義

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

カーソルが当たると 0.2 から 0.6 へ濃くする。以下の文を追加。

/* 上に戻るボタン関係 */
#page-top {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 10px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	z-index: 10;
}
#move-page-top {
	display: block;
	color: rgba(0, 0, 0, 0.2);
	cursor: pointer;
}
#move-page-top:hover {
	color: rgba(0, 0, 0, 0.6);
}

多くのサイトで同じ手順が記載されていたが、その通りだとうまくいかなかったので、覚え書き。

このページを参考にしてくださる方がいるようなので、少し補足。

マークの色は、rgba の左３つの数字にRGB値を指定することで変えることができる。一番右の数字は透過率。

Page移動

• ホームページへ戻る