紅蓮ブログ

アフィリエイトのことが全く分からないあなたに超簡単に詳しく、実戦形式でお話していくブログです

トップに戻るボタンを設置する方法【コピペで超簡単】

f:id:slash1196:20210626214602j:plain

f:id:slash1196:20200520205950j:plain

ブログ初心者

ちょっと思いついたことがあって、トップに戻るボタンをブログに設置したいんだど、どうやったらいいのかがわからないなあ。

教えてほしいな。

おすすめのデザインとかあると嬉しいなあ

 

こんなお悩みにお答えします。

 

 この記事でわかること

  • コピペでトップに戻るボタンを設置する方法 
  • トップに戻るボタンのおすすめデザイン3選

 

こんにちわ、紅蓮です。

 

ほかの人のブログを読んでいて、トップに戻るボタンを見つけたときにどうやって作るんだろうなんてなやんでいませんか?

 

今回はトップに戻るボタンを設置する方法ですね。

 

この記事を読むとコピペであなたのサイトにトップに戻るボタンが実装できるだけではなく、かっこいいデザインもわかっちゃいます。

 

この記事を書く僕は、ブログ歴は3年目。

今ではアフィリエイトでの収益が、約3000円ほどですね。

 

そんな僕も結構なカスタマイズオタクでして、今まで挑戦したブログのカスタマイズははてなブログだけでも50以上です。

 

そんな僕がトップに戻るボタンについてどこよりも簡単に語ります。

 

では行ってみましょう。

Here We Go!!

 

 

コピペでトップに戻るボタンを設置する方法 

f:id:slash1196:20210523212404j:plain

ではさっそくトップページに戻るボタンを設置する方法をお話していきます。

 

トップへ戻るのコードデザインには2通りある

実はトップへ戻るのコードデザインは2通りあり、以下の通り。

 

  • パターン①HTML&CSSのみでデザインされたもの
  • パターン②HTML&CSSにjavascriptを使ってデザインされたもの

 

では一つずつ見ていきましょう。

 

パターン①HTML&CSSのみでデザインされたもの

デザインパターンの1つ目は、HTML&CSSのみでデザインされたものです。

 

このパターンの特徴は、なんといってもページの表示速度の速さにありますね。

 

というのも読み込み場所を増やさなくていいからです。

 

そのために読み込みに時間がかかり、大事な時間を無駄にすることがありませんね。

 

ページ自体は軽くなるために、読者がストレスを抱える必要がなくなります。

 

ただ難点は、ずっとそこに表示されていることですね。

 

HTML&CSSだけだと静止画的なデザインしか扱えないために、邪魔だと思ってもそこに表示された状態になります。

 

なので指が当たってしまって不本意にトップに戻されるということがあり得ますが非常に軽いので表示速度には自信がありますね。

 

パターン②HTML&CSSとjavascriptを使ってデザインされたもの

作り方の二つ目は、HTML&CSSにJavascriptを使ってデザインされたものですね。

 

このパターンのいいところは、表示を消したり表示を出したりが自由自在なことです。

 

例えば100px下にスクロールしたら、ボタンを表示させるといったことも自由自在にできちゃうんですよね。

 

なので不本意に指が当たって、急にトップに戻されるといった事故がありません。

 

ただ難点は、やはりjavascriptを使うのでブログ自体が重くてもっさりすることですね。

 

というのもjavascriptを使う上でjqueryという読込先を指定するのですが、jqueryを読み込むときに時間がかかってしまうからです。

 

テーマによっては遅いなって感じてしまう可能性もありますね。

 

トップに戻るボタンの作り方

ではトップに戻るボタンの作り方は、以下の通り。

 

  • 手順①ほしいボタンのイメージを見つけて、そのコードをコピーする
  • 手順②コピーしたコードをメモ帳に貼り付けて、カスタマイズする
  • 手順③ブログに貼り付ける

 

では詳しく見ていきましょう。

 

手順①ほしいボタンのイメージを見つけて、そのコードをコピーする

