沖縄移住から名古屋移住のweb人アフィリエイト雑記

沖縄に移住していたが、故あって名古屋へ移住したカップルがアフィリエイトでダブルフリーランスを目指すための雑記

はてなブログカスタマイズ トップに戻るを簡単に設置する

このブログを開設した時に行ったカスタマイズを紹介いたします。

記事が長くなるとページをスクロールして下の記事内容を見ますが,ページの下の方に行くとページトップへ一気に戻りたくなります。

そんな時「ページのトップに戻る」ボタンがあれば解決します。

 

使用したテーマははてなブログテーマで一番人気がある「Brooklyn」です。

設置は記事のフッタ部分に

 設置はデザイン⇨カスタマイズ⇨フッタに追加します。

参考にさせていただいた方は

demacassette2.hateblo.jp

ありがとうございました

<div id="page-top">
<a id="move-page-top"><i class="fa fa-hand-o-up fa-3x">TOPへ戻る</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>

 

Font Awesomeで矢印アイコン

矢印は「Font Awesome」から持ってきました。

fontawesome.io

 

 

サイトに移動し「Icon」タブをクリックし移動します。

 

 

 

検索は「arrow」もしくは「up」で探してお好みのアイコンを選んで下さい。

 

指の矢印      私は fa fa-hand-o-up を利用しました。

<i class="fa fa-hand-o-up" aria-hidden="true"></i>

aria-hidden="true"の値を変更すれば大きさが変更できます。

1x 〜 6xで設定できます

私は3xを選択し文字を入れています。

 

アイコンだけで良い場合は文字を入れなければOKです。

その時は大きさを5xにすると大きくなるので見やすくなります。

<i class="fa fa-arrow-up" aria-hidden="5x"></i>

 

Font Awesomeを使用するには,ダッシュボード ⇨ 設定 ⇨ 詳細設定 ⇨headに要素を追加 に下記を追加すればOKです。

 

 

はてなブログ標準のアイコンもある

はてなブログにも標準でアイコンフォントがありますので,それを利用するのも良いかと思います。

 

戻る

 

shirokai.hatenablog.com

 

 

affiliate-couple.hatenablog.com

 

 

デザインCSSへの追記

色やマウスを乗せた時のアクションなどを設定します

デザイン ⇨ カスタマイズ ⇨ デザインCSSへの追記

 

/*TOPに戻る*/
#page-top {
display:none;
position:fixed;
right:10px;
bottom:20px;
margin: 0;
padding: 0;
text-align:center;
}
#move-page-top{
color:#B01C1C;
text-decoration:none;
display:block;
cursor:pointer;
}
#move-page-top:hover{
color:#E59423;
}
@media only screen and (min-width: 400px){
#page-top{
right:50%;
margin-right: -450px;
}
}

 

カラー変更を2ヶ所行いました。

color:#B01C1C;

color:#E59423;

通常の色とマウスを乗せた時の色です。

 

まとめとして

長い記事は最初にサッと流し読みし,興味があれば最初から読みたいものです。

ページトップに戻りたい時,いちいちスクロールバーを操作するのは面倒です。

一気に戻りたいのが人の常ですね。

 

「ページトップに戻る」ボタンがあれば訪問者もニッコリ,もう一度詳しく読んでくれます。

設置は難しいものではありませんので,ぜひ設置して下さい