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. しげぞう より:

    けけ様

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

    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への移行も考えても良いと思います。

  2. けけ より:

    しげぞう様

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

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

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

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

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

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

  3. しげぞう より:

    麻倉様

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

    p.description {
        display: none;
    }

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

  4. 麻倉はるか より:

    しげぞう様

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

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

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

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

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

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

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

  5. しげぞう より:

    よしぼーい様

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

    1.リロード

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

    2.記述ミス

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

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

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

  6. よしぼーい より:

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

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

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