38

ページの最上部に戻るボタンを画面右下に常駐させるカスタマイズについて書いていきます。

CSSの編集

CSSの編集画面で以下のソースを追加してください。

/* ページトップへ */
.to-pagetop a{
background:url(https://parts.blog.livedoor.jp/img/usr/default_2012/common/to_pagetop.png) 0 0 no-repeat;
display: block;
position: fixed; bottom: 5px;right: 20px;
width: 70px;
height: 70px;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
outline: 0;
opacity: 0.7;
-webkit-transition: opacity linear 0.1s;
-moz-transition: opacity linear 0.1s;
-ms-transition: opacity linear 0.1s;
-o-transition: opacity linear 0.1s;
transition: opacity linear 0.1s;
}
.to-pagetop a:hover {
opacity: 1;
}

ちなみに、以下のスタイルを定義しています。

  1. position: fixed; bottom: 5px;right: 20px; 画面下から 5px、画面右から 20px の箇所に常駐。
  2. opacity 透明度を指定。
  3. trasection マウスをあわせたとき、ふわっと色が変わります。


また、background:url は好みの画像 URL に変更してかまいません。数値も各々で変更して良いです。

HTMLの編集

次に、各ページのHTMLに以下のソースを追加します。

<p class="to-pagetop"><a href="#">↑このページのトップヘ</a></p>

a href="#" はページの最上部へのリンクを意味しています。

以上で完了です。