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

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

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

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

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

スポンサーリンク

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

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

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

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

戻るボタンのデザインを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;      /* 余計な余白はいらない */ 
}

これはボタンに表示させるテキスト部分ですね。ここで重要なポイントが1つ。「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の編集ができる無料ブログ)に「トップに戻るボタン」を設置する方法でした。

コメント

  1. あずき より:

    しげぞう様

    返信ありがとうございます。
    アドバイスどおり
    リロード、コードを外して保存後、再度追加を行ったんですが
    ダメでした、、、

    自分のブログのURLです。

    何度も質問して申し訳ないですが
    どうしても「戻るボタン」が必要なので
    お願いします!

  2. しげぞう より:

    あずき様

    コメントありがとうございます。ブラウザに以前のデータ(キャッシュ)が残っているかもしれませんので、「Ctrl」と「F5」を一緒に押してリロードしてから確認もしくは別のブラウザで確認するのが確実かなと思います。もしそれでも表示されないなら一度追加したコードを外して保存し、再度追加して保存。これで上手くいく場合はがあります。

  3. あずき より:

    いつも本当にお世話になってます。

    シーサーブログです。
    何度やっても、プレビューだと表示されますが
    自分のブログをみたら、表示されません。

    分からないので
    お願いします!!

  4. しげぞう より:

    けけ様

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

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

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

  5. けけ より:

    しげぞう様

    いつもお世話になっております。

    前回質問させていただきました内容と同じになってしまうのですが・・・
    こちらのサイトの様に、
    スマホから見た場合にもTOPへ戻るスクロールを入れたいのですが、
    しげぞう様のこちらのページでは、
    どういったScriptを利用されているのでしょうか?

    TOPへ戻るボタンが表示はされますが、
    稼働しないがために、ボタンバックの広告が押されてしまい、
    他のサイトへ飛んでしまう自体が発生しているため、
    TOPへ戻るボタン自体を削除しようか迷っております。

    スマホからの閲覧が大半のため、
    なんとかボタンの設置をしたいのですが・・・

    お知恵を拝借出来ないでしょうか。
    よろしくお願い致します。

  6. けけ より:

    しげぞう様

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

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

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

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

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

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

タイトルとURLをコピーしました