Someday Somewhere

A little something to say in my everyday life

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

f:id:tsukisai:20190320080235j:plain

自分のブログでも他人のブログでも、やっぱり「上に戻る」ボタンがあったほうが便利、ということで設定方法を検索。 これまたやっぱりだが、説明してくれているサイトがたくさん見つかった。 本当に助かります。

参考にさせて頂いたサイト

検索して出てきたサイトの幾つか(↓)。

azanaerunawano5to4.hatenablog.com

hatebumaru.hatenablog.com

www.task-notes.com

当ブログでやったこと

1)FontAwesomeを使えるようにする

「上に戻る」ボタンのアイコンにFontAwesomeを使う場合、FontAwesomeを使えるようにする必要があります。

そこで、ブログ管理画面→「設定」⇢「詳細設定」へと進み、「headに要素を追加」という欄に以下のコードを書き込みます。

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

 上記コードはFontAwesomeの新バージョンと旧バージョンです。 この件については過去記事を参照してください。(見出しと目次をカスタマイズ - Someday Somewhere

 2)フッタにコードを書き込む

ブログ管理画面⇢「デザイン」⇢「カスタマイズ」⇢「フッタ」に下記コードを書き込みます。

<div id="page-top">
<a id="move-page-top"><i class="fa fa-chevron-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");
});
</script>

3)cssにコードを書き込む

管理画面⇢「デザイン」⇢「カスタマイズ」⇢「デザイン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:40%;
margin-right: -450px;
}
}

 使っているテーマによって、アイコンの表示位置がずれる場合があります。 その場合は、cssに書き込んだコードの一番下にある「right:40%」等の数値を変えてやってみるといいと思います。

-追記-

この記事は2018年11月14日に書き直しました。 サイトマップを作ろうと思い、過去記事をざっと見始めたのですが、リンク切れがあったり、自分で読んでもいまいち意味不明みたいな箇所もあったので。 特にブログのカスタマイズに関する記事は、参考にさせて頂いたサイトさんのリンクを貼るだけだと、後から読み返した時に、実際に自分のブログではどうやったのかがわからなくなってしまっていたり、リンク先のサイトさん自体がなくなっていたりします。 参考にさせて頂いたサイトさんのリンクを貼ると共に、コードやカスタマイズの手順等もやっぱり書いておいたほうがいいようですね。