最近、当サイトのデザインテーマを変えたので、前から気になっていた「上に戻る」ボタンもちょっと手を加えました。
「上に戻る」ボタンを設置
以前「上に戻る」ボタンを設置した時の記事がこちら（↓）。
Font Awesomeの使い方は次のサイトさんがとても参考になります。
今回変えた箇所
・ボタンのサイズ
・ボタンの色
ボタンのサイズ
フッタにあるソースコード内で以下の部分を変えます。
今まで使用していたコード
<div id="page-top">
<a id="move-page-top">
<i class="fas fa-chevron-circle-up fa-5x my-color">
</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");
});
</script>
<div id="page-top">
<a id="move-page-top">
<i class="fas fa-chevron-circle-up fa-5x my-color">
</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");
});
</script>
上記コード内の赤い部分がサイズを表しています。
5xではちょっと大きい感じがしていたので
fa-3xに変更し、ボタンサイズを少し小さめにしました。
ボタンの色
今まではFont Awesomeにあるアイコンをそのまま使っていたので、矢印部分は白、その背景のサークルはグレーでした。
今回は、背景をサイトで使用している色の一つと同じにしました。
①上記コード内の水色部分
iタグにclass名を書き加える（名前は自分で好きなものを決める）
②①で決めたclass名に対して、CSSで色を指定する
当ブログではこんな感じ（↓）
.my-color {color:#996655; }
これで、サイズと色の変更は完了です。
