サイトデザイン

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

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

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

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

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

カツオのメルマガ

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

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

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

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

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

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

遙か下、フッターよりも下の部分にずれ込んで表示されているので、完全な不具合なのですが。

 

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

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

青天の霹靂でしたね。

原因を特定した。

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

まずワードプレスのテーマのphpファイルは表示される領域によって別れています。

ブログのどの部分を見た時に表示が崩れているのかを確認すれば、自ずとどこを直せばいいかが分かるという訳です。

トップページを見てみてもデザイン崩れは起きていませんでした。

サイドバーは適切な位置に表示されています。

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

 

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

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

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

実際にとった対処法

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

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

カツオ
カツオ
そう言えば、数日前メルマガフォームを調整する為にsingle.phpをいじった!

そこで、そのメルマガフォームの記述の付近を見てみると怪しい部分がありました。</div>が2個重なっています。

これって本来は1個で良いんですけど、おそらくメルマガフォームの記述をコピペした時に重複してしまったのかと。

よって、サイドバーが下にずれ込んで表示される時はこの</div>が原因だと推測できます。

カツオ
カツオ
</div>が2個あるのは良いのですが、その場合は<div>も2個ないとおかしいのです。

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

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

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

きちんと表示されてると本当に安心します。

当たり前のことが当たり前にあるってありがたいです!

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

ブログのサイドバーが下にずれる時の対処法 まとめ

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

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

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

会社だけの人生を送りたい人は絶対読まないで下さい↓

カツオ
カツオ
参加無料のオンライン講座やってます。

副業で収入UPしたい!会社に依存したくない!スキルを身に付けたい!

そんな貴方は参加しなきゃ損!

カッパ君
カッパ君
参加者限定特典初心者でも月5万円稼げるブログノウハウをプレゼント!

参加者しか見れない秘密のコンテンツも盛りだくさん!

カツオのメルマガ
 

※携帯電話のメールアドレスでは登録出来ませんのでご注意下さい。

GmailやYahooメールなどがオススメ。

ABOUT ME
カツオ
大学卒業後に就職した会社では会社人間となることを余儀なくされるが、「会社に魂を売っても仕方ないな」と気が付いて退社。 ネットで検索していたらブログから始めて初心者でも個人ビジネスが出来る事を知り、実践してみたところ、月収10万→30万→100万とどんどんステップアップ。 今はやりたくない事はやらない、魂に正直なライフスタイルを送っている。本業は坊主です。
こんな記事も読まれています。

COMMENT