![stinger5-pagetop.png 【STINGER5】コピペでPAGE TOP(上へボタン)のCSSカスタマイズ方法](https://sitemiru.com/wp-content/uploads/stinger5-pagetop.png)
どうもこんにちは!@dearwalker_yuyaです。
今回はSTINGER5の細かなカスタマイズ記事!
STINGER5の右下にあるPAGE TOP(上へボタン)のボタンをより押しやすくするようにカスタマイズしてみました。
CSSのコピペだけで出来るデザイン変更を使ってオリジナリティを出す方法を用意みたので良かったら参考にしてみて下さい。
PAGE TOP(上へボタン)のカスタマイズCSS
CSSを触るだけで簡単にカスタマイズが出来ます。
カスタマイズ場所はSTINGER5のstyle.cssのこちら。『PAGE TOP』でページ内検索を使うと便利です。
/*-------------------------------- PAGE TOP ---------------------------------*/ #page-top { position: fixed; z-index: 9999; bottom: 20px; right: 0px; font-size: 12px; } #page-top a { background: #665e53; text-decoration: none; color: #fff; padding: 10px; text-align: center; display: block; -moz-opacity: 0.3; opacity: 0.3; } #page-top a:hover { text-decoration: none; background: #999; color: #fff; }
こちらに手を加えてデザインをカスタマイズ。
PAGE TOP ボタンを目立つように
![stinger5-pagetop.jpg デフォルトボタン](https://sitemiru.com/wp-content/uploads/stinger5-pagetop.jpg)
デフォルトではPAGE TOPボタンが右に寄っているのでこれを少し離してみます。
CSS
/*-------------------------------- PAGE TOP ---------------------------------*/ #page-top { position: fixed; z-index: 9999; bottom: 20px; right: 15px; font-size: 12px; }
![stinger5-pagetop.jpg ボタン位置変更](https://sitemiru.com/wp-content/uploads/stinger5-pagetop1.jpg)
これだけでも存在感が少し増しますが、ちょっと物足りないのでさらに押しやすいボタンになるように2パターンのカスタマイズ例を乗せてみます。
以下のカスタマイズ例CSSが使えそうでしたらコピペしちゃって下さい。
PAGE TOP ボタン 角丸
![stinger5-pagetop.jpg 角丸ボタン](https://sitemiru.com/wp-content/uploads/stinger5-pagetop2.jpg)
角丸 CSS
/*-------------------------------- PAGE TOP ---------------------------------*/ #page-top { position: fixed; z-index: 9999; bottom: 20px; right: 15px; font-size: 25px; } #page-top a { background: #665e53; text-decoration: none; color: #fff; padding: 10px 15px; text-align: center; display: block; -moz-opacity: 0.3; opacity: 0.3; border-radius: 5px; }
font-sizeとpaddingでボタンを大きくし、border-radiusで角丸にしてあります。デフォルトから大きく変化してないので違和感のないタイプ。
PAGE TOP ボタン 正円(影付き)
![stinger5-pagetop.jpg 正円のボタン](https://sitemiru.com/wp-content/uploads/stinger5-pagetop3.jpg)
正円(影付き)CSS
/*-------------------------------- PAGE TOP(上へ) ---------------------------------*/ #page-top { position: fixed; z-index: 9999; bottom: 20px; right: 15px; font-size: 30px; } #page-top a { width: 30px; height: 30px; background: #fff; text-decoration: none; color: #dc143c; padding: 10px; text-align: center; display: block; border-radius: 50%; -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; -moz-opacity: 0.8; opacity: 0.8; }
PAGE TOP ボタンを大きくし、border-radiusで正円に。
さらに影も付けてみました。半透明のボタンなので目立ちつつも読みづらくならないようにしてあります。
まとめ
![top.png Topへ!!](https://sitemiru.com/wp-content/uploads/top.png)
ユーザビリティアップのためのカスタマイズですが、読み手により『目障り』だったり『邪魔』と感じる人もいるかもしれません。
この辺りはサイトやブログの相性もあると思います。デザインと合わせて好みのカスタマイズを加えてみてくださいね。