サイト管理者のGigo(ジーゴ)です(*^^*)
Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。
他にも詳しく無料ブログのBloggerをまとめている方がいらっしゃるので、その方たちのサイトと合わせてご利用いただければと思います(^^)
今回は、ブログ内に「TOPに戻る」ボタンを設置する方法について説明していきます。
「TOPに戻る」ボタンの設置
ブログの記事は、その内容が多くなるとどうしても文字数が増えてしまいます。
内容が詳しくなるということは、閲覧者にとっては良いことですが、その分読み終わった後に、サイトの上に戻るのがかなり大変になってしまいます。
閲覧者からすれば、この作業はかなり面倒くさい作業であり、サイトの離脱に繋がってしまいます。
それを防ぐために、ブログ内に「TOPに戻る」ボタンを設置します。
①ブログ管理画面メニューの「テーマ」をクリック
ブログ管理画面メニューの「テーマ」をクリックします。
![Bloggerで始める無料ブログ:ブログ内に「TOPに戻る」ボタンを設置する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-Ywd_5RxvFrY/W_tJwAhysyI/AAAAAAAAKyU/siOIT_oXbr8SialwIK4JdBH1ZkZI6uAYQCK4BGAYYCw/s640/2TOP%25E3%2583%259C%25E3%2582%25BF%25E3%2583%25B3.jpg)
②「HTMLの編集」をクリック
画面下にある「HTMLの編集」をクリックします。
![Bloggerで始める無料ブログ:ブログ内に「TOPに戻る」ボタンを設置する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-RjPm8BR7mcU/W_tJydQTnnI/AAAAAAAAKyc/I4XXsUojygQLbQpkaeG-X6Uh_5OiR_iOQCK4BGAYYCw/s640/3TOP%25E3%2583%259C%25E3%2582%25BF%25E3%2583%25B3.jpg)
③HTMLの編集画面が表示される
HTMLの編集画面が表示されます。
![Bloggerで始める無料ブログ:ブログ内に「TOPに戻る」ボタンを設置する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-vnREv9alFeg/W_tJ1t2SotI/AAAAAAAAKyk/93kXPD0ZuPwKw2Y_qESRX6FxeMNvWPEAACK4BGAYYCw/s640/4TOP%25E3%2583%259C%25E3%2582%25BF%25E3%2583%25B3.jpg)
④「head」の下にソースコードを貼り付ける
HTML編集欄の4行目ぐらいに「 <head> 」とあるので、その下に次のソースコードを貼り付けます。
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript' />
<script>
$(function() {
var topBtn = $('#page-top');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>
![Bloggerで始める無料ブログ:ブログ内に「TOPに戻る」ボタンを設置する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-0tvx2L4JHak/W_tJ4Xcoc_I/AAAAAAAAKys/qggZy1XfCXIHcV9y-TTU3XXGE0nP9tlAwCK4BGAYYCw/s640/4TOP%25E3%2583%259C%25E3%2582%25BF%25E3%2583%25B31.jpg)
![Bloggerで始める無料ブログ:ブログ内に「TOPに戻る」ボタンを設置する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-VRKkEOeSgj4/W_tJ7S2JRCI/AAAAAAAAKy0/o2-NvvQ9yv0xxHptk62bW4ozuRQwZBWZwCK4BGAYYCw/s640/4TOP%25E3%2583%259C%25E3%2582%25BF%25E3%2583%25B32.jpg)
⑤「</html>」の上に次のコードを貼り付ける
HTMLの編集画面を一番下までスクロールすると、「 </html> 」とありますのでその上あたりに、下のソースコードを貼り付けます。
下のソースコード内の「page top」を「上に戻る」や「TOPに戻る」などに変更することによってボタン内の表示を変更することができます。
「PAGE TOP」
<p id="page-top"><a href="#wrap">PAGE TOP</a></p>
「上に戻る」
<p id="page-top"><a href="#wrap">上に戻る</a></p>
「TOPに戻る」
<p id="page-top"><a href="#wrap">PAGE TOP</a></p>
![Bloggerで始める無料ブログ:ブログ内に「TOPに戻る」ボタンを設置する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-qpp1IYPJvYU/W_tJ-DfvBNI/AAAAAAAAKy8/S5HX36MzV08n334HqwtkHfjIVTYbFkcHwCK4BGAYYCw/s640/4TOP%25E3%2583%259C%25E3%2582%25BF%25E3%2583%25B33.jpg)
![Bloggerで始める無料ブログ:ブログ内に「TOPに戻る」ボタンを設置する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-CPecBtKV0KY/W_tKAS4J3UI/AAAAAAAAKzI/JTnP2nAnTtw76awTH8kqGOoQ8PU65QyIwCK4BGAYYCw/s640/4TOP%25E3%2583%259C%25E3%2582%25BF%25E3%2583%25B34.jpg)
⑥「検索ウィンドウ」を表示させる
HTMLの編集欄にカーソルがある状態で、キーボードの「Ctrl」+「F」をクリックすると、HTMLの編集欄の右上に「検索ウィンドウ」を開くことができます。
![Bloggerで始める無料ブログ:ブログ内に「TOPに戻る」ボタンを設置する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-VBj8dKIu6nY/W_tKHxU82_I/AAAAAAAAKzU/SNiZNHVELmcN75azFaeVossLyin3WRdTACK4BGAYYCw/s640/6TOP%25E3%2583%259C%25E3%2582%25BF%25E3%2583%25B3.jpg)
![Bloggerで始める無料ブログ:ブログ内に「TOPに戻る」ボタンを設置する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-BmI8hlb3l0c/W_tKKB9gVmI/AAAAAAAAKzg/CuxhhnbD-lgVvMW1DPN94XLSw3dtgmD1ACK4BGAYYCw/s640/7TOP%25E3%2583%259C%25E3%2582%25BF%25E3%2583%25B3.jpg)
⑦「検索ウィンドウ」に下の文字を入力し「Enter」を押す
検索ウィンドウに下の文字を入力し、「Enter」を押す。
]]></b:skin>
すると、その文字の部分に移動します。
検索を行った文字は背景色が変化します。
![Bloggerで始める無料ブログ:ブログ内に「TOPに戻る」ボタンを設置する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-VOHZ9GAkZ7Q/W_tKNhUnO4I/AAAAAAAAKzo/89p8CHWoD60mP5YP1od-CtvFY1MjnSrLwCK4BGAYYCw/s640/8TOP%25E3%2583%259C%25E3%2582%25BF%25E3%2583%25B3.jpg)
背景色が変化した部分の上に表示しているソースコードを書き入れます。
#page-top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 100%;
}
#page-top a {
background: #ff9900;
text-decoration: none;
color: #fff;
width: 100px;
padding: 30px 0;
text-align: center;
display: block;
border-radius: 5px;
}
#page-top a:hover {
text-decoration: none;
background: #999;
}
![Bloggerで始める無料ブログ:ブログ内に「TOPに戻る」ボタンを設置する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-dRDcYL6udgI/W_tKQPxPl8I/AAAAAAAAKz4/sZxJhX5Xe-YIGZBoA6ft6Bd93bFrSMN6gCK4BGAYYCw/s640/9TOP%25E3%2583%259C%25E3%2582%25BF%25E3%2583%25B3.jpg)
⑦「テーマを保存」をクリック
プレビュー確認して、表示に問題がなければ「テーマを保存」そクリックして設定を保存します。
![Bloggerで始める無料ブログ:ブログ内に「TOPに戻る」ボタンを設置する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-GQL3ULWxOJs/W_tKv4DSxdI/AAAAAAAAK0Y/tkw-Z1c3R5AFaF4C8XM4f45iYVES9i_FgCK4BGAYYCw/s640/11TOP%25E3%2583%259C%25E3%2582%25BF%25E3%2583%25B3.jpg)
⑧ブログを表示して確認
ブログを表示して、下に画面をスクロールすると右下に「PAGE TOP」と表示されています。
![Bloggerで始める無料ブログ:ブログ内に「TOPに戻る」ボタンを設置する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-lN00KyiWO0I/W_tKcEiq1WI/AAAAAAAAK0E/Uq3-LONivjsDSy3cT3-hZAYB8Sc1tE1mQCK4BGAYYCw/s640/10TOP%25E3%2583%259C%25E3%2582%25BF%25E3%2583%25B3.jpg)
まとめ:今回のおさらい
TOPへのスクロールボタンは、ブログの閲覧者にとってとても便利なものです。
それを証拠に、他のサイトを見てみても、ほぼ100%の確率で設置してあります。
Bloggerブログでは、初期設定で設置されていないため、自分で設定をしなければいけませんが、比較的簡単に設定できます。
ボタンの色や大きさも、貼り付けたソースコードの数値を変更するだけでカスタマイズすることができるので試してみてください。