WordPress でオーバーフローを無効にする方法（横スクロールを削除）

横スクロールバーは、そのページの要素が画面に表示するには幅が広すぎて画面からはみ出す場合に表示されます。ほとんどのWordPressテーマでは、サイトのレイアウトを崩したり、ユーザーを混乱させたりする可能性があるため、横スクロールは使用されません。

サイトオーナーであるあなたにとってはイライラすることであり、信じてください、訪問者があなたのコンテンツをナビゲートしようとする際には、さらにイライラすることです。

幸いなことに、私たちの経験では、オーバーフローを無効にしてスクロールバーを削除することは通常簡単であり、サイトの外観と使いやすさに大きな違いをもたらします。

この記事では、WordPressでオーバーフローを簡単に無効にし、水平スクロールバーを削除する方法を説明します。当社のわかりやすい手順は、コーディングの専門家でなくても、ユーザーフレンドリーで簡単に実行できます。

WordPressで横スクロールバーまたはオーバーフローが発生する原因は何ですか？

WordPressウェブサイトをセットアップする際には、すべての人にとってユーザーフレンドリーでアクセスしやすいものにすることが重要です。

要素がウェブサイトのレイアウトよりも幅広の場合、WordPressは水平スクロールバーを表示します。これは「オーバーフロー」と呼ばれます。水平スクロールバーがあると、デザインが崩れたり、ウェブサイトの使いやすさが低下したりする可能性があります。

水平スクロールバーと垂直スクロールバーの両方があるウェブページは、訪問者にとって混乱しやすく、ナビゲートが困難になる可能性があります。これにより、サイトを離れる人が増え、コンバージョン率や売上が低下する可能性があります。

オーバーフローを無効にすると、サイトがよりユーザーフレンドリーになり、固定幅のレイアウトが作成され、サイト全体の応答性が向上します。

これを踏まえて、WordPressでオーバーフロー水平スクロールバーを簡単に無効にする方法を見ていきましょう。

• 方法1：テーマカスタマイザーを使用してCSSスニペットを追加する
• 方法2：WPCodeを使用してCSSスニペットを追加する
• ボーナス：WordPressにカスタムスクロールバーを追加する

方法1：テーマカスタマイザーを使用してCSSスニペットを追加する

WordPressでオーバーフローを無効にするには、テーマカスタマイザーの「追加CSS」オプションにCSSコードを追加するだけで済みます。

WordPress ダッシュボードから 外観 » カスタマイズ ページにアクセスするだけです。

カスタマイズページに移動したら、「追加CSS」タブをクリックします。

次に、次のコードをコピーして貼り付けるだけです。

html, body {
	max-width: 100%;
	overflow-x: hidden;
}

その後、オーバーフローは削除され、ウェブサイトのライブプレビューペインに適用されているのが表示されます。

完了したら、ページ上部にある「公開」ボタンをクリックすることを忘れないでください！

方法2：WPCodeを使用してCSSスニペットを追加する

WPCodeプラグインを使用して、コードスニペットでCSSコードを追加することもできます。

WPCodeは、100万以上のウェブサイトで使用されている、市場で最高のWordPressコードスニペットプラグインです。

このプラグインを使用すると、テーマファイルを編集することなく、WordPressにカスタムコードを簡単に追加できるため、この方法をお勧めします。

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

有効化したら、WordPressダッシュボードからCode Snippets » + Add Snippetsページにアクセスしてください。

ここで、「カスタムコードを追加（新規スニペット）」オプションの下にある「+ カスタムスニペットを追加」ボタンをクリックします。

次に、画面に表示されるオプションのリストから、コードの種類として「CSSスニペット」を選択する必要があります。

次に、「カスタムスニペットを作成」ページに移動します。ここで、コードスニペットのタイトルを入力することから始めます。

この名前はユーザーには表示されず、お客様の識別のためにのみ使用されます。

その後、以下の CSS コードスニペットをコピーして「コードプレビュー」ボックスに貼り付けます。

<style type="text/css">
html, body {
	max-width: 100%;
	overflow-x: hidden;
}
</style>

その後、「挿入」セクションまでスクロールすると、「自動挿入」と「ショートコード」の2つのオプションがあります。

ここから、「自動挿入」モードを選択して、アクティベーション時にコードを自動的に実行します。

ただし、特定のページでのみ横スクロールバーを無効にしたい場合は、「ショートコード」モードを選択できます。

これを行うと、WPCode はスニペットのアクティベーション時にショートコードを提供します。これを特定のウェブサイトのエリアまたはページに貼り付けて、オーバーフローを削除できます。

オプションを選択したら、ページの上部に戻り、右上隅のスイッチを「非アクティブ」から「アクティブ」に切り替えます。

次に、「スニペットを保存」ボタンをクリックするだけです。

これで完了です！サイトの横オーバーフローのスクロールバーを削除しました。

ボーナス：WordPressにカスタムスクロールバーを追加する

横スクロールバーを無効にした後、カスタムスクロールバーを追加することもできます。

例えば、サイトがブランドカラーに従って特定のカラースキームを使用している場合、スクロールバーにも同じ色を使用できます。これは視覚的に魅力的で、ユーザーにサイトの探索を促します。

カスタムスクロールバーを作成するには、Advanced Scrollbarプラグインをインストールして有効化します。詳細は、WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。

有効化したら、WordPressダッシュボードからSettings » Advanced Scrollbar Settingsページにアクセスしてください。ここから、スクロールバーの色をお好みに合わせて変更できます。

完了したら、「変更を保存」ボタンをクリックして設定を保存します。詳細については、WordPressにカスタムスクロールバーを追加する方法のチュートリアルをご覧ください。

この記事が、WordPressサイトでオーバーフローを無効にする方法を学ぶのに役立ったことを願っています。また、WordPressサイトで使用するのに最適なコードスニペットの専門家による選択肢や、WordPressで未使用のCSSを削除する方法の初心者向けガイドも参照することをお勧めします。

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