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

この記事は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の編集ができる無料ブログ)に「トップに戻るボタン」を設置する方法でした。

WordPressの始め方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

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

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

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

  1. けけ

    しげぞう様

    いつもお世話になっております。
    早々にご返答いただきましてありがとうございます。

    2点とも承知致しました。
    最下部のシーサーのタグにつきましては、
    念のため問い合わせてからにいたします。
    ご丁寧にありがとうございます。

    WordPressへの引っ越しも、現在検討中です。

    いかんせんブログが2つあるため、
    めんどくささから踏み切れずにおりました・・・

    今後のことも含めて検討いたします。

    大変助かりました!
    いつもありがとうございます!

  2. しげぞう 投稿作成者

    けけ様

    コメントありがとうございます。

    1.トップに戻るボタン

    トップに戻るボタンですが、Seesaaブログの場合はスマホページが別になっており、HTMLが編集できませんので、現状ではおそらく無理ではないかと思います。スマホ版のHTMLが編集できるようになれば可能です。

    2.プロデュースバイシーサー

    これ、フッターの一番下にあるやつだと思うのですが、「poweredby~」のやつかな?これは以前は削除できなかった部分なんですが、今は多分削除できるかも。

    ただ、これSeesaa自体にリンクを送っている部分なのでもしかすると規約的にちょっと。。。という部分かもしれません。なので消すのであれば一度問合せしてみて確認するのが確実です。

    規約違反などと言われてしまうとブログ削除されても文句は言えませんので、個人的にはあまりおすすめはしません。

    HTMLの編集で以下のコードを削除という感じになると思います。

    <div class="poweredby">
    				<a href="<% site_info.portal_url -%>/"><img src="<% site_info.blog_url -%>/img/seesaablog.gif" width="138" height="22" alt="Powered by Seesaa" /></a>
    				<div class="poweredby__body">
    					<a href="<% site_info.portal_url -%>">Seesaa</a><a href="<% site_info.blog_url -%>">ブログ</a>
    				</div>
    			</div>

    それから現在アドセンスの申請は独自ドメインの必要があります。WordPressならけけ様の問題2点も解決しますし、アドセンスの申請用とてしても問題ありませんので、一度WordPressへの移行も考えても良いと思います。

  3. けけ

    しげぞう様

    いつもお世話になっております。
    先日はご丁寧にご教授いただきありがとうございました。

    2点ほどお伺いしたく、
    お知恵をお借りできれば幸いでございます。

    1点目
    ■トップへ戻るボタンのスマホでの適用
    pcでの表示は問題なく出来ました。ありがとうございます。
    スマホで見る際に、同じようにトップへ戻るボタンを反映させたいのですが可能でしょうか?

    ■プロデュースバイシーサーの削除
    これはこちらの記事とは別件なのですが、
    一番下にあります、プロデュースバイシーサーの文字。
    あちらを消したいのですが可能でしょうか?
    (アドセンスの申請のためシーサー使用であることを消したいのですが…)

    お忙しいところ申し訳ございませんが、
    ご教授いただけますと幸いです。

    よろしくお願いいたします。

  4. しげぞう 投稿作成者

    麻倉様

    コメントありがとうございます。Seesaaブログは使っているデザインによって違う部分があるかもしれませんが、以下のコードをCSSに追加で非表示にできるかな?と思います。

    p.description {
        display: none;
    }

    これをCSS(スタイルシート)に追加して保存し、ブログを確認してみて下さい。

  5. 麻倉はるか

    しげぞう様

    はじめまして、麻倉と申します。

    入院されていたそうですが、おかげんはいかがでしょうか?

    体調が回復されましたら返信よろしくお願いいたします。

    実は、シーサーブログでアドセンスをはじめようと思うのですが、新システムになってからもうチンプンカンプンで困っていました。

    このサイトに出会えたのは、もうラッキーだったとしかいいようがありません。 (感激!)

    それから、ちょっと質問させていただきたいのですが、ブログのヘッダーにタイトルのみを表示させて、説明文を非表示にしたいと思います。

    編集の方法を教えていただきたいのですが、よろしくお願いいたします。

  6. しげぞう 投稿作成者

    よしぼーい様

    コメントありがとうございます。同じような質問が先ほどあり、対策が同じなのでコピペですみません。対策は以下です。

    1.リロード

    以前のデータが残っていて反映が確認できない場合がありますので、ブログを表示させて「Ctrl」と「F5」を一緒に押して確認して下さい。

    2.記述ミス

    リロードしても反映されない場合にはコードの記述ミスがあるかもしれません。CSSの途中で「 } 」が抜けていたり、1つミスがあるとそれより後の記述も反映されない場合がありますので、一度以前の記述も含めて確認をしてみて下さい。

    3.私の紹介コードのミス

    一応確認してから記事にしているのですが、時々私も記事内のコードにミスがあります。すみません!なので、上記3点でも反映されない場合にはお手数ですが、ブログのURLを教えて下さい。コメント公開時にはURLは削除しますし、反映されない原因を探す事ができると思います。どうぞよろしくお願いします。

  7. よしぼーい

    いつも参考にさせて頂いて大変助かっております。

    今回のtopに戻るボタンですがcssが機能しないのですがアドバイスしていただけるでしょうか?

  8. しげぞう 投稿作成者

    みっちゃん様

    わざわざ報告ありがとうございます!無事に設置できて良かったです。戻るボタンは結構クリックされるのでサイズや色などデザインも色々変えて見て下さいね!また何かありましたらコメント下さいませ。

  9. みっちゃん

    簡単設置できて嬉しいです!!
    ありがとうございました!!
    ブックマークしておきます。

  10. しげぞう 投稿作成者

    fuku様

    コメントありがとうございます。以前は上手く機能したのに突然機能しなくなった原因はよく分かりませんが、私も時々HTMLなどの変更が反映されなくなる時があります。その場合には一度カスタマイズした部分をコピーしておいてから削除して保存。それで再度切り取った部分を貼り付けて保存。これで上手く反映される場合があります。

    PC版ではこれまで通り機能している事を考えるとコード自体は間違っていないと思いますので、あと考えられるのはそのリダイレクト自体になにかミス、もしくはSeesaa側の対策でシステムの変更などあるのかもしれませんね。

  11. fuku

    しげぞう様

    いつも記事を参考にさせていただいております。fukuです。

    トップに戻るボタンを設置させていただいたのですが、PCで表示した場合はクリックすると
    トップにもどりますが、スマホで見ると表示はされますがタップ出来ず、トップに戻りません。

    スマホでアクセスした際はPC版にリダイレクトさせているため、HTMLは同じです。
    数週間前まではスマホでもタップでトップに戻っていたのですが。。。

  12. しげぞう 投稿作成者

    makey様

    コメントありがとうございます。この記事を書いた時ちょうどJavaScriptやjQueryを勉強していたので、1つこれを使って何かできないかな?と考えていて、トップに戻るボタンを作成しました。それまでSeesaaブログのカスタマイズでトップに戻るボタンの設置に関する情報が無かったので、自作していい勉強になりました(笑)

    また何か分からない部分などありましたらコメント下さいませ。今後もよろしくお願い致します。

  13. makey

    しげぞうさんのトップに戻るボタン作らせていただきました。
    ありがとうございます。
    ブログがボタン一つで見違えるほど素晴らしくなりました。本当に感謝しています。
    しげぞうさんのように自分でボタンなど作れるように勉強したいと思います。

  14. しげぞう 投稿作成者

    >もさん様

    コメントありがとうございます。最初は真似でもいいのでやっていると自分でできる部分も増えてきますので、もっと自分好みのサイトにできるようになると思います。紹介している方法をどんどん応用して素敵なサイトにしてみて下さいね。また何か分からない部分などありましたらまたコメント下さいませ。

  15. もさん

    すごくわかりやすかったです!!
    自分のサイトがステキになった気がします。
    ありがとうございます。

  16. しげぞう 投稿作成者

    >アサゲン様

    コメントありがとうございます。私も再度自分のブログで試してみましたが設置はできたのでコード自体は間違ってはいないかと思います。お手数ですが、もう一度コードを確認し、それでも設置出来ない場合にはURLを教えて頂けると助かります。コメント公開時にはURLは削除致しますのでどうぞよろしくお願い致します。

  17. しげぞう 投稿作成者

    >シサ太郎様

    わざわざ報告ありがとうございます。PVも増えてよかったです。また今後も新しい記事も追加していきますので今後ともどうぞよろしくお願い致します。

  18. シサ太郎

    うまくできました ^ ^

    1,2ページしか見てもらえなかったブログが、
    3,4ページも見てもらえるようになりました。

    感謝します。