【SWELL】メインビジュアルのスクロールボタンをカスタマイズ！！

初心者

SWELLのスクロールボタンを大きくしたい
色を変更したい
スマホだけで表示させたい…

そんな時に役立つSWELLのカスタマイズテニックを紹介します。

WordPress有料テーマ「SWELL」のメインビジュアルに表示されるスクロールボタン。色やサイズは標準機能だけでは変更する事ができません。「本当にちょっとの事なのに..」って思いませんか？

実はわずか数行のCSSコードを貼り付けてるだけで簡単にアレンジできるんです。

初心者でも独自カスタマイズできるようサンプルのCSSコードを用意しました。本記事を読むとSWELLのスクロールボタンを自在にアレンジすることができるようになります！

この記事を書いた人

• IT業界24年のベテラン エンジニア
• WordPressで企業サイトの構築しています
• 取り扱いWordPressテーマは300個オーバー

SWELLマニアの かんた です

【基礎知識】スクロールボタンって何？

本記事ではSWELLのトップページ上のメインビジュアル上に表示する下記のボタンをアレンジしていきます。

SWELLテーマを有効にしただけの未設定の場合、スクロールボタンは表示されません。まずはスクロールボタンを表示させます。

操作内容

「外観」→「カスタマイズ」、「トップページ」→「メインビジュアル」の順にクリック。

「Scrollボタンを表示する」にチェックを入れる。

この設定でメインビジュアルにスクロールボタンが表示されます。

かんた

このスクロールボタンはカスタマイザーで表示・非表示の設定が出来ますが、標準機能だけではサイズ等の変更はできません。

SWELLのスクロールボタンをカスタマイズ！！

今回のカスタマイズはCSSを追加するだけの簡単なものです。サンプルのCSSコードをそのままカスタマイザーの追加CSSに記述するだけで動作します。

テーマファイルを編集する作業はありませんので、バックアップは不要です。

①スクロールボタンの「サイズ」を変更する

スクロールボタンのサイズを自由に変更するカスタマイズ方法です。

スクロールボタンは「矢印のアイコン」と「Scroll部分のテキスト」という2つの要素で構成されています。

まずは「矢印のアイコンサイズ」の変更方法です。

矢印のアイコンには標準で次のコードが適用されています。

.p-mainVisual__scrollArrow {
width: 20px;
height: 20px;
}

かんた

横幅、高さがそれぞれ20pxという指定ですね。

矢印の大きさを変更するにはコード内の数字を変えればOKです。

例：矢印のサイズを大きくするコード

.p-mainVisual__scrollArrow {
width: 40px;
height: 40px;
}

続いて「Scrollのテキストサイズ」の変更方法です。

標準では次の通りフォントサイズ12pxの設定になっています。

.p-mainVisual__scrollLabel{
font-size: 12px;
}

この数値を任意の値に変更しましょう。

例：フォントサイズを大きくするコード

.p-mainVisual__scrollLabel{
font-size: 18px;
}

かんた

サイズを大きくすると、テキストの下が窮屈になります。そんな時は次のコードを適用しましょう。

スクロールボタンの下の余白を調整するコード

.p-mainVisual__scroll{
bottom: 20px;
}

bottomの数字を大きくすると余白が広くなります。

②スクロールボタンの「色」を変更する

スクロールボタンは標準で「白」と透明度が設定されています。

.p-mainVisual__scroll{
color: #fff;
opacity: .75;
}

スクロールボタンの色を変更するにはcolorのオプションに設定している色コードを変更します。

スクロールボタンを黒にするコード

.p-mainVisual__scroll{
color: black;
}

色コードやRGBでも指定できます。自分の好みの色を設定してください。

③スクロールの背景を塗りつぶす

スクロールボタンの背景に色を付けるカスタマイズです。

背景を黒にするコード

.p-mainVisual__scroll{
padding: 10px;
background: #000;
}

色はbackground部分で自由にアレンジしてください。サイズはpaddingの値を変更すると大きくすることができます。

角ばっているスタイルが好きじゃない人向けに、スクロールボタンを丸くするコードを紹介します。

丸くするサンプルコード

.p-mainVisual__scroll{
padding: 20px;
background: #000;
border-radius: 50%;
}

先程のコードにborder-radiusを付けて丸くしています。

④スクロールボタンをPCでのみ表示する

スクロールボタンはPC、スマホ共通です。カスタマイザーでスクロールボタンを表示する設定を有効にするとPCサイト、スマホサイトともに表示されます。

PCのみスクロールボタンが表示されるカスタマイズを紹介します。

単純にメディアクエリでブレイクポイントを指定してdisplay:noneで消すのが簡単なカスタマイズです。

PCのみ表示するコード

@media screen and (max-width: 959px) {
.p-mainVisual__scroll{
display:none;
}
}

⑤スクロールボタンのアニメーション速度を早くする

スクロールボタンの矢印は上下に移動するアニメーションが設定されています。

アニメーションに適用されている実際のコード。

.p-mainVisual__scrollArrow{
-webkit-animation: FloatVertical 3s ease-in-out infinite alternate;
animation: FloatVertical 3s ease-in-out infinite alternate;
}

スピードがちょっと遅いなーと感じる場合は次のコードでスピードを調整できます。

アニメーションのスピードを変更するコード

.p-mainVisual__scrollArrow{
-webkit-animation: FloatVertical 1s ease-in-out infinite alternate;
animation: FloatVertical 1s ease-in-out infinite alternate;
}

かんた

「1s」部分がスピードです！

⑥スクロールボタンをスマホでのみ表示する

先程とは逆に、スマホでのみスクロールボタンを表示するカスタマイズです。

カスタマイズはPCだけで表示する場合と同じくメディアクエリを使います。

スマホのみ表示するコード

@media screen and (min-width: 960px) {
.p-mainVisual__scroll{
display:none;
}
}

まとめ

WordPressテーマ「SWELL」のスクロールボタンをカスタマイズする方法を紹介しました。

今回紹介したカスタマイズはCSSを追加する簡単な方法です。テーマファイルを編集する難易度の高いものではありません。ぜひSWELLのカスタマイズに挑戦してみてください！