【SWELL】ページトップボタンに画像をセットする方法

こんにちはーWebデザインが相変わらず楽しい白石です。
今日は、SWELLの「ページトップボタン」に画像をセットする方法をご紹介します。

「ページトップってなんや？」
て人もいると思いますけど、ページトップボタンってのは下記のようなボタンですね。

このボタン！
シンプルで良いんだけど、サイトによっては自分好みの画像に変えたくないですか？

ページトップボタンを消してposition: fixedでページトップボタンとして設置するのも良いんですけど……
（実際そういう風にしてたこともあります）

でも、ページをスクロールしたらスルッと現れてTOPに戻るとスルッと消えるような自分好みのページトップボタンを実装したいですよね。

てことで今日はページトップボタンを自分好みの画像に変えてしまいましょーね！

ページトップボタンを自分好みの画像に変える方法

正方形の画像を用意
ページトップボタンを表示させる
カスタマイズの追加CSSに記入

流れとしては以上になります。

①正方形の画像を用意

ページトップに据え置きたい正方形の画像を用意してください。
今日は試しにドット絵フリーサイトから以下の絵をお借りして設定していきます。

絵をお借りしたサイト：https://dotown.maeda-design-room.net/

②ページトップボタンを表示させる

「外観」→「カスタマイズ」
「サイト全体設定」をクリック
下に「下部固定ボタン・メニュー」があるのでクリック
ページトップボタンの表示設定があるので表示するを選ぶ（画像では円形になってますが今回は四角を選びました）

③カスタマイズの追加CSSに記入

[data-scrolled=true] .p-fixBtnWrap {
    background-image: url(画像のURL);
    background-size: 50px;
    background-repeat: no-repeat;
    background-position: center center;
}

.c-fixBtn{
	background-color: transparent;
	color: transparent;
	border: none;
	box-shadow: none;
}
.hov-bg-main:hover{
	background-color: transparent !important;
	color: transparent !important;
	background-image: url(画像のURL);
    background-size: 50px;
    background-repeat: no-repeat;
    background-position: center center;
}

「外観」→「カスタマイズ」「追加CSS」に上記を入れたら任意の画像がなんとページトップボタンになっているはずです！
おめでとー。

一応ちょろっと解説しておくと、background-imageで背景画像としてセット、なんやかんやで画像の大きさとか整えて元々あったボタンは申し訳ない気持ちと共に消してる感じです。すまんな！