長い記事だと上に戻るボタンって便利ですよね。
ぜひBloggerのブログにも取り入れてみましょう！
上に戻るボタンは、レイアウトのガジェット追加で設置することができます。
ガジェット追加のHTMLを用いるので、HTML入門にも良いかもしれません。
ボタン用のアイコン画像準備
画像の準備
上に戻るアイコン画像を自分で用意しましょう。
以下のようなアイコン素材配布サイトを活用すると便利です。
参考サイト様
サイズはHTMLの方で指定するので、あまり気にしなくて大丈夫です。
画像のURLの取得方法
画像のURLが必要なので、その取得方法を説明します。
先ず左のメインメニューから【ページ】を選択し、新しいページを作成します。
ページ本文で【画像を挿入】から準備した画像をアップロードします。
これで、自分のブログの画像としてサーバーに保管された状態になります。
貼り付けた画像を右クリックして【画像リンクをコピー】を選択します
取得したURLをメモ帳などに貼り付ければ、画像URLの取得は完了です。
URLを再取得したい場合に備えて、ページは下書きで保存しておくことをオススメします。
画像URLの注意点
他所のサイトなどから画像URLを取得して使う……いわゆる直リンクは絶対にやめましょう！
そのサイトに負荷を掛けてしまいます。
また、不審なリンクとして検索エンジンやアドセンスにおいて不利になる場合があります。
必ず自分のブログでアップロードした画像を使うようにしましょう。
上に戻るボタンのコード準備
続いてコードを準備します。
コピペすれば良いので、身構えずにやっていきましょう。
先ず、基本の上に戻るボタンのコードは以下になります。
<img src="ボタン画像" height="auto" width="★" /></a>
■は下からの位置、▲は右からの位置、★は画像のサイズ幅になります。
実際、当ブログで使用している数字を当てはめると以下の通りです。
<img src="ボタン画像" height="auto" width="40" /></a>
最初はこれをコピペして使っても大丈夫です。
位置やサイズを変更したくなったら数字を変えてみましょう。
最後に前項で取得した画像URLをボタン画像に置き換えれば、上に戻るボタンのコードは完成です。
ガジェット追加で上に戻るボタンを設置する方法
左のメインメニューから【レイアウト】を選択し、サイドバーなどにある【ガジェットを追加】をクリックします。
後でフッターに移動するので、どこの【ガジェットを追加】でも問題ありません。フッターに近い位置が移動しやすいと思います。
ガジェットを追加の画面が開いたら、【HTML／JavaScript】を選択します。
【HTML／JavaScript】の設定画面が開いたら、コンテンツに先程のコードを貼り付けます。
タイトルは未記入でOKです。
保存したら、作成した「HTML／JavaScript」ガジェットをドラッグでフッターに移動します。
これで、自分のブログの右下に戻るボタンを設置することができます！
参考ブログ様
monocotoyom【QooQカスタマイズ”ページトップに戻るボタン”をガジェットで追加！超簡単導入！】
