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

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

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

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

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

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

カスタムスクロールバーの主な考慮事項：

• ブラウザの互換性： Chrome、Safari、Edge（CSS用のWebKitベースブラウザ）などの最新ブラウザはカスタムスクロールバーをうまくサポートしていますが、他のブラウザではカスタマイズが限定的であったり、まったくサポートされていなかったりする場合があります。一貫したエクスペリエンスを確保するために、常にさまざまなブラウザで変更をテストしてください。
• モバイルデバイスの制限： モバイルデバイスでは、従来のスクロールバーは直感的なタッチジェスチャー（スワイプ）に置き換えられることがよくあります。これは、カスタムスクロールバーが通常スマートフォンやタブレットに表示されないことを意味します。
• ユーザーエクスペリエンスとアクセシビリティ：スクロールバーは、コンテンツを妨げるのではなく、改善するものでなければなりません。派手すぎたり見えにくかったりするデザインは、ユーザーのナビゲーションに悪影響を与える可能性があります。ブランドカラーに合わせ、サイト全体のフローを改善する微妙な調整を目指しましょう。
• パフォーマンスへの影響： 一般的に最小限ですが、プラグインや広範なCSSを追加すると、ウェブサイトの読み込み速度にわずかに影響する可能性があります。パフォーマンスを維持するために、最適化されたソリューションを選択し、コードをクリーンに保ってください。
• テストは重要です: どの方法を選択しても、カスタムスクロールバーが効果的に機能することを確認するために、さまざまなブラウザ、デバイス、画面サイズで徹底的にテストしてください。

正しく行われた場合、このWordPressのデザイン要素は、優れた使いやすさを維持しながら、サイトにプロフェッショナルなタッチを与えることができます。

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

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

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

まず、Advanced Scrollbarプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

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

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

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

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

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

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

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

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

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

これで、WordPressブログにアクセスして、カスタムスクロールバーが機能していることを確認できます。

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

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

 ::-webkit-scrollbar 疑似要素（以下の例のような）を使用してCSSでカスタムスクロールバーを作成すると、要素の多くの部分をカスタマイズできます。

ただし、これらの特定のCSSルールは、主にChrome、Safari、新しいMicrosoft EdgeなどのWebKitベースのデスクトップブラウザで機能します。

これは、カスタムスクロールバーが他のブラウザ（Firefoxなど）やほとんどのモバイルデバイスでは表示されないか、異なる表示になる可能性があることを意味します。

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にトップへ戻る効果を追加する

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

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

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

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

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

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

WordPressにカスタムスクロールバーを追加することに関するよくある質問

WordPressにカスタムスクロールバーを追加することについて、読者からよく寄せられる質問をいくつかご紹介します。

WordPressでスクロールバーを追加するにはどうすればよいですか？

カスタムCSSを使用するか、Advanced Scrollbarのようなプラグインを使用して、WordPressの投稿、ページ、またはウィジェット内のスクロールコンテンツ領域を有効にすることで、スクロールバーを追加できます。

WordPressにスライダーを挿入するにはどうすればよいですか？

Soliloquyのようなスライダープラグインを使用してスライダーを作成し、ブロックを使用してページに追加できます。詳細については、WordPressでレスポンシブスライダーを作成する方法に関するチュートリアルをご覧ください。

WordPressで最適なスライダープラグインは何ですか？

Soliloquyは、初心者向けで柔軟性があり、ほとんどのテーマやページビルダーと連携するため、最高のWordPressスライダープラグインです。

カスタムバナーの作成方法を教えてください。

OptinMonsterを使用して、既製のテンプレートでカスタムバナーを作成できます。このプラグインでは、コンテンツを完全にカスタマイズしたり、CTAを追加したり、好みに応じてさまざまな色を使用したりすることもできます。詳細な手順については、WordPressでバナーを作成する方法に関するチュートリアルをご覧ください。

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

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。