【画像あり】はてなブログで「上へ戻る」ボタンを設置する方法

スポンサーリンク

はじめに

当ブログにお越し頂き恐悦至極に存じます。あにおです。

f:id:aniota-alvarado:20170516174909j:plain

私のように文章が長くなりがちだと、なおの事必要なのが、「上へ戻る」ボタンです。

一番下まで読まなくても、途中で「あれ、上で何言ってたっけ?」というときに、ササッと戻れて、目次で読んでいた付近まで戻れたら、かなり読み易くなることでしょう。

ということで、少し前から必要だと思っていた「上へ戻る」ボタンを設置してみたら、意外にも簡単だったので、備忘録として残しておきます。

それでは、最後までお付き合いいただければ幸いです。

参考にしたサイト

私のようなポンコツは、自力でどうにかできるわけではないので、当然いくつかサイト様を参考にさせていただきました。

Googleで検索し、1ページ目にあったものは片っ端から読みましたが、その中で最も参考になったのは2つのサイト様でした。

まず、こちらが主軸となるサイト様です。
azanaerunawano5to4.hatenablog.com
続いて、色々とカスタマイズしたい場合には、こちらのサイト様が参考になると思います。
www.interest-blog.com

ボタンを設置するまでの手順

※作業前に、必ず該当箇所のバックアップを取っておいて、失敗したとき元に戻せるようにしておいてください!

1.まず、ヘッダ(ヘッダー)に「あざなえるなわのごとし様」(1つ目のサイト様)で紹介されているコードをコピペします

場所は、設定→詳細設定で下にスクロールすると出てくるheadに要素を追加です。

f:id:aniota-alvarado:20170516183209p:plain

f:id:aniota-alvarado:20170516183237p:plain

「変更する」で設定を保存できます。

2.次に、フッタ(フッター)に「あざなえるなわのごとし様」で紹介されているコードをコピペします

細かいカスタマイズが不要であれば、一番上に掲載されている大元のコードだけで十分です。事実、私はそれだけで平気でした。

場所は、デザイン→カスタマイズ(スパナのマーク)→フッタです。

f:id:aniota-alvarado:20170516183755p:plain

f:id:aniota-alvarado:20170516183803p:plain

「変更を保存する」で設定を保存できます。

3.最後に、CSSに「あざなえるなわのごとし様」で紹介されているコードをコピペします

こちらも、フッタと同様に、私は一番上の大元となるコードだけで十分でした。

場所は、先ほどのフッタの一つ下です。

f:id:aniota-alvarado:20170516184138p:plain

「変更を保存する」で設定を保存できます。

※細かくカスタマイズをしたい!という人は、前述した「interest blog様」(2つ目のサイト様)を参考にしてみて下さい。

スマホのほうの設定はどうするのか

以上の設定は、PC用ということで、別途スマホのほうも設定しなければならないのかというと、必ずしもそうではありません。

私は、はてなブログのテーマを、レスポンシブデザインに対応したものにしています。

その場合、デザイン→スマートフォン→詳細設定で、レスポンシブデザインにチェックを入れておけば、別途スマホに向けた作業は必要ありませんでした。

f:id:aniota-alvarado:20170516185659p:plain

もっとも、別途必要な人もいると思うので、そういう場合は、前述した「interest blog様」を参考にしてみて下さい。

おわりに

私は、全くカスタマイズせず、コピペするだけ、しかもレスポンシブデザイン対応だったため、本当にあっという間に設定が終わりました。

スマホで確認してみたところ、特に問題なく表示されていたので、同じ状況の人であれば、かなり簡単に設定できると思います。

導入を検討していて、私のように「なんか面倒そうだし・・・」と二の足を踏んでいる人がいたら、是非やってみて下さい。超簡単です。

長くなってしまいましたが、最後まで読んでいただきありがとうございました。

それでは、またのお越しをお待ちしております。

コメント

  1. kotsukotsu-techou より:

    設置したいと思ってたんです!全然知識がないので、大元の記事では難しかったと思います。図解で、はてなの設置場所をのせてくれてるのがスゴク助かりました!ありがとうございました。

  2. aniota-alvarado より:

    >kotsukotsu-techouさん
    コメントありがとうございます!
    画像付きで書くのって地味に手間がかかるので、そう言っていただけるとやってよかったですし、苦労が報われました(笑)
    私の記事がお役に立てたなら幸いです~

  3. lukehide より:

    初めまして。
    大変参考になりました。有難うございます。読者にさせて頂きました。
    一つ質問です。
    私は全く同じ仕様のブログを2件同時に運用しています。ひとつめは問題なく動くのですが、2つめは矢印が表示されますが、上に戻りません。対処方法などをご存じであれば教えてください。

  4. aniota-alvarado より:

    >バンコクで修業中。さん
    初めまして。コメント&読者登録ありがとうございます!
    もう1つのサイトを拝見させていただきましたが、やはり外からの見た目では原因を探るのは難しいです。
    上に戻る機能についてはざっと調べてみた感じだと[フッタ]に貼り付けたコードのうち
    $(“#move-page-top”).click(
    function(){
    $(“html,body”).animate({scrollTop:0},”slow”);
    }
    );
    がキーになっているようです。
    このコードがしっかりと貼り付けられているか、貼り付けられていたとして他の人と同じコードになっているかを調べてみてはいかがでしょうか。
    現段階で考えられるのはこれくらいなので、あまり参考にならないかもしれません。申し訳ないです。

  5. lukehide より:

    ご親切にありがとうございます。
    再確認してみます。

  6. aniota-alvarado より:

    >バンコクで修業中。さん
    お力になれていれば良いのですが・・・。
    あとは、使用しているデザインテーマとの相性などもあるかもしれないので、制作者のかたのブログ等から何か手掛かりが見つかるかもしれません。
    もし1つ目のブログと同じテーマなのであれば、コードをそのまま同じようにコピペすることで解決するかもしれないので合わせてお試しください。

  7. ACC-DNTST より:

    画像つきで分かりやすかったです。
    ありがとうございました。
    参考サイトでリンクを置かせていただきました。
    https://account-it-dentist.hatenablog.com/entry/blog-custom002
    もし迷惑でしたら削除します。
    よろしくお願いします。

  8. aniota-alvarado より:

    >ACC-DNTSTさん
    コメントありがとうございます!
    反応が遅くなってしまいすみません…
    私の記事が少しでもお役に立ったのであれば幸いです。
    迷惑だなんてとんでもないです!
    むしろ紹介していただいて嬉しい限りです。ありがとうございます。

  9. KSwedding より:

    参考にさせていただきました!
    ありがとうございます!

  10. aniota-alvarado より:

    >KSweddingさん
    コメントありがとうございます!
    参考になったとのことで嬉しいです!!

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