サイトデザイン

ワードプレスブログのサイドバーが下にずれる・表示されない時の対処法

ワードプレスでブログを運営しているとデザインが崩れてしまう事が時々あり、その度にヒヤッとします。

数々の失敗を乗り越えてきた本ブログですが、ついこの間はサイドバーが下にずれてしまい正しく表示されないという事態に陥りました。

最終的には無事に直ったのですが…

ここでは備忘録も兼ね、その時僕がとった対処法等を説明していきたいと思います。

ワードプレスブログのサイドバーが下にずれる・表示されない…

冒頭でもお伝えしたように、つい先日、本ブログのサイドバーのデザインが崩れてしまいました。

下にずれるようになっていて、正しい形で表示されないのです。

その時の様子をスクショしてありますのでご覧ください(↓)

サイドバーが下にずれてしまっている僕のブログ(昔のブログでお恥ずかしい…)

一見、サイドバーが表示されていないように思えますが、実は表示自体はされています。

遙か下、フッターよりも下の部分にずれ込んで表示されているのです。(要約すると「全然ダメ」という事ですが…)

厄介な事に何が原因かすぐに分かりませんでした。

カスタマイズした直後等でしたら、そのカスタマイズが原因だと分かるんですけど、今回はそんな事は全くなく、本当に突然。青天の霹靂でした。

原因を特定した。

そこでまず原因(テンプレートのどの部分がおかしくなっているのか)を特定する事にしました。

まずワードプレスのテーマのcss・phpは表示される領域によって別れています。ブログのどの部分を見た時に表示が崩れているのかを確認すれば、自ずとどこを直せばいいかが分かるという訳です。

トップページを見てみてもデザイン崩れは起きていませんでした。サイドバーは適切な位置に表示されています。

ところが個別の記事を見てみるとサイドバーが下にずれていました。

つまり、これにより今回はsingle.phpに問題があると分かる訳です。

田村カツオ
田村カツオ
参考までにcssのどの部分がどの部分を構成しているか、主な部分の簡単な表を載せておきますね。

index.phpトップページに関係
single.php個別の投稿に関係
header.phpヘッダーに関係
footer.phpフッターに関係
cont.php投稿内容のループに関係
style.cssスタイル全体に関係(賢威は更に細かく別れる)

実際にとった対処法

どこがおかしいか分かれば後は比較的簡単です。

最近、原因の部分(single.php)をいじった時に何をしたか…自分自身に心の中で聞いてみます。

田村カツオ
田村カツオ
そう言えば、数日前メルマガフォームを調整する為にsingle.phpをいじりました(汗)

そこで、そのメルマガフォームの記述の付近を見てみると怪しい部分がありました。</div>が2個重なっています。これって本来は1個で良いんですけど、おそらくメルマガフォームの記述をコピペした時に重複してしまったんですね。

サイドバーが下にずれ込んで表示される時はこの</div>が原因ですね。(だと思います。)

だって基本的にこれはあまり2個重なる意味がありませんから…

 

これを削除してみれば、おそらくサイドバーは直るはず…(↓)

ワードプレスブログのサイドバーが下にずれる原因

という事で早速この重複している</div>を削除して、1個にしてみるとサイドバーが直りました!

きちんと表示されてると本当に安心します。当たり前のことが当たり前にあるってありがたいです!

田村カツオ
田村カツオ
普段から当たり前の事に感謝しなくてはダメですね。

終わりに。

今回はサイドバーの表示が崩れる場合の対処法について、僕の経験をベースに述べてきましたがいかがでしたでしょうか。

多分、同じ状況に陥って困っている人は多いと思います。

原因が</div>かどうかは、やってみないと分かりませんが何かの参考になれば幸いです。

カツオ
カツオ
たった一つのブログで僕の人生は激変しました。

ずっと稼ぎ続けてくれるネット上の資産を構築するスキルを身につけた事がきっかけです。(詳しくはプロフィールで!)

今では複数のサイトを運営しアフィリエイト報酬を得たり、法人顧客のSEOコンサル等も行っており、副業の収入がサラリーマン時代の月収を超えています。

メルマガの中でその秘密について話しています。

現在、メルマガ登録者限定で初心者がブログアフィリエイトで月収10万円以上稼ぎ、インターネット上に資産を築く為のノウハウが詰まったテキストを無料でプレゼント中!

※僕のメルマガは無料で読んで頂く事が出来ますし、必要ないと感じたらいつでもボタン1つで解除が出来ます。



ABOUT ME
カツオ
毎日のシゴトを「魂レベル」で楽しむ僧侶×Webマーケター。インターネットを用いた人気メディア運営のハウツーを伝授するオンラインレッスンを行ったり、法人顧客に対してWebマーケティングのアドバイスを行っている。趣味は筋トレ、ムエタイ、英語の勉強。

COMMENT

メールアドレスが公開されることはありません。