わたしは当ブログの他に、WordPressで【美容・健康系サイト】も運営しています。
WordPressでは、1クリックでページの上部に移動できる、「上に戻る」ボタン／「TOPに戻る」ボタンが初期設定でついています。
webサイトでは当たり前のように見かけるボタンですが、はてなブログにこの機能はないんですよね。
当ブログの記事は、ただでさえ長文が多め。最近はスマホ経由の読者さんが増えているので、いちいちスクロールさせるのは申し訳なく感じていました。
そこで、「上に戻る」ボタンを実装できるカスタマイズについて、調べました。
「上に戻る」ボタン／「TOPに戻る」ボタンを設置する方法
「上に戻る」ボタンについては、色々なサイトさんで紹介されています。ボタンのデザインもカスタマイズのコードもさまざま。次のような観点で選びました。
- 読者さんがひとめで機能がわかる、利便性の良さ
- 表示速度にできるだけ影響を与えない
参考にさせていただいたのは、「IMUZA.com」さんです。
ありがとうございました！！
素晴らしいのは、コードの中に「jQuery 」が含まれてないこと。「jQuery 」は外部のHTMLを読みこむコードなので、これがあると、わずかながら表示速度が遅くなってしまいます。
また、他にバージョン違いの「jQuery 」のコードを使ったカスタマイズをしていると、調整に手間がかかることになります。
実際にカスタマイズを実装してみます。コードは、「IMUZA.com」さんのページでご確認ください。
フッタにコードを入力する
① 「はてなブログ用」と書かれた、いちばん下のコードを「フッタ」に貼ります。
「管理画面」⇨「デザイン」⇨「カスタマイズ」⇨「フッタ」
デザインCSSにコードを入力する
② 「CSS」と書かれた、「はてなブログ用」のひとつ上にあるコードを、「デザインCSS」に貼る。
「管理画面」⇨「デザイン」⇨「カスタマイズ」⇨「デザインCSS」
設置後の画面の見え方：ホームに戻るボタンが超絶便利だった!
コード設置後の、上に戻るボタン、ホームに戻るボタンの見え方です。
パソコンから見た場合
スマホから見た場合
実は、ボタン右側の「ホームに戻る」ボタンが、超絶便利です。通常なら、
「上に戻る」⇨「トップ」
と2つの行程を経ないと、ホーム画面には戻れません。
でも、「ホームに戻る」ボタンがあると、どの記事からも1クリックでトップページに移動できます。これで、読者さんの利便性が大幅にアップします。