サイトデザイン

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

カツオのメルマガ

 

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

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

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

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

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

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

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

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

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

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

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

 

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

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

青天の霹靂でしたね。

原因を特定した。

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

まずワードプレスのテーマの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>が原因だと推測できます。

 

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

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

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

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

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

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

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

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

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

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

P.S.

僕は会社での面倒くさい人間関係や飲み会、パワハラが嫌になり、無計画に会社を辞めました。

その結果、一時的には月収10万円も稼げないような状態になりましたが、ブログマネタイズからビジネスを始め、今では副業での収入が月30万円は安定的に。それ以上の月も全然ある状態です。

その時のストーリーやノウハウなど、表のブログでは書けない事をメルマガでは公開していますので、良かったらメルマガ登録してみて下さい。

完全無料です。

カツオのメルマガ
 

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

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

ABOUT ME
カツオ
ノマド坊主。東南アジアが好き。キックボクシングが好き。ヨガが好き。大学卒業後にブラック勤務を経験。逃げるように坊主になるも、お金が無くなり、絶望的な状況に。 PC一台で個人ビジネスが出来る事を知って実践してみたところ、月収10万→30万→100万と割と順調にステップアップ。 今は田舎で自由に楽しく緩くノマド坊主的ライフスタイルを楽しんでいる。
こんな記事も読まれています。

COMMENT

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