思考は現実化する

自分の潜在意識を書き換えるために、自分が学んだ事を整理しまとめています。

「ページトップへ戻る」ボタンを導入する方法【はてなブログ カスタマイズ忘備録(7)】

f:id:b204638:20180407020119j:plain

 

 今回は、はてなブログで「ページトップへ戻るボタンを導入する方法についてまとめてみます。  

 カスタマイズ環境 

使用テーマ Brooklyn
 はてなブログ はてなブログPro

 上記は、私のカスタマイズ環境です。

今回のコードは他の環境でも導入可能だと思います。また、はてなブログProでない方でも、レスポンシブにすればスマホでも利用することができます。

スマホ画面の「複合メニューバー」

「ページトップへ戻る」ボタンを導入する

それでは、私が行った「ページトップへ戻る」ボタンの導入手順を順番に整理してみます。

(1)「HTMLとJavaScript」のコードを貼る

はじめに「ページトップへ戻る」ボタンの「HTMLとJavaScript」のコードを貼ります。

 

〈貼り付けるコード〉 

<!-- 「ページトップへ戻る」ボタン -->
<div id="page-top-area">
 <a id="page-top-button"><i class="fa fa-chevron-up"></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>

 

〈貼り付ける場所〉

ダッシュボードの「デザイン」>「カスタマイズ」>「フッタ」

〈矢印マークの変更〉※2017/5/8追記

赤字部分fa-chevron-up」のコードを変えると、矢印マークを変更することができます。お好みで変えてみてはいかがでしょう?

 fa-chevron-up
 fa-chevron-circle-up
 fa-arrow-circle-o-up
 fa-arrow-circle-up
 fa-hand-o-up
 fa-caret-up
 fa-caret-square-o-up
 fa-arrow-up
 fa-long-arrow-up
 fa-caret-square-o-up
 fa-angle-double-up
 fa-angle-up 

 
(2)「ページトップへ戻るボタンデザインCSSコード」を貼り付ける

続いて「ページトップへ戻る」ボタンのデザインを決める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;
 font-size: 500%;
}
#page-top-button:hover {
 color: rgba(0,0,0,0.95);
}

〈貼り付ける場所〉 

〈貼り付ける場所〉

 ダッシュボードの「デザイン」>「カスタマイズ」>「デザインcss」

 

はじめこのコードを設置した際、他のコードの相性なのか「ページトップへ戻る」ボタンのサイズが小さすぎたので「font-size: 500%;」を追記しサイズを指定しました。

font-size: 500%;

ブラウザの文字基準サイズに対して500%の値に設定。この数字を変えることで「ページトップへ戻る」ボタンのサイズを変更することができます。 

 

またコードの次の部分の数字を変更するで、「ページトップへ戻る」ボタンを表示する位置を変更できます。

 right: 20px;
bottom: 20px;
margin: 0;
padding: 0;
 
(3)WEBアイコンフォント「Font Awesome」のコードを貼る

最後にWEBアイコンフォントのコードを貼り付けます。今回は以下のコードに変更して「head」に貼り付けることにしました。

〈貼り付けるコード〉 ※2017/5/8現在

<!-- WEBアイコンフォント「Font Awesome」 -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

〈貼り付ける場所〉

ダッシュボードの「設定」>「詳細設定」>「headに要素を追加」

 ※すでに同じコードが貼ってある場合は、改めて貼る必要はありません。 

これで「ページトップへ戻る」ボタンの設置は完了です。

 

スマホ画面に「ページトップへ戻る」ボタンを導入する

テーマをレスポンシブで使用している場合は、上記の設定でスマホ画面にも「ページトップへ戻る」ボタンが表示されるようになります。

もし、レスポンシブでない場合は、次の位置にコードを貼ることでスマホ画面でも表示することができます。(※はてなブログProの場合)

 

〈貼り付ける場所〉

ダッシュボードの「設定」>「デザイン」>「スマートフォン」>「フッタ」

 

 〈貼り付けるコード〉

(1)「HTMLとJavaScript」のコード、(2)「ページトップへ戻るボタンデザインCSSコード」を順番に貼り付けます。その際(2)のコードは以下のようにコードの上に<style>、下に</style>のタグを付けます。 

<style>

※ここに(2)「ページトップへ戻るボタンデザインCSSコード」を貼り付け

</style>

これでレスポンシブで使用していないスマホ画面にも「ページトップへ戻る」ボタンを標示することができます。

ただ、スマホ画面の「ページトップへ戻る」ボタンは複合メニューバー」にもあるので、複合メニューバー」を使用する場合は必要ないかもしれません。

 


 「ページトップへ戻る」ボタンを導入する方法は以上です。