メインビジュアルのスクロールボタンを差し替え

メインビジュアルのスクロールボタンをオシャレにします。

「カスタマイズ」からメインビジュアルのスクロールボタンを設定したけど、ワンパターンで他サイトと被るし物足りない…
SWELLのスクロールボタンは明朝体やエレガントなサイトとはトンマナが合わない…

なんて思いませんか！？（私は思います。）

スクロールボタンをおしゃれに変更しようとしたら、単純にCSSを当てるだけでなく、JavaScriptを使用して要素の入れ替えをしていく必要があるんですよね。

このコードスニペットを導入すれば、トグルボタン一つでスクロールボタンをおしゃれにカスタムことができるようになります。

こちらのデモサイトのメインビジュアル右下のように、「SCROLL　―」となり、ラインにはアニメーションが付きます。

実装方法

コードスニペットを導入する

こちらのボタンをクリックしてスニペットをダウンロードします。

左か右、どちらかのコードスニペットをオンにします。
（コードスニペットが分からない方は使用方法ページをご覧ください。）

これだけです。

このような雰囲気のサイトには、SWELLデフォルトのスクロールボタンは合わないですね！

簡単すぎて拍子抜けしそうですが、これをほぼノータイムで実装できるのがRevifyコードスニペットの強みです。
ご活用ください！

注意点

設定が反映されません。

以下をご確認ください。
・コードスニペットのトグルをオンにしましたか？
・スクロールボタン表示はオンになっていますか？
　（カスタマイズメニューから、メインビジュアル > 「Scrollボタンを表示する」をオンにしてください。）

右を設定したのに左側に位置してしまいます（またはその逆）。

右側配置用と左側配置用を同時に配布していますが、どちらか一方のみをオンにしてください。

SWELLの仕様変更（クラス名や詳細度の変更など）があってもレイアウトが崩れないことを保証するものではありません。
（ただし、特別なリスクというわけではなく、CSSを記述してカスタムするのと同じです。）