WordPressで投稿記事の幅を変更後
サイドバー・ウィジェットが異常になる原因

 

 

この現象は投稿記事の幅の変更だけで満足している人が
おちいりやすいのでは
ないかと思う。

 

原因を探し出すのにけっこう時間が掛かった。

 

ここを読んでいる時点で、投稿記事の幅を変更する方法は
知っていると思うが
一応、自分用メモとしても書いているので
最初の流れから書いていく。

 

このブログはBlogSixteenというテーマを基本ベースに
カスタマイズしながら
使わせてもらっている。

 

スマホを意識すればあまり変更しな方が良いのだろうが
投稿記事の幅を
もう少し広くしたくなり調べてみた。

 

するとどうやらスタイルシート(style.css)でsite-contentの#main の
数値を
大きくすれば広げられそうだったので実行した。

※この画像は変更後なので正しい数値になっている。

 

赤い部分の数値だけを大きくし投稿記事の幅が予定通り広がり
目的が
達成されたのでこのまま運用していた。

 

スポンサーリンク

 

サイドバー・ウィジェットが異常になる原因の解決方法

 

しばらくしてウィジェットが使いたくなったので項目を追加した。
するとサイドバーに表示されるはずのウィジェットがなぜか投稿記事の
下の方に表示された。なんじゃこれと思いながら原因を探っていった。

 

時間が少したっていたので投稿記事の幅の変更が原因だと気づくのに遅れたが
なんとかそれが原因だという事に気づく事ができた。

 

何が悪かったかというと投稿記事の幅だけを変更し、
その他を修正しなかったのが
原因だった。

 

図で説明すると

#main のwidthが投稿記事の幅

#secondaryのwidthがサイドバーの幅

#secondaryのmargin-leftが余白

 

にそれぞれ対応している。

 

そして大事な事は①、②、③の3つの数値の合計が100に
なるようにしないと
異常が起こるということだ。

 

自分の場合は②と③をそのままにしていたので、
合計が100を超えてしまいウィジェットを設定しても
投稿記事の下の方に
表示されるという異常が発生した。

 

というわけで①、②、③の3つの数値の合計が100になるように
調整したら
無事にウィジェットがサイドバーの位置に
表示されるようになり問題が解決した。

 

テーマによって数値を変える場所は様々だと思うが
基本的な考え方は同じだと思う。

 

注意点は③の余白の設定が無いテーマもあると思うので
よく確認してから数値を
変更した方が良い。

 

合計を100にしないと別の所でも異常が発生する可能性も有る。
ブログ初心者なので1つの異常を解決するのも大変だ。

 

スポンサーリンク