WordPressでカスタムスクロールバーを作成する簡単な方法

どんな理由であれ、あなたはあなたのウェブサイトを目立たせたいと言っても過言ではありません。 そのようなプラットフォームを持つことは、あなたが置いているものが訪問者の心に長く留まるのを確実にするでしょう、そしてそれはほとんど独占的に良いことです。 あなたのウェブサイトのコンテンツとは別に、あなたの製品に注意を引くもう一つの方法は視覚的な側面です。 これは決して新しい知識の一部ではありません。 マクドナルドが赤と黄色でFacebookが青であるのには理由があります。 ただし、ここでは、Webサイトが提供するエクスペリエンスのほんの一部について説明します。 これはそれほど重要ではないように思われるかもしれませんが、それでもその価値があると信じています–スクロールバー。 次の数行では、WordPressでカスタムスクロールバーを作成する簡単な方法をいくつか学びます。

WordPressでカスタムスクロールバーを作成する簡単な方法

カスタムスクロールバーを作成することは、Webサイトのカスタムテーマを作成する上で不可欠なステップです。 それで、あなたがあなたのウェブサイトをあらゆる点で目立たせることに興味があるなら、そのスクロールバーをユニークにする最初の方法を紹介しましょう。

プラグインを使用してWordPressにカスタムスクロールバーを追加する

WordPressでやりたいことのほとんどと同様に、滑らかなスクロールバーを作成する手段としてプラグインを使用することは良い道です。 この方法がほとんどのユーザーに強く推奨される理由は、その単純さです。 数回クリックするだけで、自分のスタイルに合ったスクロールバーが表示されます。 それでも、この方法に伴う1つの小さな欠陥について言及する価値があります。 つまり、このプラグインはモバイルブラウザをサポートしていません。 ただし、これが大きな損失に思えない場合は、読み取りを続行してください。

まず、AdvancedScrollbarプラグインをインストールしてアクティブ化する必要があります。 このアクションは非常に簡単です。

1. プラグインにアクセスし、WordPress管理エリア内の[新しいページの追加]に移動します。 検索バーに上記のプラグインの名前を入力し、Enterキーを押します。
2. プラグインを見つけたら、[今すぐインストール]ボタンをクリックします。 WordPressがプラグインをダウンロードしてインストールします。 この後、[今すぐインストール]ボタンが[アクティブ化]ボタンに変わったことに気付くでしょう。
3. その[アクティブ化]ボタンをクリックすると、準備が整います。

必要なプラグインをインストールしてアクティブ化したので、プラグインを構成する必要があります。 その言葉は恐ろしいように聞こえるかもしれませんが、プロセスは非常に簡単です。 [設定]>[カスタムカラースクロールバー設定]に移動するだけです。 そこに到達すると、スクロールバーの色とレールの背景色を変更できるようになります。 次に、マウスのスクロールステップを選択できます。これは、マウスホイールのスクロール速度になります。 このプラグインの優れている点は、スクロールバーを自動非表示にするか、常に表示するかを選択できることです。

[カーソルのみ]オプションを選択するオプションもあります。これにより、ボタンなしでスクロールバーレールが表示されます。 その下には、スクロール速度の設定、レールの配置の変更（左または右）、およびタッチ動作を有効にするためのオプションがあります。

すべてのオプションを試し、色を試して、自分のスタイルと好みに最も適した組み合わせを見つけたら、すべての作業を保存するために、[変更を保存]ボタンをクリックすることを忘れないでください。 そうすると、Webサイトにアクセスして、これらのゴージャスなカスタムスクロールバーの色が実際に動作していることを確認できます。

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

サブタイトルから推測できるように、このメソッドはCSSを使用してスクロールバーのスタイルを設定します。 この方法は、jQueryを使用する方法よりも高速であることが証明されています。 ただし、 Google Chrome、Safari、OperaなどのWebKitレンダリングエンジンを使用するデスクトップブラウザでのみ機能することに注意してください。 残念ながら、モバイルブラウザやデスクトップコンピュータのFirefoxとEdgeには影響しません。 そうは言っても、これがあなたが選択したいオプションであるなら、これがそれを実行する方法です。

まず、[テーマ]>[カスタムページ]に移動します。 このアクションにより、WordPressテーマカスタマイザーインターフェイスが起動します。 画面の左側面にある一連のオプションを使用して、サイトのライブプレビューを表示できます。 左側のペインから[追加のCSS]タブをクリックして続行します。 タブは、カスタムCSSを追加できる簡単なボックスを表示するようになります。 有効なCSSルールを追加するとすぐに、それがWebサイトのライブプレビューペインに適用されていることがわかります。 その有効なCSSルールに関して、スクロールバーが変更の影響を受けやすいように追加する必要があるものは次のとおりです。

::-webkit-スクロールバー{

-webkit-外観：なし;

}

::-webkit-スクロールバー{

幅：10px;

}

::-webkit-スクロールバー-トラック{

背景：＃ffb400;

borger：1px solid #ccc;

}

::-webkit-scrollbar-thumb {

背景：＃cc00ff;

borger：1px solid #eee;

高さ：100px;

border-radius：5px;

}

::-webkit-scrollbar-thumb：hover {

背景：青;

テーマカスタマイザーを使用して追加したカスタムCSSは、その特定のテーマでのみ使用できることに注意してください。 テーマを変更したが、そのカスタムスクロールバーを保持したい場合は、同じ方法を使用して、そのCSSルールをコピーして新しいテーマに貼り付ける必要があります。

これはあなたのウェブサイトを目立たせるための素晴らしい手段ですが、WordPressでカスタムスクロールバーを作成することの1つの欠点に言及する必要があります。 つまり、デフォルトでは、CSSにはスクロールバーのプロパティを変更できるルールセットが付属していません。 このオプションを追加する提案がいくつかありますが、現時点では大多数のブラウザでサポートされていません。 この問題を解決するために、設計者と開発者はブラウザ固有の疑似要素またはJavaScripを使用して、デフォルトのスクロールバーの外観を上書きします。 これらは、私たちがあなたに説明したテクニックです。 それでも、すべてのブラウザで想像どおりに機能することを確認するには、さまざまなブラウザやデバイスでサイトをテストする必要があることに注意する必要があります。 それをカバーしたら、WordPressでカスタムスクロールバーを作成する方法を知っていると言っても過言ではありません。