　2018年版ブログにトップに戻るボタンをつけた Seesaa BLOG編: ສະບາຍດີ（サバイディー; ラオ語でこんにちは！）

2018年10月26日

　2018年版ブログにトップに戻るボタンをつけた Seesaa BLOG編

ສະບາຍດີ!(さばいでぃー！;ラオ語でこんにちは！)

Cafe & Bar ສະບາຍດີ店主です。

ブログにトップに戻るボタンをつけてみました。
その時の苦戦ぶりを備忘録としてという気持ちが72%、この記事がみなさんの役に少しでも立てばという気持ちが20%、ボクこんなことできちゃったよ、すげーという気持ちが8%（絶対ケタ控えめに言ってる）で記録しています。

トップに戻るボタンとは

他の人のブログを読んでいると、下へ下へとスクロールさせると、画面右下に上向きの矢印が現れます。クリックしてみると、ギュイーンとそのページのトップに戻るという、使いだすとたいへん便利なボタンです。

これなんですけど、スクリーンショットでは写すことができなかったので、恥ずかしいですが画面をカメラで撮影するというアナログ手法を使いました。見にくくてすみません。

目的

目次をつけるようになり、これでうちのブログも少しは読みやすくなっただろうと~~調子に乗ってい~~　思っている店主でしたが、このトップに戻るボタンを是非とも導入し、ブログを読んでくださっているみなさんの負担が少しでも軽減できるようにと思いました。

STEP1 CSSでボタンのデザインを編集する

Seesaa BLOGの管理画面に入り、「デザイン」→「デザイン設定」を開けます。

「デザイン」をクリックして

「デザイン設定」をクリックして開けます。

スタイルシートを編集するデザインのタイトルをクリックします。

CSS編集の最後に次の文を書き込みます。
/* 　 */に挟まれた文は削除する必要はありません。後で分かりやすいように残しておきました。

コピペした後に保存するのを忘れずに！

/* トップページへ戻る */
#scroll-top { /* ボタンの調整 */
  position: fixed; /* 画面がスクロールしても固定する */
  right: 20px; /* 固定する場所は右から20px */
  bottom: 20px; /* 固定する場所は下から20px */
  display: none; /* ボタンの表示は最初は非表示 */
  width: 150px; /* ボタンの横幅は150px */
  height: 50px; /* ボタンの高さは50px */
  cursor: pointer; /* カーソルを指のマークにする */
  text-align: center; /* ボタンの文字の位置を中央にする */
  color: #fff; /* ボタンの文字の色は#fff */
  -webkit-border-radius: 10px; /* Safari,Google Chrome用 */
     -moz-border-radius: 10px; /* 角を10px丸くする */
          border-radius: 10px; /* 角を10px丸くする */
  background-color: #00ffff; /* ボタンの背景色は#00ffff */
  box-shadow: rgba(0,0,0,0.3) 0px 0px 1px 1px; /* よりボタンの感じを表現するための調整 */
}

#scroll-top p { /* ボタンのテキスト部分 */
font-weight: bold; /* 文字を太くする */
line-height: 50px; /* 文字の高さは50px */
margin: 0 0 0 0; /* 余計な余白を取らない */
}

STEP2 ボタンを機能させる

「html」ボタンをクリックして「htmlの追加」をします。（既に編集中のhtmlがあれば、そちらを開けてください）

「html」ボタンをクリックして

「htmlの追加」ボタンをクリックして

先にファイル名を記入して保存しておきましょう。

<head> ～ </head>に囲まれている部分にjQuery（javaScriptのひとつ）を使うソースコードを記入します。
続いて動作を命令するコードを記入します。

店主は、</head>を探し、直前に入れました。

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(){
var tg = $("#scroll-top");
$(window).scroll(function(){
var i=$(window).scrollTop();
if(i >50){tg.fadeIn("slow");}else{tg.fadeOut("slow");}
});
tg.on("click",function(){ $("html,body").animate({scrollTop:0},"slow"); });
});
</script>

STEP3 htmlにボタンを追加する

<html> ～ </html>内の頭の方に<head> ～ </head>があり、続いて<body>～</body>があります。この中にボタンを追加するコードを記入します。<body>～</body>内ならどこでもいいそうですが、店主は分かりやすいように</body>を探し、直前に入れました。

ここでもコピペした後に保存するのを忘れないでくださいね！

<div id="scroll-top">
<p>▲ページトップへ<p>
</div>

最後に気をつけること

こうしてトップページへ戻るボタンを設置する作業を終え、ワクワクしながら自分のブログを読んでみた店主でしたが、肝心のボタンは一向に現れません。何度も見直したり、記事が古いのではないかと思い、他の人のブログも読み漁ってはいろいろと試してみました。

どれだけ試してみても、ボタンは一向に現れません。

そこでどうしたかというと．．．

とりあえず、ふて寝しました。

で、次の日自分のブログを開けてみると、あれ？

トップに戻るボタンが出現しました。

なんなんでしょうね？
反映するのに少し時間がかかるようです。
その後ボタンの色を変えてみたのですが、やはり数時間経ってから色が変わっているのを確認しました。

なかなかうまくいかないと困っている方、少し時間をおいてから確認してみることをお勧めします。

ボタン設置にあたり、主にこちらのサイトを参考にさせていただきました。

Seesaaブログにトップへ戻るボタンを設置しよう