WordPress個別サポート

「divタグの閉じ忘れ」はよくあるミスです。エラーメッセージが表示されないので気づかないかもしれませんが、「サイドバーが下に落ちた!」のような大騒ぎの原因になります。当サイトでも何度か同じような問題を取り上げていますが、WordPress個別サポートにご相談が多いので、問題と対策を紹介しておきます。

スポンサーリンク

「divタグの閉じ忘れ問題」とは

divタグを使って本文をレイアウト

WordPressに限りませんが、ページの本文やサイドバーなどに文章を入力するときは、divタグを使ってレイアウトを整形することもあります。

divタグを使って本文をレイアウト

divタグを使って本文をレイアウト

通常は何の問題もありません。この例でも本文は左、サイドバーは右に表示されます。

問題のない状態(本文が左・サイドバーが右)

問題のない状態(本文が左・サイドバーが右)

divタグを閉じ忘れた場合

投稿の本文から、divタグを閉じる「</div>」を消してみます。自分で入力するときだけでなくコピーペーストするときも定番のミスです。

divタグを閉じる「</div>」を消すと…

divタグを閉じる「</div>」を消すと…

ページを表示すると、サイドバーが下に落ちてしまいます。

サイドバーが下に落ちる

divタグの閉じ忘れが原因でサイドバーが下に落ちる

原因は言うまでもなくdivタグの閉じ忘れです。このような「サイドバーが下に落ちた!」は定番のWordPressトラブルですが、ほとんどの原因はdivタグの閉じ忘れです。

divタグの閉じ忘れをチェックできる「HTMLエラーチェッカー」

このような問題が起きた場合、そのページのHTMLソースをチェックして、開始タグの<div>と終了タグの</div>が釣り合っているか調べると問題の原因がわかります。とはいえ、目視でdivタグを数えるのは面倒なのでツールでチェックした方が効率的です。

たとえば、Google Chromeの拡張機能「HTMLエラーチェッカー」です。Google Chromeに追加して、チェックしたいページをブラウザで表示した後、画面右上のアイコンクリックなどでHTMLのチェックを実行します。

Google Chromeの拡張機能「HTMLエラーチェック」の実行

Google Chromeの拡張機能「HTMLエラーチェック」の実行

問題なければ上記のように「タグはおそらく完璧です」と表示されますが、divタグの閉じ忘れなどがある場合、次のようにエラーメッセージが表示されます。

divタグを閉じ忘れているためエラーメッセージが表示される

divタグを閉じ忘れているためエラーメッセージが表示される

これをヒントに、divタグの閉じ忘れを修正しましょう。ただし、必ずしもエラーメッセージが示す行に直接の問題があるとは限らないので、行番号は深追いする必要はありません。その行だけを調べていてもエラーは見つからないかもしれません。「divタグが閉じていない」をエラー原因のヒントとして考えて、その周辺から調査していく方が無難です。

この例でも問題があるのは本文に入力したdivタグです。エラーメッセージで示された「<div id="wrap">」に直接の問題があるわけではありません。エラーメッセージ自体を深追いしないように注意しましょう。

どうしても閉じ忘れているdivタグが見つからない場合はWordPress個別サポートにご相談ください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
wordpress講座受講予約
WordPress講座の問い合わせ先
脱・初心者を目指すWordPress 189のヒント

関連記事

BizVektorのカスタマイズ

Lightningのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート