こんにちは、もなりんです。
あなたはブログを見ていてこんなボタン見たことないですか?
そうです、「上に戻る」ボタンです。
記事の下のほうに行ってしまった時に、一気に上に戻ってくれます。
なんと便利な!
そこで、いつもどうやって設定するのか気になっていたので調べてみました。
設定したいと思っているそこのあなた!
ぜひ最後までご覧ください。手順は3つだけです。
1、headに要素を追加する
下記、コードをコピーしてください。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
次にはてなブログ側に貼り付けます。
メニューから[設定]⇒[詳細設定]⇒[headに要素を追加]を選択してください。
終わったら、忘れずに画面の一番下の『変更する』ボタンを押してくださいね。
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に追加する
下記、コードをコピーしてください。
/*上に戻る*/
#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:50%;
margin-right: -450px;
}
}
次にはてなブログ側に貼り付けます。
メニューから[デザイン]⇒[カスタマイズ]⇒[デザインCSS]に貼り付けます。
終わったら、忘れずに画面上の『変更を保存する』ボタンを押してください。
まとめ
以上で作業は終了です。
ブログのトップページや記事の下部に行った際、上に戻るボタンは出てきましたでしょうか?
自分も見やすくなるだけでなく読者も見やすくなったと思います。
これはパソコンだけでなくスマホでも表示されるので非常に便利ですよ。
参考記事
今回お世話になったのは、こちらの記事です。
ありがとうございました。