【SWELL】トップに戻るボタンのカスタマイズ

2025年2月8日2025年2月13日

「トップに戻る」のボタンを任意の画像に変更して位置の調整
PCでは右スクロールバーを考慮して右側に、スマホでは左手操作を想定して左側にボタンを移動

画像をアップロード

メディア＞新しいメディアファイルを追加で画像をアップロード

画像のURLを確認

メディア＞画像を選択＞添付ファイルの詳細＞ファイルのURLで画像のURLを確認

CSSを “style.css” に追加

外観＞テーマファイルエディタ＞style.cssに下記の内容を追加

メディアにアップロードした画像のファイルのURLを “画像のURL” に追加

ボタン位置調整のために”p-fixBtnWrap” の “right” “left” “bottom” の数値を適宜調整

.p-fixBtnWrap {
	right: 2em; /*右からの位置*/
	bottom: 2em; /*下からの位置*/
}

#pagetop {
	background: url("画像のURL") no-repeat center;
	background-size: contain;
	border: none;
	box-shadow: none;
	opacity: 1;
	border-radius: 0;
	width: 50px; /*画像サイズ*/
	height: 50px; /*画像サイズ*/
}

@media (min-width: 960px) {
#pagetop:hover {
	background-color: transparent !important;
	color: inherit !important;
}
}
#pagetop i {
	display: none;
}
#pagetop .c-fixBtn__label {
	margin: 0;
	position: absolute;
	bottom: -15px;
}

@media (max-width: 600px) {
.p-fixBtnWrap {
	right: auto; /*右からの位置解除*/
	bottom: 0.5em; /*下からの位置*/
	left: 0.5em; /*左からの位置*/
}
}

Note

スマホでは左側に「トップに戻る」ボタンを配置するために “right:auto;” で右配置を解除

以上で「トップに戻る」ボタンの画像変更と位置調整となります。