トップへ戻るボタンの位置やサイズをcssでカスタマイズしよう！【レスポンシブ対応】

.totop{
	right:(好きな数)px;/*右からの距離*/
	bottom:(好きな数)px;/*下からの距離*/
	width:(好きな数)px;/*ボタンの横幅*/
	height:(好きな数)px;/*ボタンの縦幅*/
}

/*トップボタンに好きな画像を入れている場合*/
.totop img{
	position:relative;
	bottom:10px;/*トップボタンから見て下からの距離*/
}

/*レスポンシブ対応*/
@media screen and (max-width:767px) {
.totop {
	right:(好きな数)px;/*モバイル・タブレットでの右からの距離*/
	bottom:(好きな数)px;/*モバイル・タブレットでの下からの距離*/
        width:(好きな数)px;/*モバイル・タブレットでの右からの横幅*/
        height:(好きな数)px;/*モバイル・タブレットでのボタン縦幅*/
}
}

コピペした後、（好きな数字）と書いているところに数字を入れます！

自分の好みのサイズや位置にすればOKです。

amuu

トップバーのカスタマイズから編集すると、実際の位置を見ながら調整できます！

私の場合は以下のようにしています。

SANGOでトップボタンに画像を入れる方法はこちらの記事で解説しています↓

関連記事：【カスタマイズ】トップボタンに好きな画像を入れよう！

きちんと表示されているか、広告に隠れないかなどをチェックします！

特にスマホから記事を見る人は多いので、スマホからの見え方に気をつけましょう。

※Google Chromeのデベロッパーツールでもチェックできますが実際とずれる時があるので、スマホから実際にチェックした方が良いです！

例の場合だとclassは「totop」だと判明する

WordPressの場合は「ここからCSS記載」みたいな文言が書いてあるはずなので、そこから下に追記する

amuu

そうしないとデザインが崩れるかもしれないの注意が必要ですっ！

.totop{
	right:(好きな数)px;/*右からの距離*/
	bottom:(好きな数)px;/*下からの距離*/
	width:(好きな数)px;/*ボタンの横幅*/
	height:(好きな数)px;/*ボタンの縦幅*/
}

/*トップボタンに好きな画像を入れている場合*/
.totop img{
	position:relative;
	bottom:10px;/*トップボタンから見て下からの距離*/
}

/*レスポンシブ対応*/
@media screen and (max-width:767px) {
.totop {
	right:(好きな数)px;/*モバイル・タブレットでの右からの距離*/
	bottom:(好きな数)px;/*モバイル・タブレットでの下からの距離*/
        width:(好きな数)px;/*モバイル・タブレットでの右からの横幅*/
        height:(好きな数)px;/*モバイル・タブレットでのボタン縦幅*/
}
}

この記事を見てくれている方は、多少HTMLとCSSの知識がある方だと思うんですが…

念のために書いておくと、多くのcssではclass（クラス）で指定して見た目を調整します。

amuu

classがそのパーツの名前というわけ！

ですので、totopクラスの場合は「.totop」と書きます！

よくわからない人は、とりあえずコピペして数字を入れてみたら多分何となくわかるはず…

きちんと表示されているか、広告に隠れないかなどをチェックします！

特にスマホから記事を見る人は多いので、スマホからの見え方に気をつけましょう。

※Google Chromeのデベロッパーツールでもチェックできますが実際とずれる時があるので、スマホから実際にチェックした方が良いです！