un

un

はてなブログの使い方をメインに書いています

はてなブログに「上に戻るボタン」を設置する方法

【スポンサーリンク】

f:id:un_machi:20200304191443j:plain

ページを下まで閲覧してから、一番上まで戻る時に、スクロールを繰返すのが超面倒!

そんな問題を解決する為に「上に戻るボタン」を設置しました。
「上に戻るボタン」が有れば、ワンクリックで一瞬にして、ページ上部へ戻れるので非常に快適です。


記事の参考にさせて頂いたブログは、コチラです。

account-it-dentist.hatenablog.com

「上に戻るボタン」を設置する方法

ボタンを設置するには
「headに要素を追加」「フッタ」「デザインCSS
上記3ヵ所に、コードをコピペするだけでOKです。

「headに要素を追加」へのコピペ

ダッシュボード>設定>詳細設定より「headに要素を追加」へ、以下2つのコードをコピペします。

「FontAwesome」を使用する為のコード

「FontAwesome」とは、ページ上にアイコンを表示させるサービスです。

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet">


JQuery」を使用する為のコード

JQuery」とは、ページに動きを付けるプログラミング言語JavaScript」を、使い易くする為のプログラムです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>


*注意点
JQuery」のバージョンが古いと「上に戻るボタン」が表示されない
(バージョン1.7.1では表示されなかった)
バージョン確認はjQuery CDNより

「フッタ」へのコピペ

ダッシュボード>デザイン>カスタマイズより「フッタ」へ以下のコードをコピペします。
下へ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」へのコピペ

ダッシュボード>デザイン>カスタマイズより「{}デザインCSS」に、以下のコードをコピペします。
マウスポインタをボタン上に載せると、ボタンの色が濃くなる仕組みになっています。

/* 上に戻るボタン関係 */
#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);
}

以上で、このようなボタンが表示されます。



「上に戻るボタン」の種類・大きさ・色の変更

「フッタ」に貼ったhtmlコード3行目、下記部分を変える

<i class="fas fa-arrow-alt-circle-up fa-5x"></i>


種類変更方法

<i class="〇〇 fa-5x"></i>
〇部分を変更する
Font Awesomeに移動し、画面左上Freeをクリックして無料で使えるアイコンを選択。
選択後画面でiタグをコピーし〇〇部に貼る。

大きさ変更方法

fa-〇x
〇部分の数字を変更する

色変更方法

iタグに好きなclass名を付け、cssで指定する。
例<i class="fas fa-arrow-alt-circle-up fa-5x .my-example"></i>
CSS】 .my-example {color: ◯◯}


詳しくは、こちらのサイト参照。
saruwakakun.com



まとめ

やっぱり「上に戻るボタン」が有ると便利ですね!
それではマタネ―
――(`・∀・´)ノシ―――!!