WordPressでカスタムスクロールバーを任意の要素に追加する方法

小さなデザインの工夫は、ウェブサイトがどれだけプロフェッショナルに見えるかに大きな違いをもたらします。

カスタムスクロールバーは、ほとんどの訪問者が意識的には気づかないディテールの一つですが、コンテンツをナビゲートする際の視覚的な一貫性の向上を確実に感じ取ることができます。

良いニュースは、WordPressでスクロールバーをカスタマイズするには高度なコーディングスキルは必要なく、その結果はサイト全体のユーザーエクスペリエンスを本当に向上させることができるということです。

WordPressサイト構築の経験から、カスタムスクロールバーは、初心者サイトとプロサイトを区別する、洗練された意図的な外観を作成するのに役立つことがわかりました。

WordPressサイトのあらゆる要素にカスタムスクロールバーを追加する簡単な方法を2つご紹介します。ご紹介する方法はどちらも実際のシナリオでテスト済みですので、ご自身のスキルレベルに合ったアプローチをお選びいただけます。

WordPressで特定の要素にスクロールバーを追加するのはいつですか？

WordPress要素にスクロールバーを追加すると、サイトのユーザーエクスペリエンスが大幅に向上します。

しかし、このWordPressデザイン機能はいつ使用すべきでしょうか？

カスタムスクロールバーからメリットを得られる一般的なWordPressの要素をいくつかご紹介します。

• ナビゲーションメニュー – 20以上のカテゴリとサブカテゴリがあり、そうでなければページ全体に広がるブログに最適です。
• サイドバーウィジェット – スペースを犠牲にすることなく、すべてのウィジェットを保持したいコンテンツ豊富なサイドバーに最適です。
• 商品詳細 – 長い商品詳細をすっきりと整理されたレイアウトで表示します。
• コメントセクション – ページを圧倒することなく、数百件のコメントをきれいに表示します。
• 画像ギャラリー – アクセシビリティを維持しながら、複数の画像をギャラリーで表示します。

これを踏まえて、WordPressウェブサイトの任意の要素にカスタムスクロールバーを追加する2つのオプションを紹介します。

サイトを始めたばかりで、カスタムスクロールバー機能を持つページビルダーを使用したい場合は、オプション1を選択することをお勧めします。これは、すでに別のテーマを使用している場合、この方法のためにテーマを変更する必要があるためです。

一方、現在のテーマが気に入っている場合は、オプション2を選択してCSSコードを使用してカスタムスクロールバーを追加できます。心配しないでください。プロセスをステップバイステップで説明するので、誰でも簡単にフォローできます。

下のクイックリンクを使用して、希望する方法にスキップできます。

• オプション1：ページビルダーと要素固有のカスタムスクロールバーを使用する（コード不要）
• Option 2: Use CSS Code to Add a Custom Scrollbar to a Specific Element

オプション1：ページビルダーと要素固有のカスタムスクロールバーを使用する（コード不要）

特定の要素にカスタムスクロールバーを追加する1つの方法は、スクロールバー機能を備えたページビルダーを使用することです。これにより、コードに触れることなくスクロールバーを簡単にカスタマイズできます。

この方法では、Thrive Architectを使用します。スクロールバー機能の他に、Thrive Architectには、プロフェッショナルな見た目のページを素早く作成するための300以上のテンプレートと、訪問者のエクスペリエンスをパーソナライズするためのダイナミックコンテンツ機能があります。

さらに、ドラッグ＆ドロップインターフェースはユーザーフレンドリーであることがわかり、WordPress初心者にも最適です。このツールの詳細については、Thrive Architectのレビューをご覧ください。

Thrive Architectには無料版はありませんが、特別なThrive Themes割引コードを使用して、初回購入時に最大50%割引できます。

ステップ1：Thrive ArchitectとThrive Themesの設定

まず、Thrive Architectプラグインをインストールする必要があります。これは、Thrive Themesのウェブサイトでアカウントにサインインすることでアクセスできます。

次に、Thrive Product Managerプラグインをダウンロードしてインストールします。ヘルプが必要な場合は、初心者向けのWordPressプラグインのインストール方法に関するガイドを参照してください。

プラグインを有効化した後、WordPress ダッシュボードの Product Manager に移動してください。

WordPressサイトをThrive Themesアカウントにリンクするには、「マイアカウントにログイン」をクリックしてください。

アカウントで利用可能なThrive Themes製品のリストが表示されるはずです。

「Thrive Architect」を見つけて、「製品のインストール」ボックスにチェックを入れます。

下にスクロールして「Thrive Theme Builder」を見つけ、「テーマのインストール」オプションを選択してください。

