ワードプレス(stinger3)のレイアウトが崩れた時の解決方法。サイドバーが記事下に落ちたのでcssをチェックしてみた。

wordpress-589121_640

こんばんは、朝倉(@asakura_43unyou)です。

 

お気づきの方もいると思いますが、実はこのサイト、レイアウトが崩れていたんです。

 

サイドバーが記事下に落ち込むという事態が起きておりました。

 

このサイドバーが落ちるレイアウトの崩壊は、よくあるパターンだと思うのですが私だけでしょうか?

 

今回は備忘録として今後自分が困った時のために記事にしておきます。

 

あと、レイアウトが崩れて悩んでいるブロガ―のお役にたてるようにってのも含みます。

[adsense]

スポンサーリンク


stinger3のコードを編集する方法

今回、サイドバーが記事下に落ちたことを解決するので、サイドバーのcssを編集すると思ってしまいますが、今回は記事のcssを編集します。

 

結論としては、記事本文の「終わりましたよ~」っていう意味のdivタグが書かれているかチェックするだけです。

 

①ワードプレスのダッシュボードにスタンバイ。

 

②「外観」の「エディター」をクリック。

 

③右側にcssコードがあるので、その中の「単一記事の投稿 (single.php)」をクリック。

 

■「単一記事の投稿 (single.php)」に記入されているcssをチェックしていきます。

 

スポンサーリンク


よくあるサイドバーが記事下に落ち込む理由

CSSでのレイアウトは、DIVタグを入れ子にしてパーツを構成していきます。

 

しかし、コンテンツを盛り込んでいくといくつものDIVタグが非常に多くなり、

 

①いつの間にかDIVタグを閉じるのを忘れてしまったりしております。

 

あるいは、

 

②どれがどのDIVタグの閉めなのか分からなくなったり。

 

私の場合は、②がほとんどですけどね。問題が起きてから気付くって状況です。

 

下のイラストは、DIVタグを閉め忘れた際に生じる崩れの例です。

テスト サイドバー

DIVタグで閉め忘れているの、本来右に来るべきサイドバーが、メインスペースの枠の中に入ってしまっています。

 

つまり、サイドバーを「記事の一部」と勘違いしているので、記事の最後に繋がっているということだと思います。

 

広告をいじっているときに、間違って「DIVタグ」を消してしまっていました。

 

記事下にあるアドセンス広告を載せていますが、

 

<div style=~  >

 

を閉める</div> がありませんでした。

 

テキストdiv

</div>がなかったので、コードが宙ぶらりんの状態です。

 

あと、参考までに書きますと、「スポンサーリンク」と記述している下の行にグーグルアドセンスのコードを入れて、 </div>で閉めれば記事下に広告が表示されます。

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です