田村カツオ田村カツオ

こんにちわ。田村カツオです。

本日の話なのですが、背筋が凍りつく出来事がありました。自分のブログを見ていたらデザインが崩れているのです…!サイドバーが表示されていない…

まばたきしてもう一度見てみても、無い(涙)

焦って焦って、やっとの事で原因を見つけて、直して…

今回はその経験を語ろうと思います。お題は「ワードプレスブログのサイドバーが下にずれる・表示されない時の対処法」です。

田村カツオのメルマガ登録ボタン

メルマガ(無料)をやっています。興味のある方はどうぞ!(^^;)

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

冒頭で言ったようにこのブログのサイドバーのデザインが崩れていました。下にずれるようになっていて、正しい形で表示されないのです。その時の様子をスクショしてありますのでご覧ください(↓)

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

遙か下、フッターよりも下の部分にずれ込んで表示されていました。要約すると全然ダメってことです(涙)

そして厄介な事に「何が原因かすぐに分からなかった」んですよ…カスタマイズした直後とかだったら、そのカスタマイズが原因だって分かるんですけど、今回はそんな事無かった訳です。

原因を特定した。

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

まずワードプレスのテーマの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>かどうかは、やってみないと分かりませんが何かの参考になれば幸いです(^_-)

======================

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

自分の部屋でPC1台で楽しく稼いでみたいという人は是非ご覧になってみて下さいね(^_-)

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