次に、「選択した製品をインストール」をクリックします。Thrive ArchitectはThrive Theme Builderと連携するため、この手順は必要です。

次の画面に、Thrive Product Manager が Thrive Theme Builder をインストールおよびアクティブ化する様子が表示されます。

完了したら、「テーマビルダーダッシュボードに移動」を選択します。

さて、Thriveのテーマライブラリを使用して、サイトのベースデザインを選択する時間です。

どちらを選ぶか不明な場合は、「プレビュー」ボタンを使用して、各テーマの外観を確認してください。決定したら、「選択」をクリックします。

これでテーマビルダーウィザードに入ります。

このウィザードは、ロゴのアップロード、テーマのブランドカラーの選択、さまざまなテーマ構造とテンプレートの設定をガイドします。

次のステップに進む前に、必ずセットアップウィザードを完了してください。

ステップ2：テーマにコンテンツボックス要素を追加する

それでは、スクロールバー機能をデフォルトで備えているWordPressテーマにコンテンツボックス要素を追加しましょう。

Thrive Themes では、コンテンツボックスは複数のブロックをまとめてグループ化するために使用できるブロックです。これは、一連の要素を同じようにスタイル設定したり、グループとして管理したりする必要がある場合に便利です。

この例では、長いブログ投稿カテゴリのリストを含むコンテンツボックスを追加します。このシナリオでは、サイドバーを非常に長くすることなく、すべてのカテゴリを表示できるようにしたいと考えています。

まず、スクロールバーを表示したいWordPressブログの任意のページまたは投稿にアクセスします。

次に、上部管理ツールバーで「テーマテンプレート[名前]を編集」または「Thriveで編集」をクリックします。

これで、Thrive Architect の編集インターフェースにアクセスできるはずです。コンテンツボックスブロックを追加するには、ページ右側の「+」記号をクリックし、「コンテンツボックス」要素を選択してください。

次に、スクロールバーを表示したい要素の場所にドラッグアンドドロップします。

これで、コンテンツボックスにさらにコンテンツ要素を追加できます。たとえば、「+」記号をもう一度クリックして、「テキスト」ブロックを追加できます。その後、好きなテキストを入力できます。

Thrive Themesは、テキストや画像のような基本的なものから、フォームや価格表まで、数多くのビジュアル要素を提供しています。

サイドバーにカテゴリのリストを追加したいので、「Dynamic Styled List」要素をコンテンツボックスにも追加します。

このブロックは、基本的にウェブサイトからデータを取得し、カテゴリ、タグ、または著者のようなリストを動的に表示します。ブロックは、ウェブサイトを構築するにつれて自動的に更新されます。

動的にスタイル設定されたリストをコンテンツボックスにドラッグアンドドロップしたら、「リストタイプの選択」ボタンをクリックします。

次に、「カテゴリリスト」をクリックします。

これで、カテゴリのリスト、テキストブロック、およびコンテンツボックスに追加するその他の要素がすべて同じコンテナ内に入ります。

そしてご覧の通り、リストはかなり長いため、スクロールバーを追加したいと思います。

ステップ3：コンテンツボックスでスクロールバーを有効にする

そのコンテナを選択し、左側の青い矢印をクリックすると、コンテンツボックスをカスタマイズするための多くのオプションが表示されます。

スクロールバーを追加する設定は、「レイアウトと位置」タブにあります。ここで、ボックスのパディング、マージン、幅、高さ、配置などを調整できます。

最初に行ったのは、「マージンとパディング」セクションのすぐ下にある青いパディング領域内の白い矢印をクリックすることでした。これは、コンテンツボックスがサイドバーの他の要素と揃っていることを確認するためだけに行いました。

ここにある他のオプションを自由に探索して、ボックスが均整の取れた外観になるようにしてください。

次に、高さセクションまでスクロールダウンしましょう。「最大」ボタンをクリックして、ピクセル高をずっと小さい数値に変更します。この場合、617pxから300pxに変更しました。

これにより、コンテンツボックスが大幅に短くなり、下部のセクションにあるカテゴリ名が消えます。

これで完了したら、再度パネルを下に移動し、「詳細設定」タブを開きます。次に、オーバーフロー設定で「スクロール」を選択し、「スクロールバーをスタイル設定」オプションを有効にします。

コンテンツボックスブロックにスクロールバーが自動的に追加されるはずです。

これで、Thrive Architectでカスタムスクロールバーを追加する方法はすべて完了です。引き続きWordPressのテーマ、ページ、または投稿を編集するか、下部にある「作業を保存」をクリックして変更を公開できます。

デモサイトでのスクロールバーは以下のようになります。

オプション2：CSSコードを使用して特定の要素にカスタムスクロールバーを追加する

WordPressテーマを変更してページビルダーでカスタムスクロールバーを作成するのが大変だと感じる場合は、代わりにCSSコードを使用できます。この方法では、WordPressページ上のスクロールバーを直接カスタマイズできます。

コードスニペットの扱いに慣れていない場合でも心配いりません。ステップバイステップでプロセスを案内し、WordPressサイトでこの機能を簡単に有効にできるようにします。

まず、CSSの仕組みを理解しましょう。CSSはCascading Style Sheetsの略です。これは、ウェブブラウザにウェブページ上の要素をどのように表示するかを指示する言語です。この場合、CSSを使用してカスタムスクロールバーを追加およびスタイル設定します。

カスタムCSSを使用するには、次の2つのものが必要です。

1. CSSクラス： ページ上の要素の名前タグのようなものです。変更したい要素に追加します。
2. CSSコード: これは、ブラウザにCSSクラスを持つ要素のスタイル設定方法を指示する命令セットです。

したがって、カスタムスクロールバーを追加するには、まず変更したい要素に CSS クラスを付けます。次に、そのクラスを持つ要素のスクロールバーを作成する CSS コードを追加します。 

要素に scroll-bar というCSSクラスを追加します。方法は後述します。以下は、スクロールバーを追加するための完全なCSSコードスニペットです。

.scroll-bar {
  max-height: 100px;  /* Adjust the maximum height as needed */
  width:250px;  /* Adjust the width as needed */
  overflow-y: scroll; /* Enable vertical scrolling */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}


/* Customizing the vertical scrollbar for Webkit-based browsers (Chrome, Safari) */
.scroll-bar::-webkit-scrollbar {
  width: 10px; /* Width of the vertical scrollbar */
}


.scroll-bar::-webkit-scrollbar-track {
  background: #eaeaea; /* Background of the scrollbar track */
}


.scroll-bar::-webkit-scrollbar-thumb {
  background: grey; /* Color of the scrollbar thumb */
  border-radius: 15px; /* Rounded corners for the thumb */
}


/* Hover state for the scrollbar thumb */
.scroll-bar::-webkit-scrollbar-thumb:hover {
  background: black; /* Change color when hovered */
}


/* For Firefox */
.scroll-bar {
  scrollbar-width: thin; /* Define scrollbar width */
  scrollbar-color: #888 #f1f1f1; /* Scrollbar thumb and track color */
}

ステップ1：要素にCSSクラスを追加する

WordPress サイトの要素に CSS クラスを追加するには、いくつかの方法があります。

ブロックエディターまたはフルサイトエディターを使用している場合は、ページ、投稿、またはブロックテーマテンプレート上の任意のブロックをクリックするだけで済みます。次に、ブロック設定サイドバーで「詳細設定」タブを開き、「追加のCSSクラス」フィールドにCSSクラスを挿入します。

完了したら、更新、公開、または保存をクリックするだけです。

クラシックテーマを使用している場合、このプロセスはブロックベースのウィジェットエディターでも機能します。外観 » ウィジェットに移動し、CSSクラスを追加したいブロックをクリックします。

その後、ブロック設定サイドバーに同じ高度なタブが表示されます。以前のように、「追加のCSSクラス」フィールドにCSSクラスを入力するだけです。

ステップ2：テーマにCSSコードを追加する

さて、カスタムCSSコードを追加しましょう。3つの方法を紹介します。 テーマカスタマイザー、フルサイトエディター、WPCodeを使用します。

最初のオプションはクラシックテーマユーザー向けです。さらに、これは組み込み機能なので、コードを挿入するためにプラグインをインストールしたり、テーマファイルを開いたりする必要さえありません。

これを行うには、外観 » カスタマイズに移動してWordPressテーマカスタマイザーを開くことができます。

注意: WordPressでこの設定が表示されない場合は、ブロックテーマを使用している可能性があり、代わりに次の方法を使用できます。詳細については、WordPress管理画面でテーマカスタマイザーが表示されない問題を修正する方法に関するガイドをご覧ください。

方法1：クラシックテーマにCSSを追加する

カスタマイザー内で、「追加CSS」を見つけてクリックします。

ここで、先ほどお見せしたコードを貼り付けるだけです。

コードを追加すると、テーマに自動的に変更が表示されます。

ご覧のとおり、CSS を追加した要素のクラスにはスクロールバーが表示されています。その後、「公開」をクリックするだけです。

方法2：フルサイトエディターを使用したCSSの追加

