映画ときどき海外ドラマ

テレビ放送や動画配信など、おうちで映画を楽しむブログ

【はてなブログ カスタマイズ】上に戻る/ホームに戻るボタンが超絶便利だった!

【はてなブログ カスタマイズ】上に戻る/ホームに戻るボタン、TOPに戻る

わたしは当ブログの他に、WordPressで【美容・健康系サイト】も運営しています。

WordPressでは、1クリックでページの上部に移動できる、「上に戻る」ボタン/「TOPに戻る」ボタンが初期設定でついています。

 

【はてなブログ カスタマイズ】上に戻る/ホームに戻るボタン

 

webサイトでは当たり前のように見かけるボタンですが、はてなブログにこの機能はないんですよね。

 

当ブログの記事は、ただでさえ長文が多め。最近はスマホ経由の読者さんが増えているので、いちいちスクロールさせるのは申し訳なく感じていました。

そこで、「上に戻る」ボタンを実装できるカスタマイズについて、調べました。

 

「上に戻る」ボタン/「TOPに戻る」ボタンを設置する方法

  「上に戻る」ボタンについては、色々なサイトさんで紹介されています。ボタンのデザインもカスタマイズのコードもさまざま。次のような観点で選びました。

  • 読者さんがひとめで機能がわかる、利便性の良さ
  • 表示速度にできるだけ影響を与えない

 

 参考にさせていただいたのは、「IMUZA.com」さんです。

www.imuza.com

ありがとうございました!!

 

 素晴らしいのは、コードの中に「jQuery 」が含まれてないこと。「jQuery 」は外部のHTMLを読みこむコードなので、これがあると、わずかながら表示速度が遅くなってしまいます。

また、他にバージョン違いの「jQuery 」のコードを使ったカスタマイズをしていると、調整に手間がかかることになります。

 

 

実際にカスタマイズを実装してみます。コードは、「IMUZA.com」さんのページでご確認ください。

フッタにコードを入力する

① 「はてなブログ用」と書かれた、いちばん下のコードを「フッタ」に貼ります。

「管理画面」⇨「デザイン」⇨「カスタマイズ」⇨「フッタ」

デザインCSSにコードを入力する

② 「CSS」と書かれた、「はてなブログ用」のひとつ上にあるコードを、「デザインCSS」に貼る。

「管理画面」⇨「デザイン」⇨「カスタマイズ」⇨「デザインCSS」

設置後の画面の見え方:ホームに戻るボタンが超絶便利だった!

 コード設置後の、上に戻るボタン、ホームに戻るボタンの見え方です。

パソコンから見た場合

 

【はてなブログ カスタマイズ】上に戻る/ホームに戻るボタン

 

スマホから見た場合 

 

 

はてなブログカスタマイズ、TOPに戻るホームに戻る、スマホ

 

 実は、ボタン右側の「ホームに戻る」ボタンが、超絶便利です。通常なら、

「上に戻る」⇨「トップ」

 と2つの行程を経ないと、ホーム画面には戻れません。

でも、「ホームに戻る」ボタンがあると、どの記事からも1クリックでトップページに移動できます。これで、読者さんの利便性が大幅にアップします。