【SWELL】トップへ戻るボタンを好きな画像に変更する

2023/04/092024/10/18

【SWELL】トップへ戻るボタンを好きな画像に変更する

SWELLのページトップボタンは、カスタマイザーから形を変えたりテキストを入れたりすることができますが、画像にすることはできません。

そこで今回はSWELLのページトップボタンを、お好みの画像に変更する方法を書いていきたいと思います！

カスタマイズする際の注意事項

作業前にバックアップを取ることを推奨します。
カスタマイズは自己責任でお願いします。

CONTENTS

カスタマイズ方法

事前準備

カスタマイザーでページトップボタンを表示させておく（形はどちらでもOK）
使いたい画像をメディアライブラリにアップしてパスを控える

画像パスの確認

画像パスはこちらから確認＆コピーが可能です。

CSSを追加する

以下のCSSをカスタマイザー＞追加CSSに追加します。

子テーマのstyle.cssでもOK！

#pagetop {
  background: url("画像パス") no-repeat center;
  background-size: contain;
  border: none;
  box-shadow: none;
  opacity: 1;
  border-radius: 0;
  width: 60px; /*サイズ調整*/
  height: 60px; /*サイズ調整*/
}
@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;
}

“画像パス”の部分は先ほど控えた画像のパスに置き換えてください。

widthとheightの数値を変えることで画像サイズを変更できます。

カスタマイズはこれだけでOK！画像が表示されましたか？

かなり簡単なのでみなさんもやってみてくださいね。

当サイトのようにボタンをクリックしたら違う画像に差し替えるようにしたい場合は、こちらでカスタマイズ方法を解説しています。