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

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

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


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

コメント

  1. hentekomura より:

    デザインCSSのところには すでになんか入っているのですが その下に?いっしょに入れちゃってよいのでしょうか? お忙しい所スミマセン 教えてください 

  2. b204638 より:

    雷理 (id:hentekomura)さん、コメントありがとうございます。
    デザインCSSのところに入っているコードは、(多分)使っているテーマのコードか何かだと思います。それは残して、その下にコードを貼れば大丈夫です。

  3. hentekomura より:

    即答ありがとうございますっ!ハイ あとでやってみます♪

  4. hentekomura より:

    出来ました ありがとうございました☆

  5. nariagarimans より:

    最近、HTMLの勉強を始めました。まだCSSにたどり着いてないのですが、きっと理解できるようになるように勉強します!

  6. b204638 より:

    雷理 (id:hentekomura)さん、無事に導入できたようで良かったです。矢印マークを変える方法を追記したので、良ければ変えてみてください。

  7. b204638 より:

    プロサラ育成所 所長 (id:nariagarimans)さん、コメントありがとうございます。経理スキルやビジネススキルに加え、HTMLも勉強されているんですね!私もHTMLやcssは見よう見まねなので0からは作れませんが、ちょっと手を加えるくらいは何とかなるみたいです。

  8. hentekomura より:

    紫部分 変えてみたら消えてしまって もとに戻しても 上のコピー入れても 消えてしまいました ハテ??

  9. b204638 より:

    雷理 (id:hentekomura)さん。昨日から変えたところがいくつかあってそのせいかもしれません。
    (1)3行目「blogicon-chevron-up fa-3x」⇒「fa fa-chevron-up」
    (2)下から5行目「font-size: 100%;」⇒「font-size: 500%;」
    (3)4.6.3 ⇒ 4.7.0
    あと(1)の「fa fa-chevron-up」はfaが2つあります。片方消していないでしょうか?

  10. hentekomura より:

    何度もスミマセン 
    結局(1)(2)をコピーして貼り直しましたが やっぱり出ません 私 なんかヤッチャッテいるのでしょうね 残念

  11. b204638 より:

    雷理 (id:hentekomura)さん。
    今、自分の設定にこの記事のコードをそのままコピペしてみたのですが、ちゃんと動作しました。もしかしたら他のカスタマイズのコードと干渉しているのかも。別のカスタマイズされませんでしたか?

  12. hentekomura より:

    別カスタマイズはしてないです 
    お手数かけてしまって ほんとうにスミマセン もう見捨ててくだい 
    あ~ きのうに戻りたい ww

  13. b204638 より:

    雷理 (id:hentekomura)さん。
    一旦、今回のコードを全部削除して保存し、その後、また貼りなおしてみると直るかもしれないですよ。
    私も、いろんなカスタマイズで何度か貼りなおしたことがあります。

  14. hentekomura より:

    はぁい わかりました またやってみます 
    ありがとうございました☆

タイトルとURLをコピーしました