まずほしいボタンのデザインコードを見つけて、コピーしましょう。

 

選ぶのは、トップに戻るボタンのおすすめデザイン3選から選んでもらったらいいと思います。

 

コピーしましょう。

 

 注意点

このブログでは基本的にはてなブログのアイコンを使っています。

もしアイコンの変更をしたい場合にはfontawesomeを使うようにしましょう。

 

fontawesomeは読込先を読み込むのに、以下のコードを入れる必要があります。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">

 

貼り付け先は、「設定」→「詳細設定」→「headに要素を追加」

f:id:slash1196:20210524163311j:plain

 

手順②コピーしたコードをメモ帳に貼り付けて、カスタマイズする

次にコピーしたコードをメモ帳などのエディターアプリに貼り付けましょう。

 

そしてカスタマイズをしましょう。

 

カスタマイズする場所に関しては、コードの赤くなっている部分が変更可能です。

 

色に関しては、 WEB色見本 原色大辞典 にて確認ができますね。

 

手順③ブログに貼り付ける

次にカスタマイズしたコードをコピーして、ブログに貼り付けましょう。

 

貼り付ける場所は以下の通り。

 

  • HTML&javascriptコード:デザイン→カスタマイズ→フッター
  • CSSコード:デザイン→カスタマイズ→デザインCSS

 

では見ていきましょう。

 

 HTML&javasucript:「デザイン」→「カスタマイズ」→「フッター」

HTML&javasucriptコードを貼る場所は、フッターにはります。

「デザイン」→「カスタマイズ」→「フッター」と進み、一番下にはるようにします。

f:id:slash1196:20210626191711j:plain


 

 CSSコード:デザイン→カスタマイズ→デザインCSS

CSSコードの貼る場所は、デザインCSSですね。

 

デザインCSSの場所は、「デザイン」→「カスタマイズ」→「デザインCSS」と進み、クリックして一番下にコードを貼り付けします。

 

f:id:slash1196:20210606181402j:plain

 

トップに戻るボタンのおすすめデザイン3選

f:id:slash1196:20210519174612j:plain

ではトップに戻るボタンのおすすめデザインをお話していきましょう。

 

パターン①HTML&CSSのみでデザインされたもの

ここではHTML&CSSのみでデザインされたものですね。

 

ボタンデザイン①:丸型ボタン

下に固定された丸型ボタンのタイプです。

邪魔になりにくいので、使っているサイトも多いですね。

 

やや小さめに設計してあるので、指を触れて不意にトップに戻されるといった事故を少なくなっていますね。

 

使いやすさは抜群です。

 

 CSSコード 

#page_top{
width: 50px;/*ここを大きくするとボタンの横幅が大きくなる*/
height: 50px;/*ここを大きくするとボタンの縦幅が大きくなる*/
position: fixed;
right: 0;
bottom: 0;
background: #696969;/*好きな色に変更可能*/

opacity: 0.6;
border-radius: 50%;
}
#page_top a{
position: relative;
display: block;
width: 50px;
height: 50px;/*横幅縦幅大きくするならここも変える*/
text-decoration: none;
}
#page_top a::before{
font-family: 'blogicon';/*fontawesomeの場合は Font Awesome 5 Freeと記入*/
font-weight: 900;
content: '\f007';/*fontawesomeの場合には、f102orf106*/
font-size: 25px;
color: #fff;
position: absolute;
width: 25px;
height: 25px;
top: -5px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}

 HTMLコード

<div id="page_top"><a href="#"></a></div>

 

ボタンデザイン②:四角型ボタン

これは上記のデザインを四角にしてみました。

大きさは一緒でも角があるためにちょっと大きく見えますね。

 

ただこのタイプも結構使っている人が多いイメージがありますね。

小さめなので使いやすいですね。

 

