私たちが見る最も一般的なレイアウトの問題の1つは、サイドバーがコンテンツの横ではなく、その下にドロップしてしまう場合です。これはサイトを壊れたように見せ、訪問者を混乱させる可能性があります。
これは通常、テーマの編集、プラグインのインストール、または小さなコードの変更の後によく発生します。閉じタグの欠落でさえ、レイアウトを崩す可能性があります。私たちは、ユーザーがテーマのトラブルシューティングを手伝っている間にこれを何度も見てきました。
良いニュースは、どこを見ればよいか分かれば簡単に修正できるということです。問題を特定するために開発者である必要はありません。
このガイドでは、最も可能性の高い原因を示し、サイドバーを元の場所に戻すための簡単な手順を説明します。
WordPressサイドバーがコンテンツの下に表示されるエラーの原因は何ですか？
サイドバーがコンテンツの下に表示される最も一般的な原因は、レイアウトを壊す HTML または CSS のエラーです。
HTMLの各<div>は適切に閉じられる必要があります。ページを表示するテンプレートに閉じられていない<div>タグがあると、レイアウトが崩れます。
同様に、不要な、または余分な閉じ</div>タグもレイアウトに影響を与え、サイドバーを下に移動させる可能性があります。
HTML以外にも、CSSはWordPressウェブサイトのすべての要素の全体的なデザインに影響を与えます。レイアウト内の要素の幅、配置、フローティングを定義するために使用されます。
簡単言うと、コンテンツエリアの幅が利用可能なスペースよりも広い場合、サイドバーは下に移動します。
まず、このWordPressサイドバーエラーを引き起こしている特定のコードを特定する必要があります。
とはいえ、WordPress でサイドバーがコンテンツの下に表示されるエラーを簡単にトラブルシューティングして修正する方法を見ていきましょう。これらのクイックリンクを使用して、特定のトラブルシューティングソリューションにスキップできます。
- WordPressテーマの最近の変更を元に戻す
- WordPress のキャッシュをクリアする
- WordPressプラグインを無効にする
- レイアウトを壊す壊れたタグを修正する
- サイドバーをコンテンツの下に移動するCSSを見つける
- サイドバーがコンテンツの下に表示される場合の対処法
- WordPressの一般的なエラーを解決するその他の方法を学ぶ
1. WordPressテーマの最近の変更を元に戻す
通常、サイドバーの問題はWordPressのテーマファイルが変更されたことが原因で発生します。
最近WordPressのテーマまたは子テーマを変更した場合、それらの変更を確認することがこのエラーを修正する簡単な方法です。
テーマ開発者に直接連絡してサポートを受けることもできます。詳細については、WordPress サポートの適切な依頼方法と取得方法に関するチュートリアルをご覧ください。
どの変更を元に戻す必要があるか分からない場合は、読み進めてください。他のトラブルシューティング方法をご紹介します。
WordPressのキャッシュをクリアする
すぐに表示されない変更を加えた場合、これはキャッシュの問題が原因であることがよくあります。
キャッシュプラグインは、同じページの古いバージョンを表示することがよくあります。WordPressのキャッシュをクリアしたり、ブラウザのキャッシュをクリアしたりすると、ウェブサイトに適用された変更を確認できるようになります。
3. WordPressプラグインを除外する
WordPressサイトの外観とスタイルは、使用しているテーマによって制御されます。ただし、場合によってはWordPressプラグインが独自のHTMLやCSSをウェブサイトに追加することもあります。
例えば、ページにお問い合わせフォームを追加したり、ライトボックスポップアップを追加したりすると、追加のCSSとHTMLが読み込まれます。
WordPress プラグインが原因で問題が発生していないことを確認するには、ウェブサイトのすべての WordPress プラグインを一時的に無効にすることができます。
これを行うには、WordPress管理ダッシュボードのプラグイン » インストール済みプラグインに移動し、リストの一番上にある「プラグイン」の横にあるチェックボックスをオンにします。次に、ドロップダウンメニューを開き、「非アクティブ化」を選択して、「適用」をクリックします。
問題が解消された場合、それはプラグインが原因で問題が発生していたことを意味します。WordPressのプラグインを1つずつ有効にし、各プラグインの後にウェブサイトを確認して、どのプラグインが問題を引き起こしているかを見つけてください。
その後、プラグインのサポートに連絡して、解決策を見つけ、問題を報告することができます。
詳細なガイダンスについては、WordPressプラグインを簡単に無効化する方法およびWordPress管理画面にアクセスできない場合にすべてのプラグインを無効化する方法に関するチュートリアルをご覧ください。
4. レイアウトを壊す <div> タグの修正
前述したように、壊れた<div>タグは、サイドバーがコンテンツの下に移動する一般的な原因の1つです。
問題がウェブサイトの特定の領域で発生している場合は、そのコードを表示しているテンプレートを確認できます。
例えば、この問題がシングル投稿でのみ発生する場合、single.phpテンプレートを確認する必要があるかもしれません。どのテンプレートを確認すべきかを知るには、私たちの完全なWordPressテンプレート階層チートシートを参照してください。
未終了のdiv要素をすばやく見つけて修正する最も簡単な方法は、W3C Validatorツールを使用することです。
また、要素の開始タグと終了タグをハイライト表示してコードのデバッグに役立つInspectツールやコードエディタアプリを使用することもできます。
要素の開始タグと終了タグをハイライトする例を次に示します。
コードを確認する際は、開いた<div>タグには必ず対応する閉じ</div>タグがあることを確認する必要があります。
同様に、対応する開いている <div> タグがない、孤立した閉じ </div> タグも探す必要があります。
HTMLタグの破損が見つかった場合は、それを修正することで、サイドバーがコンテンツの下に表示される問題が解決されます。
5. サイドバーをコンテンツの下に移動させるCSSを見つける
CSSは、ウェブサイトのデザインの最も重要な側面を制御します。WordPressテーマはCSSを使用して、グリッドレイアウト内のコンテンツとサイドバー領域の幅を定義します。
この値は、利用可能な表示領域のパーセンテージです。モバイルデバイスでは、テーマは自動的にサイドバーをコンテンツの下に押し下げます。
問題を引き起こしているCSSを特定するには、Inspectツールを使用できます。コンテンツをラッパーフィールド、コンテンツセクション、サイドバー領域に移動させるだけで、それらの幅と高さを確認できます。
例えば、コンテンツエリアが幅の70%、サイドバーエリアが幅の33%の場合、自動的に下に移動します。これらの値を計算する際には、各セクションのパディングやマージンの値によって使用されるスペースも考慮に入れると良いでしょう。
サイドバーがコンテンツの下に表示される場合の対処法
上記のいずれの手順も機能しなかった場合は、心配しないでください。まだ試せることがいくつかあります。
まず、完全なWordPressトラブルシューティングガイドを確認することをお勧めします。レイアウトに影響を与えている可能性のある他の隠れた問題を特定するのに役立ちます。
WordPressのデバッグモードを有効にすることもできます。これは直接エラーを修正するわけではありませんが、レイアウトを壊しているPHPエラーやプラグインエラーが表示される可能性があります。
デバッグモードが特定のプラグインを示している場合は、一時的に無効にするか、テーマのレイアウトに影響を与えない代替プラグインに置き換えてみてください。
WordPressの一般的なエラーを解決するその他の方法を学ぶ
WordPressサイトで他の問題が発生していますか？以下のチュートリアルをご覧ください：
- WordPress で無効な JSON エラーを修正する方法 (初心者向けガイド)
- WordPressの一般的なブロックエディターの問題とその解決方法
- WordPressの画像HTTPエラーの修正方法
- WordPressでメディア追加ボタンが機能しない場合の修正方法
- WordPressで「別のアップデートが現在進行中です」エラーを修正する方法
- WordPress投稿でアイキャッチ画像が重複して表示されるのを修正する方法
- WordPressでサイトエディタの空白問題を修正する方法（ステップバイステップ）
この記事が、WordPressのサイドバーがコンテンツの下に表示される問題を解決する方法を学ぶのに役立ったことを願っています。また、WordPressでよくあるエラーに関する究極のハンドブックや、WordPressの投稿やページごとに異なるサイドバーを表示する方法に関する記事も読むことをお勧めします。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Alessio
共有していただきありがとうございます。これで問題が解決しました。私だけが経験していたわけではないと知って嬉しいです。
WPBeginnerサポート
You’re welcome, glad our guide was helpful
管理者
Gina Detwiler
そのdiv要素をどのように見つけるか確信がありません。もう少し詳しく説明していただけますか？私のサイトでは最初からこの問題があり、どうすれば修正できるかわかりません。
WPBeginnerサポート
コードエディターでカスタムテーマのコードを確認すると、間違ったdivを見つけるのに役立ちます。また、要素の検査を使用してサイトを確認することもできます：https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
Shai
本当にありがとうございます！
解決しようと時間をかける手間が省けました。
おっしゃる通り、余分なdiv要素が閉じられていました。
Dale Jennings
現在の投稿を左に、最近の投稿を右側のサイドバーに配置しようとしていますが、サイドバーがページの一番下にあり、幅も広すぎます。初心者なので、何を言っているのか理解できません。簡単な解決策はありますか？
Ayla
すべてのページの下部にサイドバーが表示される問題が発生しています。これについてはあまり詳しくないので、最近Googleからドメインを移行した以外は何も特別なことはしていません。WordPressでサイトを構築しており、テーマを変更するまで問題はありませんでした。上記の指示を試しましたが、それらの項目が見つかりませんでした。
WPBeginnerサポート
Aylaさん、こんにちは。
一時的に以前のテーマまたはデフォルトのテーマに切り替えてみてください。これで問題が解決する場合は、問題はテーマにあります。テーマ開発者に連絡して、修正を手伝ってもらえるか確認してください。
管理者
ジャレッド・H
問題が解決しました、投稿ありがとうございます！
Dene
ありがとう、皆さん – この投稿で私の問題が解決しました。大変感謝しています。
Donald Efiom
今、私も同じ問題を抱えており、wcommerceプラグインを使用して製品を表示しているショップページのHTMLを編集する場所が見つかりません。ブラウザで要素を検査してデバッグし、修正することはできますが、実際のルートディレクトリでは、編集できるショップページのHTMLを保持しているページが見つかりません。助けてください！
マリア・アップルビー
どうしてもサイドバーの問題が解決できません。開いているブロックを検索しました。コピーしたコンテンツがHTMLで壊れていたブログ投稿を1つ削除しました。別のテーマを試しました。ウィジェットを削除しました（そして何が起こるか見てみようと「ブログをフォロー」ボタンを追加しました - まだ一番下にあります）。バリデーターを試しましたが、それが何を伝えているのかよくわかりません。異なるブログ投稿のURLを入力すると、同じエラーメッセージが表示されました。愚かに聞こえるかもしれませんが、すみません...ブログは長い間持っていますが、最近多くのコンテンツを追加し始めたばかりで、まだ何をすべきかよくわかりません。サイドバーは、右側から、ブログの一番下に、ごく最近（過去数日間）になりました。手伝ってもらえますか？
WPBeginnerサポート
Mariaさん、こんにちは。
WordPress.comブログをご利用のようです。セルフホスト型WordPress.orgと無料のWordPress.comブログの違いについては、こちらのガイドをご覧ください。セルフホスト型WordPress.org vs 無料のWordPress.comブログ
管理者
Sparsh Goyal
同じ問題を抱えていますが、解決できません。私のホームページだけがこの問題を抱えています。投稿タイプのページとページタイプのページは正常に動作しています。私のホームページのサイドバーは、コンテンツのすぐ隣に行くのではなく、上に移動しています。私のウェブサイトで何が間違っているのか確認してもらえますか。私のサイトはcoasilat.comです
ムスタファ
ありがとうございます。問題は解決しました。余分なdiv要素がありました。それを削除したら問題は解決しました。
ヤン・レインリンク
助かりました、ありがとうございます！
Asha Shendre
このために一日中悩みました。
問題解決はここでしか得られませんでした。
ありがとうございます。
どうもありがとうございます、旦那様…
Harish
ご協力ありがとうございます
Sly
こんにちは、初心者です。CSSやHTMLコードについては何も知りません。テーマの編集もしていませんし、子テーマもありません。必要なことはすべてプラグインを追加するだけです。すべてのブログ投稿ページで問題が発生しているようです。サイドバーがブログ投稿の下にあります。divが何であるかも、それをどう修正すればよいかもわかりません。プロの皆さん、このサイドバーの問題を解決するにはどうすればよいでしょうか？
タマラ
コーダーでも初心者でもありませんが、このページにあるW3バリデーターのリンクを使ってこの問題を解決できました。バリデーターの上部にある「オプション」で、利用可能なすべてにチェックを入れ、ブログのウェブアドレスを入力してバリデーターを実行しました。エラーの番号付きリストの下に、ブログのテキスト内のエラーが非常に詳細に（そして威圧的に表示されましたが、頑張ってください）表示されました。この記事で言及されているエラーに焦点を当てました。詳細なレポートをスクロールしていくと、赤くハイライトされた1つのエラーが見つかりました。テキストが表示されていたので、インターネットリンクを挿入した直後のブログ投稿の1つにあることがわかりました。WordPressダッシュボードでそのブログ投稿に移動し、「編集」をクリックしてリンクを削除しました。（見えないものや、そこにある可能性のあるものを確実に削除するために「削除」を押し続け、同じ理由で数文字をバックスペースしました。その後、ブログ投稿を保存しました。ウェブページは修正されました！その後、リンクを元に戻すためにブログ投稿を再編集しましたが、すべて問題ありませんでした。問題解決です。
Lisa W Boyle
教えてくれてありがとう。指示に基づいて問題をすぐに発見し、修正することができました。single.phpファイルに余分なを挿入していたことがわかりました。あなたは命の恩人です、本当にありがとう！
Roney Oenophile
何か間違ったことをしてしまったようです。助けてください。テキストを編集していて、誤ってキーの組み合わせを押してしまい、見た目が変わってしまいました。フルスクリーンなどのボタンがいくつかなくなりました。また、公開ボタンが左側に移動しました。投稿にアップロードした画像がコンテンツの上に移動し、非常に大きくなりました。どうしてこうなったのか、何が問題なのかわかりません。私はコンピューターに詳しくありません。通常は投稿を書くだけです。助けてください。私のページのURLはwordpress.comです。
WPBeginnerサポート
自己ホスト型WordPress.orgと無料WordPress.comブログの違いに関するガイドをご覧ください。WordPress.comサポートに連絡する必要があります。
管理者
Danielle
初めてサイトの更新を担当します…静的なホームページを更新しようとしたところ、サイドバーが一番下に行ってしまいました。
<div>や</div>タグは見当たりません…助けてください！引き継いだ人に、自分が何かを台無しにしたと知られたくないのです！giovanni
誰か助けてくれませんか、同じ問題を抱えています…
これは私のheader.phpです
Susan
完璧！ ありがとう！ divと言われた瞬間に、私のコミュニティブログの誰の投稿を編集する必要があるかがわかりました！
リア
This is happening to me right now every time I try out a new theme. Only one widget stays on the sidebar and the rest goes to the bottom of the content. But when I go back to my current theme, everything looks okay. I still can’t figure it out.
サム
ああ！これで、たくさんの時間とフラストレーションを節約できました！ありがとうございます
srik
これ、本当に助かりました！非常に役立ちました
Amy
この投稿をありがとうございます。現在、この問題をウェブサイトで修正しようとしています。この投稿で言及されていることはすべて試しましたが、まだ問題があります。ウェブサイトについては少し知っていますが、なぜトップナビゲーションバーが2行になり、サイドバーが一番下に押しやられるのか、全くわかりません。私のウェブサイトはまだ公開されていませんが、ウェブサイトはこちらです
ご協力ありがとうございます!!
sean
私のウェブサイト内のカスタムブログでも同様の問題が発生しています。コンテンツが十分になく、サイドバーがフッターの下にスリップします。
問題を解決したのは、次のコードを削除（または安全のためコメントアウト）することだとわかりました：
この空のdivが何のためにあるのか分かりませんし、今のところブログに悪影響はありません。もう一つ、より明白な理由は、閉じタグのないdivです。フッターとヘッダーが削除されているため、標準的なHTMLサイトとは異なり、WPで開いている/閉じているdivタグすべてを把握するのは少し難しくなります。
Sean
ええと、それはさまざまなWPページの最下部にある空の「区切り文字」divをコメントアウトすることです。それは私の元のコメントから消えました！
David Pomazzo
私のウェブサイトを見て、手伝ってもらえませんか？ http://www.americasfreedomfighters.com/ Google AdSenseを挿入したところ、サイドバーが一番下に押しやられ、サイドバーに記事が表示されてしまいます！ どうもありがとうございます。
Jen
THANK YOU! It was the content width that did it for me
セシリア
この問題が発生しており、解決できません（数日間試しています）。
こちらが私のサイトです：
本当に助けが必要です。よろしくお願いします!!!! =)
WPBeginnerサポート
おそらく、.hfeed divを終了する前にclearを追加する必要があるでしょう。次のようになります：
1-click Use in WordPress
管理者
ケイティ・クラーク
この問題があって、どこから手をつけていいかさえ分かりません。今日は何も編集をしていないからです。何か提案はありますか？私のサイトはこちらです
http://clarkscondensed.com/
編集スタッフ
あなたのサイトはChromeでは問題なく表示されています。
管理者
Doomish
素晴らしいヒントです！非常に役立ちますし、Kathyのコメントはまさに私がよく経験することです。
キャシー
ほとんどのテーマには適切なCSSが用意されているため、これはほぼ常にHTMLが正しく閉じられていない問題だと考えられます。通常、ユーザーが投稿エディタに独自のHTMLを追加しようとしてうまくいかなかった場合に、特定のページで発生します。単純なエラーですが、デバッグに時間がかかることがあります。