※ 当サイトではアフィリエイト広告を利用しています。

Seesaaブログにトップに戻るボタンを設置する方法

Seesaaブログにトップに戻るボタンを設置する方法 Seesaaブログアフィリエイトとカスタマイズ
2018.04.02

今回はSeesaaブログに記事の先頭に戻るボタンを設置する方法を紹介します。これは別にシーサーブログに限らずFC2や別の無料ブログ（HTMLが編集できる無料ブログ）ならどの無料ブログでも同じ要領で設置する事ができます。今回作ってみたのはこのブログでも右下に表示されるこんな感じのボタンです。

Seesaaブログにページトップに戻るボタンを設置する方法-1

もちろん戻るボタンの文言とかサイズは自由に変更できます。

著作情報
この記事を書いた人

WEBエンジニア11年目。これまでに100を超えるサイトの立ち上げや運営に携わり、2017年に法人化。カスタマイズ、デザイン、ツール作成、サイト移転まで何でもこなします。

sigezoをフォローする

トップに戻るボタンの作り方と設置方法

先にこの「トップに戻るボタン」の機能を紹介しておきます。

  • ページを下にスクロールするとボタンが右下に出現（右下以外でも可）
  • ボタンをクリックするとページの先頭に戻る

という感じのボタンです。これを設置する方法をできるだけシンプルに説明してみます。

戻るボタンのデザインをCSS（スタイルシート）で作成する

まず最初に戻るボタンのデザインをCSSで作成します、とはいっても既に作っておいたのでこのままのデザインで設置してみてあとからCSS（スタイルシートの編集）でサイズやボタンの色、文字の色等を変更する事をおすすめします。

設置するまではよく分からない部分も多いとは思いますが、実際に一度設置してみると理解は深まるはず、多分。

Seesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒「適応中のデザインタイトル」をクリックして、「スタイルシート編集」のタブを選択します。

Seesaaブログスタイルシート編集画面

スタイルシートの一番下に次のコードを追加。

#scroll-top{   /* ボタンのデザイン */
width:150px;   /* ボタンの横幅 */ 
height:50px;   /* ボタン高さ */ 
background-color:#1F5E73;   /* ボタンの背景色 */ 
color:#fff;    /* ボタンの文字色 */ 
text-align:center;    /* ボタン内の文字を中央に */ 
position:fixed;    /* 画面がスクロールしても固定する */ 
right:20px;    /* 固定する場所は右から20px */ 
bottom:20px;    /* 固定する場所は下から20px */ 
display:none;    /* ボタン表示は最初は非表示 */ 
margin:0 0;    /* ボタンの余計な余白はいらない */ 
border-radius: 10px;        /* 角を丸く */ 
-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */ 
-moz-border-radius: 10px; 
cursor:pointer;   /* カーソルを指のマークに */ 
}

縦に長いのでコピペする時はスクロールして最後までコピーして下さい。トップに戻るボタンには「scroll-top」というid名を付けてあります。各部分の横に解説を付けているので変更したい場所があれば設置した後で手直しして下さい。

途中で「display:none」というのを付けていますが、これはボタンを非表示にする（見えなくする）記述。初期状態で見えなくしておいて、ページをスクロールしたら表示するというコードを後ほど書くので、この部分は非表示でOKです。

上記コードを追加したらその下にこのコードを追加（これもスタイルシート）。

#scroll-top p{        /* ボタンのテキスト部分 */ 
font-weight: bold;    /* 文字を太く */ 
line-height: 50px;    /* 文字の高さ */ 
margin: 0 0 0 0;      /* 余計な余白はいらない */ 
}

これはボタンに表示させるテキスト部分ですね。ここで重要なポイントが１つ。「line-height」という部分で文字の高さを調整しています。この高さは「ボタンの高さ（height）」と同じにしておく必要があります（ボタン内の文字を中央にするため）。

以上でボタンのデザインは完了です。

ボタンを設置して機能させる

作成したボタンを機能させるにはHTMLにボタンの記述を加える必要があります。

Seesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒「適応中のデザインタイトル」と進み、「HTML編集」のタブをクリック。

SeesaaブログHTMLの編集

HTMLの書かれた画面になりますが、HTMLは最初の方で「head」～「/head」セクションがあって、続いて「body」～「/body」セクションがあります。

まずは「head」の終わりの部分「/head」の記述を探します。初期状態なら

「/head」の直前に以下のコードを追加。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
	$(window).scroll(function(){
	var i=$(window).scrollTop();
	if(i >50){
	$("#scroll-top").fadeIn("slow");}
	else{$("#scroll-top").fadeOut("slow");}
	});

	$("#scroll-top").on("click",function(){
	$("html,body").animate({scrollTop:0},"slow");
	});
});
</script>

こんな感じになります。

Seesaaブログにページトップに戻るボタンを設置する方法-2

追加できたら一度保存しておきます。

HTMLにボタンを追加する

同じくHTMLにさらにボタンを追加していきます。

ボタンを設置する記述はこの「body」の中ならどこでもいいのですが、今回は分かりやすいようにHTMLの一番下の「/body」の直前に次の記述をします。

先程と同じHTMLの編集画面でHTMLの一番下（最後）の方に「/body」という部分がありますので「/body」の直前に以下のコードを追加。

<div id="scroll-top">
<p>▲ページの先頭へ</p>
</div>

こんな感じになります。

Seesaaブログにページトップに戻るボタンを設置する方法-3

ここまで記述したら「保存」を忘れずに。そしてきちんと機能するか確かめておく事。画面を下にスクロールするとページの先頭に戻るボタンが出現するはずです。もしボタンが出てこない場合は「Ctrl」と「F5」を同時に押してリロードして確認。

最後に記述した内容を簡単に説明しておくと、

  • ページをスクロール（トップから50px下に移動）をすると非表示していたボタンが出現
  • トップから50px以内に戻ってきた時はボタンは非表示。
  • ボタンをクリックするとページの先頭へ移動

こんな感じです。ちなみに表示と非表示は「fadeIn」と「fadeOut」という記述部分です。もっと詳しく知りたい場合は「jQuery」を勉強すれば1週間くらいでできるようになると思います。但しある程度HTMLとCSSの知識は必要ですが。

それからSeesaaブログの場合はTOPに戻るボタンはPCページだけです。スマホページのHTMLは編集できません。

元々無料ブログのスマホページは広告も多く、自由度も低いのでブログで収益化をするのであればWordPressなどへの移行を検討してみて下さい。

以上シーサーブログや無料ブログ（HTMLの編集ができる無料ブログ）に「トップに戻るボタン」を設置する方法でした。

ブログを収益化するならWordPress利用がおすすめ

無料ブログでは利用規約の変更やアカウント停止、サービス終了などのリスクがあります。

また、表示速度も重く、スマホのページには消す事のできない広告が多いためブログでの収益化を考えているならWordPressの利用が圧倒的におすすめです。

WordPressと無料ブログの違いや必要な料金などは以下記事でまとめてます。

コメント