ブログ運営について

ブログの使い方などのメモ

はてなブログにページトップへ戻るボタンをつけよう!

スポンサーリンク

ブログ上である程度下にスクロールした際にスートとフェードインしてクリックするとページのトップへ戻るボタンを設置してみます。

http://cdn-ak.f.st-hatena.com/images/fotolife/A/AquaNote/20141128/20141128141413.png

 まずはjQueryの設置とボタン表示用のHTMLを「フッタ」に配置します。

※フッタに設置する理由は、ページの描画処理が上から順に行われるためページの表示速度になるべく影響を与えないためです。

 

 

はてなブログの管理画面から

「デザイン」→ 「カスタマイズ」→ 「フッタ」

 

http://cdn-ak.f.st-hatena.com/images/fotolife/A/AquaNote/20141128/20141128143740.png

フッタの入力エリアに以下のコードを貼付けます。

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script>
$(function () {
   /** ページトップ処理 **/
   // スクロールした場合
   $(window).scroll(function() {
       // スクロール位置が200を超えた場合
       if ($(this).scrollTop() > 200) {
           $('#pagetop').fadeIn();
       } else {
           // ページトップへをフェードアウト
           $('#pagetop').fadeOut();
       }
   });

   // ページトップクリック
   $('#pagetop').click(function() {
       // ページトップへスクロール
       $('html, body').animate({
           scrollTop: 0
       }, 300);
       return false;
   });
})(jQuery);
</script>

<a id="pagetop" href="#top" class="page_top" style="display: none;">ページTOPへ ▲</a>

 

はてなブログの管理画面から

「デザイン」→ 「カスタマイズ」→ 「デザインCSS」を選択。(フッタの下にあります)

 

http://cdn-ak.f.st-hatena.com/images/fotolife/A/AquaNote/20141128/20141128144059.png

 

デザインCSSの入力エリア最下部に以下のコードを貼付けます。

 

/* ページトップへ戻るボタン */
#pagetop {
    position:fixed;
    bottom:10px;
    right:10px;
    padding:10px 20px;
    color:#fff;
    font-size:20px;
    text-decoration:none;
    background:#000;
}

/* ページトップへ戻るボタン:ホバー時 */
#pagetop:hover {
    background:#e74c3c;

 

背景色を変える場合はCSS
background:以降の値をお好みの色に変更すれば色を変えることができます。

文字色を変える場合は
color:以降の値をお好みの色に変更すれば色を変えることができます。

※お好みの色はこちらから探すと便利です。

WEB色見本 原色大辞典 - HTMLカラーコード

 

※右下に表示する場合はCSS
bottom:10px;とright:10px;のピクセル値を変更することで変更可能です。(15pxなどなどお好みで!)

※左下に表示する場合はCSS
right:10px;をleft:10px;と rightをleftに変更することで変更可能です。(ピクセル値はお好みで!)

「ページTOPへ ▲」の文字を変えたい場合はフッタのHTMLを

aタグ内の「ページTOPへ ▲」をお好みの文字に変更して下さい。