広告 AFFINGER

【STINGER5】コピペで使えるPAGE TOP(上へボタン)のCSSカスタマイズ方法

【STINGER5】コピペでPAGE TOP(上へボタン)のCSSカスタマイズ方法

どうもこんにちは!@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 ボタンを目立つように

デフォルトボタン

デフォルトではPAGE TOPボタンが右に寄っているのでこれを少し離してみます。

CSS

/*--------------------------------
PAGE TOP
---------------------------------*/
#page-top {
	position: fixed;
	z-index: 9999;
	bottom: 20px;
	right: 15px;
	font-size: 12px;
}
ボタン位置変更

これだけでも存在感が少し増しますが、ちょっと物足りないのでさらに押しやすいボタンになるように2パターンのカスタマイズ例を乗せてみます。

以下のカスタマイズ例CSSが使えそうでしたらコピペしちゃって下さい。

PAGE TOP ボタン 角丸

角丸ボタン

角丸 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 ボタン 正円(影付き)

正円のボタン

正円(影付き)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へ!!

ユーザビリティアップのためのカスタマイズですが、読み手により『目障り』だったり『邪魔』と感じる人もいるかもしれません。

この辺りはサイトやブログの相性もあると思います。デザインと合わせて好みのカスタマイズを加えてみてくださいね。

あわせて読みたい

-AFFINGER
-,