ブロックテーマを使用している場合は、フルサイトエディターを使用して CSS コードを追加する必要があります。その後、外観 » エディターに移動します。

ブロックテーマをカスタマイズするためのメニューオプションがいくつかあります。

ここで、「スタイル」をクリックします。

このページには、選択できるブロックテーマのデザインがいくつかあるはずです。

そのまま無視して、鉛筆のような形をした「編集」ボタンをクリックします。

これで編集インターフェース内に入りました。

右側のサイドパネルで、リビジョンアイコンの横にある3点メニューをクリックし、「追加CSS」を選択します。

さて、先ほどのコードスニペットをここに貼り付けてください。変更は自動的に反映されるはずです。

完了したら、「保存」をクリックします。

テーマカスタマイザーやフルサイトエディターを使用してCSSを挿入する際の1つの欠点は、テーマの更新や変更を決定した場合、CSSカスタマイズを失うリスクがあることです。

そのため、特にフルサイトエディターとブロックベースのテーマを使用している場合は、WPCodeを使用してサイトのCSSを編集することをお勧めします。以下の方法に従えば、クラシックテーマでも機能します。

方法3：WPCodeを使用したCSSの追加

コードを使ってサイトをカスタマイズするのが怖い場合は、WPCodeが最適なソリューションです。このコードスニペットプラグインを使用すると、テーマファイルを直接操作する必要がないため、カスタムコードを安全に挿入できます。

エラーが発生した場合、WPCodeは問題を発生させているコードを自動的に検出し、無効化します。これにより、サイトが壊れる可能性を最小限に抑えることができます。

まず、ウェブサイトにWPCodeプラグインをインストールします。詳細については、WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。

次に、WordPressダッシュボードでコードスニペット » +スニペットを追加 に移動します。「カスタムコードを追加（新規スニペット）」を選択し、「+カスタムスニペットを追加」をクリックします。

次に、新しいカスタムコードスニペットに名前を付けます。「CSSスクロールバー」のような簡単なものでも構いません。

その後、コードタイプを「CSSスニペット」に変更します。

コードプレビューボックスで、先ほど示したスニペットを貼り付けてください。

完了したら、ページを下にスクロールして「挿入」セクションに移動します。そこで、挿入方法が「自動挿入」に、場所が「サイト全体ヘッダー」になっていることを確認してください。

これで完了したら、右上隅のボタンを「アクティブ」と表示されるように切り替え、「スニペットを保存」をクリックしてください。

CSSクラスを追加した要素にスクロールバーが表示されるはずです。

ここに、最近の投稿のリストにスクロールバーを追加する例を示します。

複数のサブメニューを持つメニュー項目にカスタムスクロールバーを追加する方法

読者が興味を持っていることの1つは、長いサブメニューを持つナビゲーションメニュー項目にスクロールバーを追加する方法です。

実際、プロセスは先ほど示したものとほぼ同じです。ただし、使用しているテーマによって、いくつかの小さな調整があります。

クラシックテーマを使用している場合は、メインメニュー項目にのみscroll-barクラスを追加してください。サブメニュー項目に追加する必要はありません。

メニューにCSSクラスを追加するには、テーマカスタマイザーを開くことができます。

次に、「メニュー」ボタンをクリックします。

次に、歯車の「設定」アイコンをクリックし、「CSSクラス」を選択します。

これにより、各メニュー項目にCSSクラスを追加できます。

次に、サイドバーパネルを下に移動します。

次に、プライマリメニューを開きます。

この段階で、CSSクラスを追加したいメニュー項目を選択し、クリックして展開できます。

「CSS クラス」というフィールドがあるはずなので、そこにクラスを追加できます。

それ以外は、CSSコードのscroll-barクラスのすべての言及の後にsub-menuクラスを追加するようにしてください。例：

.scroll-bar .sub-menu {
  max-height: 100px;  /* Adjust the maximum height as needed */
  overflow-y: scroll; /* Enable vertical scrolling */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}
/* Do the same to the rest of the code */

ナビゲーションメニューは次のようになります。

ブロックテーマにも同じ原則が適用されます。

メインメニュー項目にのみscroll-barクラスを追加する必要があります。サブメニューには追加しないでください。

さて、ここからが異なります。WordPressウェブサイトにアクセスし、ブラウザのインスペクトツールを開く必要があります。

Chrome ユーザーの場合は、サブメニューのあるメニュー項目を右クリックして「検証」を選択するだけです。

キーボードでCTRL/Command + Fを押して検索機能（Find feature）を有効にします。次に、scroll-barクラスを含む<ul></ul> HTMLコードを探します。

