【はてなブログ】トップに戻るボタンを設置する方法【コピペで簡単】

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

この記事でわかること

記事の信頼性

こんにちわ、Jouji(@jouji0720)です。僕は現在webライター4年目で、ライティングのみで生活しています。

そんな僕もはてなブログで記事を現在も書いています。今回ははてなブログでトップに戻るボタンを設置する方法です。

はてなブログに限らず、ブログサービスには、トップに戻るボタンがありません。でも実際は、ないとスクロールして戻らないといけないので、超しんどいです。

この記事を読むとコピペであなたのサイトにトップに戻るボタンが実装できるうえに、かっこいいデザインもわかっちゃいます。なのでぜひ最後までお読みの上、手を動かしていきましょう。

はてなブログでトップに戻るボタンを設置する方法

はてなブログでトップページに戻るボタンを設置する方法をお話します。

はてなブログでトップへ戻るボタンを作るコードデザインは2通り

はてなブログでトップページへ戻るボタンを作るコードデザインは2通りあり、以下の通り。

1つずつ見ていきましょう。

HTML＆CSSのみでデザインされたもの

はてなブログでトップページへ戻るボタンを作るコードデザインの1つ目は、HTML＆CSSのみでデザインされたものです。このパターンの特徴は、ページの表示速度の速いことです。

読み込みに時間がかかり、離脱されることがなくなります。

ただ難点は、ずっと右下に表示され続けることです。HTML&CSSだけだと静止画的なデザインしか扱えないために、邪魔に感じてしまうかもしれませんね。

指が当たってしまって、不本意にトップに戻されるということがあります。そのために注意が必要ですが、そのことを抜いても、非常に軽いためにおすすめです。

HTML＆CSSとjavascriptを使ってデザインされたもの

はてなブログでトップページへ戻るボタンを作るコードデザインの2つ目は、HTML&CSSにJavascriptを使ってデザインされたものです。このパターンのいいところは、ボタンの表示パターンが自由自在なことです。

例えば画面をスクロールするときに、「100px下にスクロールしたらボタンを表示させたい」といったことも自由自在にできます。作業中に指が当たって、急にトップに戻されるといった事故がありません。

そのためにスマホでも安心して操作に集中できます。ただ難点は、やはりjavascriptを使うことで、データ量が多くなり、表示速度が遅くなることです。

javascriptを使う上でjqueryという読込先を指定するのですが、jqueryを読み込むときに時間がかかってしまうからです。テーマによっては表示速度が遅いと感じてしまう可能性もあります。とはいえ、自動化ができるのでおすすめです。

はてなブログでトップに戻るボタンの作り方

でははてなブログでトップに戻るボタンの作り方は、以下の通りです。

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

実装したいボタンのデザインを見つけてコードをコピーする

トップに戻るボタンの作り方手順の1つ目は、ほしいボタンのイメージを見つけて、コードをコピーすることです。

選ぶのは、トップに戻るボタンのおすすめデザイン３選から選んで、コピーしましょう。

注意点

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

もしアイコンをfontawesomeに変更をしたい場合には、以下のコードを入れる必要があります。

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

詳しくは、Fontawesomeは使わないほうがいい話【初心者向け】にて詳しく解説しているのでぜひ参考にやってみましょう。

コピーしたコードデザインをメモ帳に貼り付けてカスタマイズする

トップに戻るボタンの作り方手順の2つ目は、コピーしたコードデザインをメモ帳に貼り付けてカスタマイズすることです。

メモ帳アプリにコピーしたコードデザインを貼り付けて、カスタマイズするようにしましょう。

カスタマイズする場所に関しては、後半に出てくるコードの赤文字になっている部分が変更可能です。色に関しては、 WEB色見本 原色大辞典 にて確認ができますね。

ブログに貼り付ける

トップに戻るボタンの作り方手順の3つ目は、ブログに貼り付けることです。

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

貼り付ける場所は次の通りです。

では見ていきましょう。

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

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

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

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

【はてなブログOK】トップに戻るボタンのおすすめデザイン6選

トップに戻るボタンのおすすめデザインは、次のものがあります。

それぞれ、解説します。

HTML＆CSSのみでデザインされたもの3選

ここではHTML＆CSSのみでデザインされたものは、以下があります。

それぞれ解説します。

丸型ボタン

HTML＆CSSのみでデザインされたものの1つ目は、丸型ボタンタイプです。このタイプの特徴は、邪魔になりにくいことで、作業をしている間に押してしまうことが少ないので、使っているサイトも多いです。

やや小さめに設計してあるため、指が触れて不意にトップに戻されるといった事故を少なくなっています。そのために、読むことに集中でき、使いやすさは抜群です。

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>

四角型ボタン

HTML＆CSSのみでデザインされたものの2つ目は四角型ボタンです。上記のデザインを四角にしてみました。

大きさは一緒でも角があるためにちょっと大きく見えます。ただこのタイプも結構使っている人が多いイメージがあります。小さめなので、使いやすいですね。

CSSコード

#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>

言葉入りデザインタイプ

HTML＆CSSのみでデザインされたものの3つ目は、言葉入りデザインタイプです。トップに戻るという言葉があるので、一目でわかり、指を触れないように気を付けることができます。

そのために、不意に指が触れてしまってイライラすることがありません。とはいえちょっと大きくなるので、若干振れやすいのが難点です。

CSSコード

#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で作るデザイン3選

HTML&CSSとJavaScriptで作るデザインは、次のものがあります。

それぞれ解説します。

下から出てくるデザイン

HTML&CSSとJavaScriptで作るデザインの1つ目は、下から出てくるデザインです。最初は隠れていて、スクロールしたら、下からボタンが出てくるデザインです。

スクロールして、100pxを超えたらボタンが下から出現するタイプにしてあります。シンプルでいて、よく使われるデザインです。使いやすいのでおすすめです。

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秒かけて現れる(msecであるので注意。)
}
} 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&CSSとJavaScriptで作るデザインの2つ目は、横から出てくるデザインです。このデザインは、上記の下から出てくるタイプを出てくる場所を右端に変えることでできたデザインです。

トップに戻るときに、「下までスクロールするの面倒やわ」って思うことあります。このデザインなら、右端にボタンがあるので、戻りたいときにはすぐに押せますし、面倒が解消されます。ページトップにつくと自動で隠れるようになっていますので、見た目もシンプルでかっこいいです。

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({
'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&CSSとJavaScriptで作るデザインの3つ目は、フェイドして現れたり消えたりするデザインです。これはスクロールするとどこからともなく現れるタイプです。

ページトップに行くと、自動で消える設計になっています。シンプルかつ邪魔にならない設計なのでおすすめです。

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;
}

まとめ｜はてなブログにトップへ戻るボタンを設置して使いやすくしよう

ここまで、トップに戻るボタンの設置方法についてお話してきました。トップに戻るボタンがあると目次に戻りたいときにすぐに戻れます。

ぜひ作ってみてはいかがでしょうか。

今回は以上です。

次に読むのにおすすめの記事