【SWELL】ページトップボタンをCSSでカスタマイズする方法

SWELLのデフォルトのページトップボタンは、丸みのあるシンプルなデザインで可愛いですが、サイトのトーンに合わせて少しデザインを変えたいときがあります。

このページトップボタンは、カスタマイザーからは変更できませんが、CSSを少し追加するだけで簡単にカスタマイズすることが可能です。

今回は、初心者の方でもすぐにできるカスタマイズ方法をご紹介します。

カスタマイズ用CSSコード

「外観」→「カスタマイズ」→「追加CSS」に以下のコードを追加します。

ボタンを四角にするサンプルCSS：

/* ページトップボタンを四角に */
#pagetop.c-fixBtn {
    border-radius: 4px;
}

/* ホバー時の背景色とアイコン色 */
#pagetop.c-fixBtn:hover {
    background-color: #ffc0cb !important;
    border-color: #468459;
}

/* ホバー時に中の矢印の色を変える */
#pagetop.c-fixBtn:hover i {
    color: #468459 !important;
}

カスタマイズのポイント

角の丸みを調整する（border-radius）

border-radius: 4px;

• 0 → 完全な四角
• 4px〜8px → 少し丸みのある四角
• 50% → 円形（デフォルトに近い）

お好みに合わせて調整してみてください。

ホバー時の背景色を変更する

background-color: #d5fa03;

デフォルトではテーマカラーが適用されますが、ここを変更することでサイトにアクセントを加えることができます。

アイコンの色を変更する

#pagetop.c-fixBtn:hover i {
    color: #468459;
}

背景色とのバランスを見ながら設定すると、より見やすくなります。

まとめ

細かな部分までサイトのトーンを合わせることで、Webサイト全体のクオリティが上がります。CSSも数行で簡単に調整できるので、ぜひご自身のサイトに合わせてカスタマイズしてみてください。