#page_top{
width: 50px;
height: 50px;/*縦幅と横幅を大きくしたい場合には数値を上げる*/
position: fixed;
right: 0;
bottom: 0;
background: #696969;/*色の変更可能*/
opacity: 0.6;
}
#page_top a{
position: relative;
display: block;
width: 50px;
height: 50px;/*縦幅と横幅を大きくしたい場合には数値を上げる*/
text-decoration: none;
}
#page_top a::before{
font-family: 'blogicon';/*fontawesomeを使う場合には、Font Awesome 5 Free*/
font-weight: 900;
content: '\f007';/*fontawesomeの場合は、f102orf106*/
font-size: 25px;
color: #fff;
position: absolute;
width: 25px;
height: 25px;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}

 

 HTML

<div id="page_top"><a href="#"></a></div>

 

ボタンデザイン③:言葉入りデザインタイプ

言葉入りのタイプですね。

そのためにトップに戻るのが、一目でわかるデザインです。

 

#page_top{
width: 90px;
height: 60px;/*ボタンの大きさを変えたいときに変更する*/
position: fixed;
right: 0;
bottom: 0;
opacity: 0.6;
border: 3px solid #696969;
background-color:#696969;/*色を変更可能*/
}
#page_top a{
position: relative;
display: block;
width: 90px;
height: 60px;/*大きさを変えたいときには変更可能*/
text-decoration: none;
}
#page_top a::before{
font-family: 'blogicon';/*fontawesomeの場合は、Font Awesome 5 Free*/
font-weight: 900;
content: '\f007';/*fontawesomeの場合は、f102orf106*/
font-size: 25px;
color: #fff;
position: absolute;
width: 25px;
height: 25px;
top: -25px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}
#page_top a::after{
content: 'PAGE TOP';
font-size: 13px;
color: #fff;
position: absolute;
top: 38px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
} 

 HTMLコード

<div id="page_top"><a href="#"></a></div>

 

HTML&CSSとjavascriptで作るパターン

次にHTML&CSSとjavascriptでつくられたものですね。

ページトップにつくと自動で隠れる設計になっていますね

ボタンデザイン④下から出てくるデザイン

最初は隠れていて、スクロールするとしたからボタンが出てくるデザインです。

 

 HTML&javascriptコード

<div id="page_top"><a href="#"></a></div>
<script type="text/javascript">

$(function() {
var appear = false;
var pagetop = $('#page_top');
$(window).scroll(function () {
if ($(this).scrollTop() > 100) { //100pxスクロールしたら
if (appear == false) {
appear = true;
pagetop.stop().animate({
'bottom': '50px' //下から50pxの位置に
}, 300); //0.3秒かけて現れる
}
} else {
if (appear) {
appear = false;
pagetop.stop().animate({
'bottom': '-50px' //下から-50pxの位置に
}, 300); //0.3秒かけて隠れる
}
}
});
pagetop.click(function () {
$('body, html').animate({ scrollTop: 0 }, 500); //0.5秒かけてトップへ戻る
return false;
});
});

</script>

 

 CSSコード

#page_top{
width: 50px;
height: 50px;/*大きさ変えたいときには、変更可能*/
position: fixed;
right: 0;
bottom: -50px;
background: #696969;/*色変更可能*/
opacity: 0.6;
border-radius: 50%;
}
#page_top a{
position: relative;
display: block;
width: 50px;
height: 50px;/*大きさ変えたいときはここを変更する*/
text-decoration: none;
}
#page_top a::before{
font-family: 'blogicon';/*fontawesomeの場合は、Font Awesome 5 Freeと入力*/
font-weight: 900;
content: '\f007';/*fontawesomeの場合は、f102orf106*/
font-size: 25px;
color: #fff;
position: absolute;
width: 25px;
height: 25px;/*大きさ変えたいときに変更可能*/
top: -5px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}

 

ボタンデザイン⑤横からボタンが出てくるデザイン

スクロールをすると右横から出てくるデザインですね。

ページトップにつくと自動で隠れるようになっています。

 

 HTML&javasucript

<div id="page_top"><a href="#"></a></div>

 

<script type="text/javascript">

