更新日：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="画像の幅" />
1-3．ボタン画像を入手します。以下のようなフリー素材サイトで見つけることができます。
管理人は他の方のデザインを参考に、ペイントで自作してみました。（現在は別の画像を使用しています）
洋画字幕のようなおしゃれなフォントです。
画像の透過処理は手軽に透明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にアップロードします。
2-2．アップロードした画像を右クリックして、メニューから「新しいタブで開く」を選択します。
2-3．新しくタブが開くので、アドレスバーを右クリックして画像のURLをコピーします。
２-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>の直前に貼り付ければわかりやすいと思います。
それでは今回はこの辺で。
最後までお付き合いいただき、ありがとうございます。
web検索
スポンサーリンク
関連記事