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

この記事はSeesaaブログの「新システム」「旧システム」どちらにも対応できます。(画像は旧システム)

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

scroll-top-1

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

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

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

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

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

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

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

シーサーブログの管理画面から「デザイン」⇒「デザイン設定」⇒「現在使っているテンプレート」をクリック。

scroll-top-2

scroll-top-3

自分の使っているテンプレートをクリックするとCSSのコードがゴチャゴチャ書かれていると思いますが、その一番下に次のコードを入れます(スタイルシートの編集)。

#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;      /* 余計な余白はいらない */ 
}

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

コレはボタンに表示するテキスト部分を上下から中央に表示させるために必要な記述なのです。サンプルでは「▲ページの先頭へ」というテキスト部分ですね。

scroll-top-4

以上でボタンの作成は完了です。ではこのボタンを設置して機能させていきましょう。

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

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

シーサーブログの管理画面から「デザイン」⇒「HTML」⇒「自分のカスタマイズしているHTML」を選択。新ステムの場合は「HTML編集タブ」を選択。

scroll-top-11

*初めてカスタマイズする場合は右上にある「HTMLの追加」をクリックして名前を付けておく(旧システムの場合)。

scroll-top-6

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

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

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

こんな感じになりますよね。
scroll-top-9

この部分を追加したら、一度HTMLの先頭に戻り、「head」~「/head」で囲まれた部分を探します。それで、このheadセクションの最後の部分、つまり「/head」という部分を探し、この直前にjavaScript(jQuery)を使うための記述を追加します。深く考える必要はないです。

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

ちょっと横に長いのでスクロールしながらコピペ。もしこのブログでサイドバー追尾のコードを入れている方はこの部分は無くてもOK。

こんな感じになります。

scroll-top-10

追加したらその下(これも/headの直前)に戻るボタンの仕事内容を書いてあげます。「javaScript」や「jQuery」が分からなくてもそのままコピペでOK。説明は後で書く事にします。

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

「/head」の直前がこんな感じになったらOK。

scroll-top-12

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

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

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

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

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

シーサーブログにトップに戻るボタンを設置する方法”に21件のコメントがあります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    けけ様

    毎度ありがとうございます!私のはフッターの固定メニューをつかってます。けけ様のサイトはWordPressですか?それともSeesaaブログの方でしょうか?

    SeesaaブログだとスマホのHTMLが編集できないと思うので「トップに戻るボタン」は難しいかと思いますが、一応ブログのURLを教えてもらえると助かります。

    もし利用されているのがWordPressであれば固定メニューもしくはトップボタンの削除もできます。こちらの記事です。
    ⇒https://affiliate150.com/footer-menu