[当ブログは、アフィリエイトプログラムに参加しています。ページに広告が含まれる場合があります]

2015/10/08

コピペで簡単!「ページの先頭へ戻るボタン」を設置する方法

更新日:2016年10月9日(日)
ずっと設置したいと思ってた「ページの先頭へ戻るボタン(スクロールアップボタン)」。
調べてみると、jQueryの設置が必要だったりと難しすぎて自分には無理…と思ってました。
でも、しつこく調べてみるものです。
コードをコピペするだけで簡単に設置できる方法を発見!
早速設置してみました♪\(^o^)/

※HTMLをいじるので、テンプレートを保存してから作業してください。

1.設置方法

1-1.設定画面→レイアウト→ガジェットを追加で「HTML/JavaScript 」を追加します。
ブロガーレイアウト画面

1-2.HTML/JavaScriptに下記のコードをコピペするだけです。ボタン画像のURL、画像の高さ、画像の幅は後ほど設定します。
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="ボタン画像のURL" height="画像の高さ" width="画像の幅" />

HTML/JavaScriptにコードをコピペ

1-3.ボタン画像を入手します。以下のようなフリー素材サイトで見つけることができます。
””
EC design(デザイン)

””
商用利用可のWEB素材が無料な素材屋

管理人は他の方のデザインを参考に、ペイントで自作してみました。(現在は別の画像を使用しています)
自作の先頭へ戻るボタン
「top」の文字はchipheadさん作の「しねきゃぷしょん」を使わせていただきました。
洋画字幕のようなおしゃれなフォントです。
画像の透過処理は手軽に透明pngを使いました。

画像サイズは正方形なら48×48がスマホなどの携帯端末でも使いやすくおすすめとのこと。縦長の画像は" height="auto" で設定します。設定方法は以下です。
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="ボタン画像のURL" height="auto" width="48" />
画像に合わせてサイズ調節してくださいね。

2.ボタン画像のURL取得方法

2-1.使いたい画像をBloggerにアップロードします。
Bloggerにアップロードされた画像

2-2.アップロードした画像を右クリックして、メニューから「新しいタブで開く」を選択します。
画像を右クリック。メニューから新しいタブで開くを選ぶ

2-3.新しくタブが開くので、アドレスバーを右クリックして画像のURLをコピーします。
アドレスバーから画像のURLをコピーする
2-4.取得した画像のURLをコード部分に差し替えれば完了です。
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="取得したボタン画像のURL" height="auto" width="48" />
ボタン画像の高さ(height)と幅(width)は画像に合わせて調節してください。

3.Blogger以外のブログに設置する方法

他の無料ブログに設置する場合も超簡単です。
HTMLの<head>~</head>の間にコードを貼り付けるだけ!
</head>の直前に貼り付ければわかりやすいと思います。

それでは今回はこの辺で。
最後までお付き合いいただき、ありがとうございます。