今回はSeesaaブログに記事の先頭に戻るボタンを設置する方法を紹介します。これは別にシーサーブログに限らずFC2や別の無料ブログ（HTMLが編集できる無料ブログ）ならどの無料ブログでも同じ要領で設置する事ができます。今回作ってみたのはこのブログでも右下に表示されるこんな感じのボタンです。
もちろん戻るボタンの文言とかサイズは自由に変更できます。
トップに戻るボタンの作り方と設置方法
先にこの「トップに戻るボタン」の機能を紹介しておきます。
- ページを下にスクロールするとボタンが右下に出現（右下以外でも可）
- ボタンをクリックするとページの先頭に戻る
という感じのボタンです。これを設置する方法をできるだけシンプルに説明してみます。
戻るボタンのデザインをCSS（スタイルシート）で作成する
まず最初に戻るボタンのデザインをCSSで作成します、とはいっても既に作っておいたのでこのままのデザインで設置してみてあとからCSS（スタイルシートの編集）でサイズやボタンの色、文字の色等を変更する事をおすすめします。
設置するまではよく分からない部分も多いとは思いますが、実際に一度設置してみると理解は深まるはず、多分。
Seesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒「適応中のデザインタイトル」をクリックして、「スタイルシート編集」のタブを選択します。
スタイルシートの一番下に次のコードを追加。
#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編集」のタブをクリック。
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>
こんな感じになります。
追加できたら一度保存しておきます。
HTMLにボタンを追加する
同じくHTMLにさらにボタンを追加していきます。
ボタンを設置する記述はこの「body」の中ならどこでもいいのですが、今回は分かりやすいようにHTMLの一番下の「/body」の直前に次の記述をします。
先程と同じHTMLの編集画面でHTMLの一番下（最後）の方に「/body」という部分がありますので「/body」の直前に以下のコードを追加。
<div id="scroll-top"> <p>▲ページの先頭へ</p> </div>
こんな感じになります。
ここまで記述したら「保存」を忘れずに。そしてきちんと機能するか確かめておく事。画面を下にスクロールするとページの先頭に戻るボタンが出現するはずです。もしボタンが出てこない場合は「Ctrl」と「F5」を同時に押してリロードして確認。
最後に記述した内容を簡単に説明しておくと、
- ページをスクロール（トップから50px下に移動）をすると非表示していたボタンが出現
- トップから50px以内に戻ってきた時はボタンは非表示。
- ボタンをクリックするとページの先頭へ移動
こんな感じです。ちなみに表示と非表示は「fadeIn」と「fadeOut」という記述部分です。もっと詳しく知りたい場合は「jQuery」を勉強すれば1週間くらいでできるようになると思います。但しある程度HTMLとCSSの知識は必要ですが。
それからSeesaaブログの場合はTOPに戻るボタンはPCページだけです。スマホページのHTMLは編集できません。
元々無料ブログのスマホページは広告も多く、自由度も低いのでブログで収益化をするのであればWordPressなどへの移行を検討してみて下さい。
以上シーサーブログや無料ブログ（HTMLの編集ができる無料ブログ）に「トップに戻るボタン」を設置する方法でした。
ブログを収益化するならWordPress利用がおすすめ
無料ブログでは利用規約の変更やアカウント停止、サービス終了などのリスクがあります。
また、表示速度も重く、スマホのページには消す事のできない広告が多いためブログでの収益化を考えているならWordPressの利用が圧倒的におすすめです。
WordPressと無料ブログの違いや必要な料金などは以下記事でまとめてます。
コメント
あずき様
返信ありがとうございます。チェックしてみたのですが「戻るボタン」のコードが見当たりません。一度外されているかもしれませんが、チェックできませんのでまずはコードを追加してから再度コメント下さい。スタイルシート（CSS）とHTMLでそれぞれ追加するコードがありますので、間違わないように追加し、またコメント下さい。
しげぞう様
返信ありがとうございます。
アドバイスどおり
リロード、コードを外して保存後、再度追加を行ったんですが
ダメでした、、、
自分のブログのURLです。
何度も質問して申し訳ないですが
どうしても「戻るボタン」が必要なので
お願いします！
あずき様
コメントありがとうございます。ブラウザに以前のデータ（キャッシュ）が残っているかもしれませんので、「Ctrl」と「F5」を一緒に押してリロードしてから確認もしくは別のブラウザで確認するのが確実かなと思います。もしそれでも表示されないなら一度追加したコードを外して保存し、再度追加して保存。これで上手くいく場合はがあります。
いつも本当にお世話になってます。
シーサーブログです。
何度やっても、プレビューだと表示されますが
自分のブログをみたら、表示されません。
分からないので
お願いします!!
けけ様
毎度ありがとうございます！私のはフッターの固定メニューをつかってます。けけ様のサイトはWordPressですか？それともSeesaaブログの方でしょうか？
SeesaaブログだとスマホのHTMLが編集できないと思うので「トップに戻るボタン」は難しいかと思いますが、一応ブログのURLを教えてもらえると助かります。
もし利用されているのがWordPressであれば固定メニューもしくはトップボタンの削除もできます。こちらの記事です。
⇒https://affiliate150.com/footer-menu
しげぞう様
いつもお世話になっております。
前回質問させていただきました内容と同じになってしまうのですが・・・
こちらのサイトの様に、
スマホから見た場合にもTOPへ戻るスクロールを入れたいのですが、
しげぞう様のこちらのページでは、
どういったScriptを利用されているのでしょうか？
TOPへ戻るボタンが表示はされますが、
稼働しないがために、ボタンバックの広告が押されてしまい、
他のサイトへ飛んでしまう自体が発生しているため、
TOPへ戻るボタン自体を削除しようか迷っております。
スマホからの閲覧が大半のため、
なんとかボタンの設置をしたいのですが・・・
お知恵を拝借出来ないでしょうか。
よろしくお願い致します。
しげぞう様
いつもお世話になっております。
早々にご返答いただきましてありがとうございます。
2点とも承知致しました。
最下部のシーサーのタグにつきましては、
念のため問い合わせてからにいたします。
ご丁寧にありがとうございます。
WordPressへの引っ越しも、現在検討中です。
いかんせんブログが2つあるため、
めんどくささから踏み切れずにおりました・・・
今後のことも含めて検討いたします。
大変助かりました！
いつもありがとうございます！
けけ様
コメントありがとうございます。
１．トップに戻るボタン
トップに戻るボタンですが、Seesaaブログの場合はスマホページが別になっており、HTMLが編集できませんので、現状ではおそらく無理ではないかと思います。スマホ版のHTMLが編集できるようになれば可能です。
２．プロデュースバイシーサー
これ、フッターの一番下にあるやつだと思うのですが、「poweredby～」のやつかな？これは以前は削除できなかった部分なんですが、今は多分削除できるかも。
ただ、これSeesaa自体にリンクを送っている部分なのでもしかすると規約的にちょっと。。。という部分かもしれません。なので消すのであれば一度問合せしてみて確認するのが確実です。
規約違反などと言われてしまうとブログ削除されても文句は言えませんので、個人的にはあまりおすすめはしません。
HTMLの編集で以下のコードを削除という感じになると思います。
それから現在アドセンスの申請は独自ドメインの必要があります。WordPressならけけ様の問題２点も解決しますし、アドセンスの申請用とてしても問題ありませんので、一度WordPressへの移行も考えても良いと思います。
しげぞう様
いつもお世話になっております。
先日はご丁寧にご教授いただきありがとうございました。
2点ほどお伺いしたく、
お知恵をお借りできれば幸いでございます。
1点目
■トップへ戻るボタンのスマホでの適用
pcでの表示は問題なく出来ました。ありがとうございます。
スマホで見る際に、同じようにトップへ戻るボタンを反映させたいのですが可能でしょうか？
■プロデュースバイシーサーの削除
これはこちらの記事とは別件なのですが、
一番下にあります、プロデュースバイシーサーの文字。
あちらを消したいのですが可能でしょうか？
(アドセンスの申請のためシーサー使用であることを消したいのですが…)
お忙しいところ申し訳ございませんが、
ご教授いただけますと幸いです。
よろしくお願いいたします。
麻倉様
コメントありがとうございます。Seesaaブログは使っているデザインによって違う部分があるかもしれませんが、以下のコードをCSSに追加で非表示にできるかな？と思います。
p.description { display: none; }これをCSS（スタイルシート）に追加して保存し、ブログを確認してみて下さい。
しげぞう様
はじめまして、麻倉と申します。
入院されていたそうですが、おかげんはいかがでしょうか?
体調が回復されましたら返信よろしくお願いいたします。
実は、シーサーブログでアドセンスをはじめようと思うのですが、新システムになってからもうチンプンカンプンで困っていました。
このサイトに出会えたのは、もうラッキーだったとしかいいようがありません。 （感激!）
それから、ちょっと質問させていただきたいのですが、ブログのヘッダーにタイトルのみを表示させて、説明文を非表示にしたいと思います。
編集の方法を教えていただきたいのですが、よろしくお願いいたします。
よしぼーい様
コメントありがとうございます。同じような質問が先ほどあり、対策が同じなのでコピペですみません。対策は以下です。
１．リロード
以前のデータが残っていて反映が確認できない場合がありますので、ブログを表示させて「Ctrl」と「F5」を一緒に押して確認して下さい。
２．記述ミス
リロードしても反映されない場合にはコードの記述ミスがあるかもしれません。CSSの途中で「 } 」が抜けていたり、１つミスがあるとそれより後の記述も反映されない場合がありますので、一度以前の記述も含めて確認をしてみて下さい。
３．私の紹介コードのミス
一応確認してから記事にしているのですが、時々私も記事内のコードにミスがあります。すみません！なので、上記３点でも反映されない場合にはお手数ですが、ブログのURLを教えて下さい。コメント公開時にはURLは削除しますし、反映されない原因を探す事ができると思います。どうぞよろしくお願いします。
いつも参考にさせて頂いて大変助かっております。
今回のtopに戻るボタンですがcssが機能しないのですがアドバイスしていただけるでしょうか？
みっちゃん様
わざわざ報告ありがとうございます！無事に設置できて良かったです。戻るボタンは結構クリックされるのでサイズや色などデザインも色々変えて見て下さいね！また何かありましたらコメント下さいませ。
簡単設置できて嬉しいです！！
ありがとうございました！！
ブックマークしておきます。
fuku様
コメントありがとうございます。以前は上手く機能したのに突然機能しなくなった原因はよく分かりませんが、私も時々HTMLなどの変更が反映されなくなる時があります。その場合には一度カスタマイズした部分をコピーしておいてから削除して保存。それで再度切り取った部分を貼り付けて保存。これで上手く反映される場合があります。
PC版ではこれまで通り機能している事を考えるとコード自体は間違っていないと思いますので、あと考えられるのはそのリダイレクト自体になにかミス、もしくはSeesaa側の対策でシステムの変更などあるのかもしれませんね。
しげぞう様
いつも記事を参考にさせていただいております。fukuです。
トップに戻るボタンを設置させていただいたのですが、PCで表示した場合はクリックすると
トップにもどりますが、スマホで見ると表示はされますがタップ出来ず、トップに戻りません。
スマホでアクセスした際はPC版にリダイレクトさせているため、HTMLは同じです。
数週間前まではスマホでもタップでトップに戻っていたのですが。。。
makey様
コメントありがとうございます。この記事を書いた時ちょうどJavaScriptやjQueryを勉強していたので、１つこれを使って何かできないかな？と考えていて、トップに戻るボタンを作成しました。それまでSeesaaブログのカスタマイズでトップに戻るボタンの設置に関する情報が無かったので、自作していい勉強になりました（笑）
また何か分からない部分などありましたらコメント下さいませ。今後もよろしくお願い致します。
しげぞうさんのトップに戻るボタン作らせていただきました。
ありがとうございます。
ブログがボタン一つで見違えるほど素晴らしくなりました。本当に感謝しています。
しげぞうさんのように自分でボタンなど作れるように勉強したいと思います。
＞もさん様
コメントありがとうございます。最初は真似でもいいのでやっていると自分でできる部分も増えてきますので、もっと自分好みのサイトにできるようになると思います。紹介している方法をどんどん応用して素敵なサイトにしてみて下さいね。また何か分からない部分などありましたらまたコメント下さいませ。
すごくわかりやすかったです！！
自分のサイトがステキになった気がします。
ありがとうございます。
＞アサゲン様
コメントありがとうございます。私も再度自分のブログで試してみましたが設置はできたのでコード自体は間違ってはいないかと思います。お手数ですが、もう一度コードを確認し、それでも設置出来ない場合にはURLを教えて頂けると助かります。コメント公開時にはURLは削除致しますのでどうぞよろしくお願い致します。
できないですーーｗｗ
どうすればいいでしょうか？
＞シサ太郎様
わざわざ報告ありがとうございます。PVも増えてよかったです。また今後も新しい記事も追加していきますので今後ともどうぞよろしくお願い致します。
うまくできました ^ ^
1,2ページしか見てもらえなかったブログが、
3,4ページも見てもらえるようになりました。
感謝します。