読者です 読者をやめる 読者になる 読者になる

思考は現実化する

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

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

f:id:b204638:20170507155828j:plain

 

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

 カスタマイズ環境 

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

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

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

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

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

今回は、つばさ(@tsubasa123)さんの以下のサイトを参考に「ページトップへ戻る」ボタンを導入させていただきました。

www.tsubasa-note.blog

 

 ここからは、私が行った導入手順を順番に整理してみます。

(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コードを貼ります。 

はじめこのコードを設置した際、他のコードの相性なのか「ページトップへ戻る」ボタンのサイズが小さすぎたので、元のコードから1か所だけ赤字部分を追記しサイズを指定しました。

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

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

〈貼り付けるコード〉 

/* ページトップへ戻るボタン */
#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」
(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>

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

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

 


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