正確なコードはテーマごとに異なりますが、私たちのコードは以下のようになります。

<ul data-wp-on-async--focus="actions.openMenuOnFocus" class="wp-block-navigation__submenu-container scroll-bar wp-block-navigation-submenu">...</ul>

サブメニュー項目がすべてハイライトされた場合、正しいコード行を選択していることになります。

次に、class="と">の間にあるすべてのCSSクラスをコピーします。

CSSコードで、scroll-barクラスを、クラスであることを示すピリオド（.）を前に付けたすべてのクラスに置き換えます。テーマがこれらの設定を上書きしないように、スクロールバーをカスタマイズするすべての行に!importantを追加することも良いでしょう。

例を挙げます。

.wp-block-navigation__submenu-container.scroll-bar.wp-block-navigation-submenu {
 max-height: 100px !important; /* Adjust the maximum height as needed */
 overflow-y: auto !important; /* Enable vertical scrolling */
 overflow-x: hidden !important; /* Hide horizontal scrollbar */
}
/* Do the same to the rest of the code */

このコードを追加すると、ナビゲーションメニューは次のようになります。

カスタムスクロールバーのデザインをカスタマイズする方法

カスタムスクロールバーを追加したので、ウェブサイトのデザインに合わせたいと思うかもしれません。CSSを使用してスクロールバーの外観を簡単に変更できます。サイズ、色、形状をカスタマイズする方法を見てみましょう。

スクロールバーを追加している要素の最大の高さを変更したいとします。この場合、最上部のmax-height:の数値をピクセル単位であれば任意の数値に変更できます。

width: の数値を調整することで、スクロールバーが表示される要素の幅を広くしたり狭くしたりできます。

スクロールバーのサイズを調整するには、.scroll-bar::-webkit-scrollbar セレクターの下にある width: 10px; という行を見つけてください。

この数値を大きくするとスクロールバーが太くなり、小さくすると細くなります。たとえば、width: 15px;は太いスクロールバーを作成し、width: 5px;は細くします。

スクロールバーの色を変更するには、.scroll-bar::-webkit-scrollbar-thumbセレクターの下にあるbackground: grey;という行を見つけます。

「grey」を好きな色（例：「blue」や16進数カラーコード（例：#0000FF）を使用）に置き換えてください。

スクロールバーをより丸くしたい場合は、border-radiusプロパティを探してください。

数値が大きいほど、角は丸くなります。border-radius: 15px; を border-radius: 20px; に変更してより丸い外観にしたり、border-radius: 0px; に変更してシャープな角にしたりしてみてください。

上記の変更は、ChromeやSafariなどのWebkitベースのブラウザにのみ影響することに注意してください。

Firefoxの場合、scrollbar-colorプロパティを調整する必要があります。最初の色はサム（ドラッグする部分）用で、2番目の色はトラック（背景）用です。たとえば、scrollbar-color: blue #eaeaeaとすると、Firefoxで明るい灰色のトラックに青いスクロールバーが作成されます。

これらの変更を行った後、CSSを保存し、WordPressページを更新して、新しくカスタマイズされたスクロールバーを実際に確認してください。ウェブサイトに最適な外観が見つかるまで、さまざまな色やサイズを自由に試してください。

WordPressウェブデザインを改善するその他の方法を学ぶ

WordPressサイトにカスタムスクロールバーを追加する方法を学んだところで、ウェブサイトのデザインと機能を改善する他の方法も探ってみませんか？WordPressスキルを次のレベルに引き上げるための役立つガイドをいくつかご紹介します。

• ページを視覚的に魅力的な方法で表示したい場合は、WordPress でサムネイル付きのページリストを簡単に表示する方法 に関するチュートリアルをご覧ください。
• コンテンツが多いブログの場合、無限スクロールはユーザーエクスペリエンスを大幅に向上させることができます。この機能を追加する方法をステップバイステップで学びましょう。
• 視覚的な魅力を加えるために、WordPressテーマにパララックス効果を追加することを試してください。思ったよりも簡単です。
• アクセシビリティを向上させるために、サイトに フォントリサイザー を追加することを検討してください。そのための簡単なガイドを用意しています。
• サイドバーの現在の位置に満足していない場合は、WordPressでサイドバーの位置を変更する方法をお見せできます。

この記事が、WordPressサイトの任意の要素にカスタムスクロールバーを追加する方法を学ぶのに役立ったことを願っています。また、最高のWordPressテーマビルダーの専門家によるピックと、WordPress投稿に読書進捗バーを追加する方法に関するガイドも確認したいかもしれません。

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