WordPressでカスタムスクロールバーを追加する方法

WordPressサイトのビジュアルアピールを強化することで、ユーザーエクスペリエンスを大幅に向上させることができますが、見落としがちな要素のひとつにスクロールバーがあります。

スクロールバーをカスタマイズすることで、サイトにユニークなタッチを加えることができ、より視覚的に魅力的なサイトになり、全体的なデザイン美学に沿ったものになります。

WPBeginnerでは、WordPressのデザインについて何百もの記事を投稿し、またサイトのエンゲージメントを高めるためにさまざまなカスタマイズ機能を使用してきました。

カスタムスクロールバーはサイトの見栄えを良くし、訪問者にとってよりスムーズで直感的なナビゲーションを可能にします。

この投稿では、WordPressでカスタム・スクロールバーを簡単に追加する方法を紹介する。

なぜWordPressにカスタムスクロールバーを追加するのか？

2018年、WC3はサイトオーナーがCSSを使ってスクロールバーの見え方をカスタマイズできるようにする案を下書きした。

今日、多くのモダンブラウザがカスタム・スクロールバーをサポートしています。

このことを念頭に置いて、サイトの配色やブランディングにより適したスクロールバーに変更するとよいでしょう。また、多くのサイトではカスタマイザーを使って訪問者の注意を引くことで、ページビューを増やし、直帰率を下げることができます。

ただし、カスタマイザーの扱いはブラウザーによって異なることを覚えておいてください。多くのブラウザーはカスタマイザーを部分的にしかサポートしていませんし、カスタマイザーをすべて表示しないブラウザーもあります。

つまり、サイトをさまざまなブラウザーや端末でテストし、できるだけ多くのブラウザーでスクロールバーがどのように見えるかを確認することが重要です。

それでは、WordPressでカスタム・スクロールバーを追加する方法を見ていきましょう。以下のクイックリンクから、使いたい方法にジャンプしてください：

方法1：WordPressにプラグインでカスタムスクロールバーを追加する（簡単）

スクロールバーをカスタマイズする最も簡単な方法は、Advanced Scrollbarを使用することです。この無料のプラグインを使用すると、個別コードを記述することなく、スクロールバーの幅、色、スクロール速度などを変更できます。

最初に行う必要があるのは、Advanced Scrollbarプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化したら、設定 ” スクロールバーの高度な設定にアクセスしてください。

ここでは、スクロールバーの配色とレールの背景色を変更できます。

以下の画像では、青いスクロールバーを作成している。

また、「Mouse Scroll Step」フィールドに新しい数値を入力して、マウスのスクロールステップを変更することもできます。

数字が小さいとサイトのスクロールが遅くなり、大きいとスクロールが速くなる。

また、スクロールバーを自動非表示にして、訪問者がスクロールしているときだけ表示されるようにするかどうかを選択することもできます。

カラフルなスクロールバーを作成し、他のコンテンツの邪魔にならないか心配な場合に便利です。

初期設定では、スクロールバーはブラウザーウィンドウの右側に表示されます。しかし、お望みであれば、’Rail Align’ 設定を使用して左側に移動させることができます。

スクロールバーの設定に満足したら、忘れずに「変更を保存」をクリックして設定を保存してください。

これでWordPressサイトにアクセスし、カスタムスクロールバーの動作を確認することができます。

方法2：CSSを使用してWordPressにカスタムスクロールバーの色を追加する

スクロールバーにもっと高度な変更を加えたい場合は、CSSを使うという設定もあります。

この方法ではスクロールバーのすべての部分をカスタマイズできますが、WebKitを使用しているデスクトップブラウザーでのみ機能します。つまり、モバイルブラウザを含むすべてのブラウザーで変更が反映されるわけではありません。

CSSを使ってスクロールバーをカスタマイズするには、外観 ” カスタマイザーにアクセスしてください。

WordPressカスタマイザーで「Additional CSS」をクリックします。

表示された小さなエディターにコードを追加することができます。

スクロールバーの見え方を変えるコードの例です：

::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar {
width: 10px;
}
 
::-webkit-scrollbar-track {
background: #ffb400;
border:1px solid #ccc;
}
 
::-webkit-scrollbar-thumb {
background: #cc00ff;
border:1px solid #eee;
height:100px;
border-radius:5px;
}
 
::-webkit-scrollbar-thumb:hover {
background: blue;
}

お好きなコードを追加してください。CSSの詳細については、WordPressテーマにカスタムCSSを追加する方法の完全ガイドを参照してください。

コードに満足したら、「公開する」ボタンをクリックしてください。これで WebKit ブラウザでWordPress ブログにアクセスし、変更を確認できるようになります。

ボーナス：WordPressでトップにスクロール効果を追加する

カスタム・スクロールバーの作成とは別に、WordPressサイトにスクロール・トゥ・トップ効果を追加することもできます。長いブログ投稿があり、ユーザーに素早くトップに戻る方法を提供したい場合、これは非常に便利です。

この機能を追加するには、WPFront Scroll Topプラグインをインストールして有効化する必要があります。詳しい手順については、WordPressプラグインのインストール方法のチュートリアルをご覧ください。

有効化したら、WordPressダッシュボードから設定 ” スクロールトップページにアクセスし、「有効化」にチェックを入れて、上部へのスクロール効果を有効化します。

その後、スクロールオフセット、ボタンサイズ、不透明度、フェード持続時間、スクロール持続時間などをここから編集できる。

設定が完了したら、忘れずに「変更を保存」ボタンをクリックして設定を保存してください。

これで、サイトにスクロールトゥトップ効果を追加することができました。より詳細な手順については、WordPressでスムーズなトップスクロール効果を追加する方法のチュートリアルを参照してください。

WordPressでカスタム・スクロールバーを追加する方法について、この投稿がお役に立てれば幸いです。WordPress でランディングページを作成する方法についてのガイド、またはエキスパートが選ぶ最高のドラッグ＆ドロップページビルダーもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.