Blogger：トップへ戻るボタン＆スムーススクロールの設置の仕方+おまけの108ping

2019年2月6日水曜日

Blogger：トップへ戻るボタン＆スムーススクロールの設置の仕方+おまけの108ping

スムースなのかスムーズなのかわかりません。

最近は余計なことを書きすぎて記事が長くなりすぎることが多いので、当ブログもついに「トップへ戻る」ボタンを設置しました（時代遅れ）

今回の記事はそのボタンの設置の仕方です。
と、言いたいところですが、管理人は人様にレクチャーできるほどの知識などは持ち合わせていないので、こことここを見ればBloggerでスーッとスムーズにトップへ戻るボタンを設置できましたというサイトを紹介。

それだけではなんなので、たぶん誰も要らないおまけをつけさせてもらいました。（ボタン用png画像）

※追記
現行のボタンはこちらの記事の中段に紹介している方法で作り直しています。
ご了承ください。

作ろう

1.バックアップ

トップへ戻るボタンを設置するだけなら必要はないですが、スムーススクロールを実装するにはhtmlの編集をしなくてはいけないので、まずはバックアップをしておきましょう。どっかの管理人は昔バックアップをしないでひどい目にあったそうです。
ブログのバックアップ、読み込み、削除（Bloggerヘルプ）

2.トップへ戻るボタンの画像を用意する

まずはトップへ戻るボタンのアイコン画像を用意しましょう。
ちょっとググッてみると、
ECデザイン様とかIcon-rainbow様とかにあったりしますね。

ボタンの画像を用意していない方で特にこだわりがない方はこのページ下部のおまけの項目で管理人が作ったものがダウンロードできますのでよかったらご利用ください。

3.トップへ戻るボタンの設置

アイコン画像が用意できたら次はトップへ戻るボタンの設置の仕方。
こちらのリンク先の記事を読めば楽勝です。

ページトップへ戻るボタン。ブログに設置する方法（簡単編）（へたよこ＠様）

画像をアップロードして、フッターにコードをコピペをするだけで出来るなんてたまげたなぁ。
管理人はこういう画像をアップロードするためだけの隠しページを作っていたりします。

4.スムーススクロールさせるためにjQueryを呼び出す

それでもって設置できたトップへ戻るボタンをスムースに動かせるようにしましょう。
「jQuery」なんて聞きなれない単語が出てきて戸惑うかもしれませんが、こちらもリンク先のコードを指定の場所（<head>～</head>）にコピペしたら簡単にできました。（htmlを編集するので慎重にね）

コピペでOK！FC2ブログページ内リンクをスムーズスクロール(初心者でもできる画像編集＋加工様）
FC2ブログを対象に書かれている記事ですが、Bloggerでも<head>～</head>にコピペをしたら普通に動いてくれました。
これで完成です。

参考までに画像を載せておきますが、Bloggerでhtmlを編集するときはここです。