今回は、はてなブログで「ページトップへ戻るボタンを導入する方法についてまとめてみます。
カスタマイズ環境
使用テーマ | Brooklyn |
---|---|
はてなブログ | はてなブログPro |
上記は、私のカスタマイズ環境です。
今回のコードは他の環境でも導入可能だと思います。また、はてなブログProでない方でも、レスポンシブにすればスマホでも利用することができます。
スマホ画面の「複合メニューバー」
「ページトップへ戻る」ボタンを導入する
それでは、私が行った「ページトップへ戻る」ボタンの導入手順を順番に整理してみます。
(1)「HTMLとJavaScript」のコードを貼る
はじめに「ページトップへ戻る」ボタンの「HTMLとJavaScript」のコードを貼ります。
〈貼り付けるコード〉
〈貼り付ける場所〉
ダッシュボードの「デザイン」>「カスタマイズ」>「フッタ」
〈矢印マークの変更〉※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コードを貼ります。
〈貼り付けるコード〉
〈貼り付ける場所〉
〈貼り付ける場所〉
ダッシュボードの「デザイン」>「カスタマイズ」>「デザインcss」
はじめこのコードを設置した際、他のコードの相性なのか「ページトップへ戻る」ボタンのサイズが小さすぎたので「font-size: 500%;」を追記しサイズを指定しました。
「font-size: 500%;」
ブラウザの文字基準サイズに対して500%の値に設定。この数字を変えることで「ページトップへ戻る」ボタンのサイズを変更することができます。
またコードの次の部分の数字を変更するで、「ページトップへ戻る」ボタンを表示する位置を変更できます。
(3)WEBアイコンフォント「Font Awesome」のコードを貼る
最後にWEBアイコンフォントのコードを貼り付けます。今回は以下のコードに変更して「head」に貼り付けることにしました。
〈貼り付けるコード〉 ※2017/5/8現在
〈貼り付ける場所〉
ダッシュボードの「設定」>「詳細設定」>「headに要素を追加」
※すでに同じコードが貼ってある場合は、改めて貼る必要はありません。
これで「ページトップへ戻る」ボタンの設置は完了です。
スマホ画面に「ページトップへ戻る」ボタンを導入する
テーマをレスポンシブで使用している場合は、上記の設定でスマホ画面にも「ページトップへ戻る」ボタンが表示されるようになります。
もし、レスポンシブでない場合は、次の位置にコードを貼ることでスマホ画面でも表示することができます。(※はてなブログProの場合)
〈貼り付ける場所〉
ダッシュボードの「設定」>「デザイン」>「スマートフォン」>「フッタ」
〈貼り付けるコード〉
(1)「HTMLとJavaScript」のコード、(2)「ページトップへ戻るボタンデザインCSSコード」を順番に貼り付けます。その際(2)のコードは以下のようにコードの上に<style>、下に</style>のタグを付けます。
これでレスポンシブで使用していないスマホ画面にも「ページトップへ戻る」ボタンを標示することができます。
ただ、スマホ画面の「ページトップへ戻る」ボタンは「複合メニューバー」にもあるので、「複合メニューバー」を使用する場合は必要ないかもしれません。
「ページトップへ戻る」ボタンを導入する方法は以上です。