コピペで簡単！ページトップボタンをカスタマイズ

2024-12-03

こんなSWELLユーザーに読んでほしい！

SWELLっぽくないブログデザインにしたい
他とは違うデザインにしたいけど、難しいカスタマイズはムリ・・・

多くのブロガーさんが利用している「SWELL」ですが、

「あ、このブログもSWELLだな」って一発でわかるポイントが、画面右下に表示される「ページトップボタン」のデザイン。

今回は、SWELLユーザーさんからちょくちょくお問い合わせいただいているので、このページトップボタンをコピペで簡単にカスタマイズする方法をご紹介します。

これまでご依頼いただいた案件でも、オリジナルのページトップボタンを実装してきました。

1. ページトップボタンをオリジナル画像に変更する

「サカチム」さんを例に、ページトップボタンをオリジナル画像に変えるカスタマイズです。

まずは、ページトップ部分のHTMLとCSSについて簡単に解説します。
コピペで簡単に済ませたいという人はすっ飛ばしちゃってください。

下部固定ボタン・メニュー部分のHTML

.p-fixBtnWrapが「下部固定ボタン・メニュー」の全体で、#pagetopがページトップボタンになります。

.c-fixBtn__iconはページトップボタンの「」アイコン部分で、::before疑似要素でアイコンが設定されています。

今回は、この.c-fixBtn__icon部分に画像を配置します。

画像の準備

#pagetop部分のサイズ「width:52px / height:52px」に設定されているので、そのサイズにあわせて画像を作成します。

52px x 52px

画像は52px角に収まるサイズで背景透過のPNG画像にします。

作成した画像ファイルをメディアにアップして、パスをコピーしておきます。

パス：/wp-content/uploads/2024/12/img-ball.png

CSSをコピペ

以下のCSSの「画像のパス」部分を変更し、カスタマイザ＞追加CSSにコピペします。

/* =========================================================
//  1. ページトップボタンをオリジナル画像に変更する
// ========================================================= */
/* アイコンを消す */
.icon-chevron-small-up:before, .icon-chevron-up:before {
  content: none;
}

/* ボーダー、影を消す */
.c-fixBtn {
  border: none;
  box-shadow: none;
  overflow: visible; /* ラベル表示対応 */
}

/* ラベルの位置 */
.c-fixBtn__label {
  position: absolute;
  bottom: -1em;
}

/* hoverの背景を消す */
.c-fixBtn:hover {
  background-color: transparent !important;
}

/* 画像を配置 */
#pagetop.c-fixBtn .c-fixBtn__icon {
  display: block;
  background-image: url(/wp-content/uploads/2024/12/img-ball.png); /* 画像のパス */
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
}

これでだけです。

CSSの知見がある人ではれば、hover時のアニメーションも簡単に実装できると思います。

2. ページトップボタンの出現タイミングを遅らせる

ファーストビューのデザインによっては、ページトップボタンの出現を遅らせたいことってありませんか？

ページトップボタンの出現タイミングも、CSSで調整することができます。

デフォルトの出現タイミング

SWELLでは、.l-scrollObserverによってスクロール量を監視し、ドキュメントルートのdata-scrolled属性を変化させています。

<div class="l-scrollObserver" aria-hidden="true"></div>

そして、data-scrolled="true"でページトップボタンが出現するようにCSSで定義されています。

[data-scrolled=true] .p-fixBtnWrap {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    visibility: visible;
}

デフォルトのページトップボタンの出現タイミング

.l-scrollObserver（赤線部分）が画面から見切れるとページトップボタンが出現するのが分かるかと思います。

デフォルトでは.l-scrollObserverがtop:100pxに設定されています。

この100pxを、画面高さギリギリの値に変更することで、出現タイミングを遅らせることができます。

.l-scrollObserver {
  top: 100px;
}

CSSをコピペ

例では.l-scrollObserverの位置をtop:98vhに変更しています。

ページトップボタンの出現タイミングを遅らせる

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

/* =========================================================
//  2. ページトップボタンの出現タイミングを遅らせる
// ========================================================= */
.l-scrollObserver {
  top: 98vh;
}

値はデザインにあわせて適宜変更してください。

値は100vh以下になるように設定します