こんにちは、つばさ（@tsubasa123）です。
すべてのカスタマイズをオリジナルにするという目標に向けて一歩ずつ頑張っております。今日は簡単な奴、ページのトップへ戻るボタンを自作しました。
とりあえず全部コピペでいけるようにしております。まだ導入していない方、よろしければお試しください。
設置は基本的にはコピペだけ
PC、スマホ（Pro契約が必要）の両方に対応しています。どちらもダッシュボードからコピペしていただければ、ある程度スクロールしていくと、このページの右下にあるようなボタンが出てきます。
こんなやつです。
HTMLとJavaScriptの追記
<div id="page-top-area"> <a id="page-top-button"><i class="blogicon-chevron-up fa-3x"></i></a> </div> <script> (function($) { $(function() { var $w = $(window), $pageTopArea = $('#page-top-area'), isShow = false; setInterval(function() { if ($w.scrollTop() > 500) { if (!isShow) { isShow = true; $pageTopArea.fadeIn(); } } else { if (isShow) { isShow = false; $pageTopArea.fadeOut(); } } }, 1000 / 30); $('#page-top-button').click(function(){ $('html, body').animate({scrollTop:0}, 'slow'); }); }); })(jQuery); </script>
上記のHTMLとJavaScriptを「デザイン > カスタマイズ > フッタ」に追記してください。「デザイン > カスタマイズ > ヘッダ」でも動作はしますが、フッタに入れた方がページの読み込みの邪魔をしなくなるのでこちらの方が無難だと思います。
はてなブログProを契約している方は、「デザイン > スマートフォン > フッタ」に追記すればスマホサイトでもボタンが表示されるようになります。
どちらを行う場合でも、作業される際にはバックアップを作成して、失敗しても元に戻せるようにしてください。
CSSの追記
/* ページトップへ戻るボタン */ #page-top-area { display: none; position: fixed; right: 20px; bottom: 20px; margin: 0; padding: 0; text-align: center; } #page-top-button { color: rgba(0,0,0,0.6); text-decoration: none; display: block; cursor: pointer; } #page-top-button:hover { color: rgba(0,0,0,0.95); }
上記のCSSを「デザイン > カスタマイズ > デザインCSS」に追記してください。
また、本カスタマイズではWEBフォントアイコンを利用していますので、他のカスタマイズで利用していない方は
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");
上記もデザインCSSに追記してください。これは他のカスタマイズでも使われている可能性があるので、共通して行われる設定として、入力欄の上の方に追記しておくと後で管理が楽になるかと思います。
<style> /* ページトップへ戻るボタン */ #page-top-area { display: none; position: fixed; right: 20px; bottom: 20px; margin: 0; padding: 0; text-align: center; } #page-top-button { color: rgba(0,0,0,0.6); text-decoration: none; display: block; cursor: pointer; } #page-top-button:hover { color: rgba(0,0,0,0.95); } </style>
スマホ対応の場合は、「デザイン > スマートフォン > ヘッダ > タイトル下」に追記しますが、上記の<style>と</style>で囲れたものを追記してください。PCと同じコードを追記するとCSSとして認識されず、そのまま表示されてしまいますので注意が必要です。
どちらの場合もバックアップはお忘れなく。
細かい調整はCSSを修正してどうぞ
別段目立たせるものでもないので無難に黒い矢印アイコンにしていますが、色とか表示させる位置はCSSを調整してもらえれば変更可能です。
色は、color: rgba(0,0,0,.6);の部分を変更してください。色の指定方法については割愛します。こちらのサイトとかわかりやすいので参考にどうぞ。
表示位置に関しては、right: 20px;で右端からの位置を、bottom: 20px;で下端からの位置を調整できます。どちらも0にすると右下にぴったりとくっつくようになります。
さいごに
まずは肩慣らしということで簡単なやつから作りました。作るのは簡単なんですが、記事にするのが大変。まぁこれも練習ということで。次は見出しあたりを攻めていく予定です。
ではでは、最後までお付き合いいただきありがとうございました。