「トップに戻る」ボタンを設置する

スマホでブログを見るときに、あると便利な「トップに戻る」ボタン。
設置は難しくありません。

photo credit: Maple Rain 3 via photopin (license)
Seesaa公式ブログにわかりやすい説明があります。
Seesaaブログにトップへ戻るボタンを設置しよう

注意点

上の記事の通りにやればすぐにボタン設置はできるのですが、PCテンプレートをスマホで強制表示する設定にしていると、ボタンの位置が追尾広告の真上に来てしまいます。「トップへ戻る」ボタンを押すたびに、広告をタップしてしまうのは訪問してくださる方に大変申し訳ない。
そこで、スタイルシートに追加したタグを、次のように変更します。

/* トップページへ戻る */
#scroll-top { /* ボタンの調整 */
position: fixed; /* 画面がスクロールしても固定する */
right: 20px; /* 固定する場所は右から20px */
bottom: 70px; /* 固定する場所は下から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: #369928; /* ボタンの背景色は#369928 */
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; /* 余計な余白を取らない */
}

bottomの数値がもともとは20pxになっていますが、70～80pxに変更します。
これで、追尾型広告とボタンが重ならなくなります。

ちなみに、このブログは本日現在、公式ブログと同じテンプレートを使っていますが、カラーを変えているのでかなり印象が異なって見えると思います。CSSでカラーの変更方法に慣れると、簡単にブログのイメージを変えることができるのでおすすめです。