オタクの戯言

オタクが思うがままに書き連ねていく、とりとめのないブログです

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

スポンサーリンク

はじめに

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


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様」を参考にしてみて下さい。

おわりに

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

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

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



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

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