こんにちは！原宿にある会社でひとり情シスとしてヒトリジョーシスの暗黒卿をやっているナカムラ (@sys_nakamura) です。ようやく少しずつですがはてなブログのカスタマイズに着手することができてきたので、私のブログで手を加えた部分について情報を整理してから少しずつ記事にして備忘としています。
今回のカスタマイズは「ページ右下へのスクロールアップボタン設置」です。
スクロールアップボタンとは
記事が長くなるとページを下の方にスクロールするわけですが、だいぶ下までスクロールしているとページトップを見る際にまた上までスクロールして戻さなくてはいけません。 (PC にはキーボードの HOME キーがありますし iPhone もブラウザ上部タップで一気に戻せますが Android の Chrome には相当の機能が多分ありません)
そんな時にページ右下あたりに「トップへ戻る」ボタンが設置されているとけっこう便利です。これがスクロールアップボタンです。下のスクリーンショットがサンプルです。
今回の記事ではこのスクロールアップボタンを設置する手順について書きたいと思います。
スクロールアップボタン設置手順
基本的な手順はこちらの記事を参考にさせていただきました。
加えて今回はスマホビューにもスクロールアップボタンを設置したのでその手順も残しておきたいと思います。 (はてなブログ PRO 対応)
PC 版に設置する手順
最初に PC 版のブログへスクロールアップボタンを設置する手順を記載します。
head に以下の要素を追加する
まずははてなブログのダッシュボードから「設定」→「詳細設定」→「headに要素を追加」に以下のコードを追加します。既に Font Awesome のアイコンフォントを使っている場合には記述済みの要素があるはずなのでそちらを念のため消しましょう。
貼り付けるコード
フッタに以下のコードを追加する
上記コードを head に追加したら次ははてなブログのダッシュボードから「デザイン」→「カスタマイズ」→「フッタ」へ以下のコードを追加します。
貼り付けるコード
デザインCSS へ以下の CSS を記述する
最後にはてなブログのダッシュボードから「デザイン」→「カスタマイズ」→「デザインCSS」へ以下の CSS を記述すれば設置手順は完了です。
貼り付ける CSS
ここまでが PC 版のテーマにスクロールアップボタンを設置する手順です。
スマホ版に設置する手順
続いてスマホ版に設置する手順です。この設定を行うにははてなブログ PRO に加入している必要があります。既に head へは PC 版の設定を行い要素を追加済みの想定で手順を記載していきます。
フッタに以下のコードを追加する
スマホ版のフッタにも先ほど PC 版のフッタに追加したコードと同じものを追加します。はてなブログのダッシュボードから「デザイン」→「スマートフォン」→「フッタ」→「フッタ」に以下のコードを追加します。なお、既にフッタの中に <ins id="ssRelatedPageBase"></ins> という記述がある場合にはこの下に追加します。
貼り付けるコード
ヘッダのタイトル下に CSS を記述する
最後にはてなブログのダッシュボードから「デザイン」→「スマートフォン」→「ヘッダ」→「タイトル下」に以下の CSS を記述します。
貼り付ける CSS
以上でスマホ版にもスクロールアップボタンを設置することができます。実際に設置するとこのように表示されます。
まとめ
設置しなくても PC のキーボードや iPhone のブラウザでトップまで一気に戻ることも可能ですが、私のように Android の Chrome がメインブラウザだったり、そういったキーボードの機能を知らない方もいますので、設置しておくとサイトの機能性が向上して親切なボタンかもしれませんね。
それでは！
こんな記事も書いています