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

一部のウェブサイトに、ブランドカラーに完全に一致する洗練されたカスタムスクロールバーがあることに気づいたことはありますか？🤩

私たちもこの機能に気づいていました。そして、多くのユーザーが、この目を引くカスタムスクロールバーを独自のWordPressサイトで作成する方法を尋ねてきました。

良いニュースは？WordPressのスクロールバーのカスタマイズは、あなたが思うよりもはるかに簡単です。ブランドカラーに合わせたい場合でも、ナビゲーションを改善したい場合でも、ウェブサイトにプロフェッショナルなタッチを加えたい場合でも、その方法を正確に説明します。コーディングの経験は必要ありません！

カスタムスクロールバーを追加する前に知っておくべきこと 💡

WordPressのスクロールバーをカスタマイズすることに興味があるのですね。しかし、始める前に、WordPressウェブサイトにとって正しい決定を下すために、知っておくべき重要なことがいくつかあります。

まず、カスタムスクロールバーは素晴らしく見えるかもしれませんが、すべてのブラウザが同じように表示するわけではありません。Chromeのような最新のブラウザはこれをうまくサポートしていますが、他のブラウザは、特にモバイルデバイスでは、カスタマイズが限定的であるか、まったく表示されない場合があります。

重要なのは、さりげなく始めることです。派手なデザインでコンテンツから注意をそらすのではなく、ブランドのカラースキームに合わせたマイナーな調整から始めることを常にお勧めします。覚えておいてください。スクロールバーは、ショーを盗むのではなく、ユーザーエクスペリエンスを向上させるべきです。

正しく行われた場合、このWordPressのデザイン要素は、あなたのサイトにプロフェッショナルなタッチを与えることができます。すべての訪問者にとって一貫したエクスペリエンスを確保するために、さまざまなブラウザで変更をテストしてください。

何が期待できるか理解できたので、WordPressサイトにカスタムスクロールバーを追加する方法を見てみましょう。以下のクイックリンクを使用して、使用したい方法にジャンプしてください。

• オプション1：高度なスクロールバープラグインを使用する（無料+簡単）
• オプション2：CSSスクロールバーを作成する（上級）
• ボーナスヒント：WordPressにトップへ戻る効果を追加する

オプション1：高度なスクロールバープラグインを使用する（無料+簡単）

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

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

有効化したら、設定 » 高度なスクロールバー設定に移動します。

ここでは、カラースキームやレール 背景色 のようなスクロールバーのデザインを変更できます。

次の画像では、青いスクロールバーを作成しました。

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

数値が低いほどサイトのスクロールは遅くなり、数値が高いほどスクロールは速くなります。

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

これは、カラフルなスクロールバーを作成し、コンテンツの他の部分から注意をそらすのではないかと心配している場合に役立ちます。

デフォルトでは、スクロールバーはブラウザウィンドウの右側に表示されます。ただし、お好みで「レール配置」設定を使用して左側に移動できます。

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

カスタムスクロールバーがどのように機能するかを確認するために、WordPressブログにアクセスできるようになりました。

オプション2：CSSスクロールバーを作成する（上級）

スクロールバーをより高度に変更したい場合は、CSSを使用するという別の方法もあります。

CSSでカスタムスクロールバーを作成すると、要素のすべての部分をカスタマイズできますが、WebKitを使用するデスクトップブラウザでのみ機能します。これは、モバイルブラウザを含むすべてのブラウザで変更が表示されないことを意味します。

CSSを使用してスクロールバーをカスタマイズするには、外観 » カスタマイズに移動します。

WordPressカスタムizerで「追加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にトップへ戻る効果を追加する

カスタムスクロールバーを作成する apart from、WordPressサイトにスクロールアップ効果を追加したい場合もあります。これは、ブログ記事が長い場合に非常に役立ち、ユーザーが一番上に戻る簡単な方法を提供したい場合です。

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

有効化したら、WordPress ダッシュボードから 設定 » スクロールトップ ページにアクセスし、「有効化」ボックスをチェックして、トップへのスクロール効果を有効にしてください。

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

完了したら、「変更を保存」ボタンをクリックして設定を保存することを忘れないでください。

これで、ウェブサイトにスクロールアップ効果を正常に追加できました。より詳細な手順については、WordPressでjQueryを使用してスムーズなスクロールアップ効果を追加する方法に関するチュートリアルをご覧ください。

この記事がWordPressでカスタムスクロールバーを追加する方法を学ぶのに役立ったことを願っています。また、WordPressのベストドラッグ＆ドロップページビルダーと、WordPressウェブサイトの編集方法に関する究極のガイドもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。