HacoLife

シンプルなデザインが好き。中古で購入した平屋をリフォームして暮らす「はこ生活」しています。

3分で完了!はてなブログにページの先頭へ戻るボタンを追加する方法

f:id:mr58n:20141021183518j:plain

はてなブログテーマ「Simple Gray」にページの先頭へ戻るボタンを追加する方法をご案内します。

縦に長いページの時、一番上に戻るのがワンクリックで済みますね!
導入はとっても簡単です♪

導入前のお願い

ここからは自己責任でお願いします。ノンカスタマイズ状態を想定してのご案内となりますので、他のカスタマイズを行っている場合は、ソースコードの挿入場所にご注意ください。

それでは、早速やってみよー!!

導入方法

f:id:mr58n:20141022115847j:plain

管理画面の左メニューから[デザイン]を選択。
カスタマイズのタブを選択し、フッタの箇所に下記のソースコードをコピペしてください。

<div id="pagetop"><a href="#header-container"><i class="fa fa-angle-up"></i></a></div>

すると下の画像のようにページ右下にページの先頭へ戻るボタンが表示されます。
これでおしまいです。

f:id:mr58n:20141022120603j:plain

カスタマイズについて

1.ボタンの表示をフェードイン・フェードアウトさせる

ページを表示させた時は非表示で、下にスクロールするとボタンがひょっこり顔を出す見せ方です。
ページの一番上にいるのにボタンを表示させても意味ないですからね。

やり方は、先ほどフッタ入力したソースコードを下に上書きしてください。

<div id="pagetop"><a href="#header-container"><i class="fa fa-angle-up"></i></a></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
(function($) {
//Page Button Show
$(function() {
var topBtn = $('#pagetop');
topBtn.hide();
//スクロールが1000に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
});
})(jQuery);
</script>

表示させるタイミングを変更したいときは、

.scrollTop() > 1000

の"1000"の値を修正すれば可能です。

もっと早く表示させたい場合は値を小さく、遅く表示させたい場合は値を大きくすれば表示タイミングが変わります。

2.ページの先頭までスルスル滑らかに移動させたい

色々なウェブサイトで導入されていますが、これも簡単に導入できます。

フッタ入力したソースコードを下に上書きしてください。

<div id="pagetop"><a href="#header-container"><i class="fa fa-angle-up"></i></a></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
(function($) {
//Page Scroll
$(function(){
$("a[href^=#]").click(function(){
var Hash = $(this.hash);
var HashOffset = $(Hash).offset().top;
$("html,body").animate({
scrollTop: HashOffset
}, 1000);
return false;
});
});
})(jQuery);
</script>

スクロールするスピードを調整した場合は、

$("html,body").animate({
scrollTop: HashOffset
}, 1000);

の"1000"の値を修正してください。

スクロールスピードを速くしたい場合は1000よりも小さく、遅くしたい場合は1000よりも大きい値に変更すればOKです。

1も2も両方取り入れたい

表示とスクロールのカスタマイズを両方導入したい場合は、下記のソースコードに上書きしてください。

<div id="pagetop"><a href="#header-container"><i class="fa fa-angle-up"></i></a></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
(function($) {
//Page Button Show
$(function() {
var topBtn = $('#pagetop');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
});

//Page Scroll
$(function(){
$("a[href^=#]").click(function(){
var Hash = $(this.hash);
var HashOffset = $(Hash).offset().top;
$("html,body").animate({
scrollTop: HashOffset
}, 1000);
return false;
});
});
})(jQuery);
</script>

ボタンのデザインを変更したい場合

f:id:mr58n:20141022124850j:plain

ボタンのデザインを変更したい場合は、フッタではなく、[デザインCSS]の欄にソースコードを追加してください。

追加するソースコードは下記になります。

/*マウスアウト時*/
[id="pagetop"] a {
background-color: #XXXXXX;
color: #XXXXXX;
}
/*マウスオーバー時*/
[id="pagetop"] a:hover,
[id="pagetop"] a:focus {
background-color:#XXXXXX;
color:#XXXXXX;
}

マウスアウト時というのはカーソルをボタンの上に乗せていない時の状態です。
反対に、マウスオーバー時というのはボタンの上にカーソルを乗せた時の状態です。
それぞれの状態でのスタイルを設定することが可能です。

background-color: #XXXXXX;

は背景色を設定します。#XXXXXXのところは好きな色のカラーコードを入力してください。

color: #XXXXXX;

は文字色、ここでは矢印の色を設定します。#XXXXXXのところは好きな色のカラーコードを入力してください。

カラーコードについては、下記サイトが参考になると思います。

カラーコード表

円のボタンを四角にしたい

ページの先頭へ戻るボタンの形を四角にしたい場合は、マウスアウト時のスタイルに【border-radius:0;】を追加してください。

/*マウスアウト時*/
[id="pagetop"] a {
border-radius:0;
background-color: #XXXXXX;
color: #XXXXXX;
}

さいごに

コピペで導入できるので、カラーコードさえ決まっていれば、すぐに導入できます。ぜひぜひ自分のサイトに合うカラーに変更してみてください!

ではでは、またー!!

スラスラわかるHTML&CSSのきほん

スラスラわかるHTML&CSSのきほん