$(function() {
var appear = false;
var pagetop = $('#page_top');
$(window).scroll(function () {
if ($(this).scrollTop() > 100) { //100pxスクロールしたら
if (appear == false) {
appear = true;
pagetop.stop().animate({
'right': '0px' //右から0pxの位置に
}, 300); //0.3秒かけて現れる
}
} else {
if (appear) {
appear = false;
pagetop.stop().animate({
'right': '-50px' //右から-50pxの位置に
}, 300); //0.3秒かけて隠れる
}
}
});
pagetop.click(function () {
$('body, html').animate({ scrollTop: 0 }, 500); //0.5秒かけてトップへ戻る
return false;
});
}); 

</script>

 

 CSSコード

#page_top{
width: 50px;
height: 50px;
position: fixed;
right: -50px;
bottom: 50px;
background: #696969;
opacity: 0.6;
border-radius: 50%;
}
#page_top a{
position: relative;
display: block;
width: 50px;
height: 50px;
text-decoration: none;
}
#page_top a::before{
font-family: 'blogicon';
font-weight: 900;
content: '\f007';
font-size: 25px;
color: #fff;
position: absolute;
width: 25px;
height: 25px;
top: -5px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}

 

ボタンデザイン⑥フェイドして現れたり消えたりするデザイン

これはスクロールするとどこからともなく現れるタイプです。

ページトップに行くと、自動で消える設計になっていますね。

 

 HTML&javasucriptコード

<div id="page_top"><a href="#"></a></div>
<script type="text/javascript">

$(function() {
var appear = false;
var pagetop = $('#page_top');
$(window).scroll(function () {
if ($(this).scrollTop() > 100) { //100pxスクロールしたら
if (appear == false) {
appear = true;
pagetop.stop().animate({
'bottom': '50px' //下から50pxの位置に
}, 300); //0.3秒かけて現れる
}
} else {
if (appear) {
appear = false;
pagetop.stop().animate({
'bottom': '-50px' //下から-50pxの位置に
}, 300); //0.3秒かけて隠れる
}
}
});
pagetop.click(function () {
$('body, html').animate({ scrollTop: 0 }, 500); //0.5秒かけてトップへ戻る
return false;
});
});

 

 CSSコード

#page_top{
width: 50px;
height: 50px;/*大きさを変えたいときに変更する*/
position: fixed;
right: 0;
bottom: 50px;
background: #696969;/*色の変更可能*/
opacity: 0.6;
border-radius: 50%;
}
#page_top a{
position: relative;
display: block;
width: 50px;
height: 50px;/*大きさ変更に使用可能*/
text-decoration: none;
}
#page_top a::before{
font-family: 'blogicon';/*アイコンの変更可能。fontawesomeの時はFont Awesome 5 freeと入力*/
font-weight: 900;
content: '\f007';/*fontawesomeの場合にはF102 or f106*/
font-size: 25px;
color: #fff;
position: absolute;
width: 25px;
height: 25px;
top: -5px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}

 

まとめ|トップへ戻るボタンを設置して使いやすいサイトにしよう

お疲れさまでした。

 

ここまでトップに戻るボタンの設置方法についてお話してきました。

 

まとめると、以下の通り。

 

まとめ
  • トップに戻ボタンのコードデザインには二つあり、以下の通り
    • パターン①HTML&CSSのみでデザインされたもので、こちらは表示速度が速いのがポイント。でもずっとそこにあるために触れることもある。
    • パターン②HTML&CSSにjavascriptを使ってデザインされたもので、自動でいろいろできるのがポイント。でも表示速度が遅くなるのが難点。
  • コードのコピペ先は、デザイン→カスタマイズからHTMLとjavascriptはフッタにそしてCSSはデザインCSSに貼り付ける
  • おすすめのデザインがあるのでそれを使ってもらえるとコピペで済みます。

トップに戻るボタンは間違いなく作っておくと読者のためになります。

ぜひ作っておくことをお勧めします。

 

ってことで、今回はこの辺で。

また次回に。