この現象は投稿記事の幅の変更だけで満足している人が
おちいりやすいのではないかと思う。
原因を探し出すのにけっこう時間が掛かった。
ここを読んでいる時点で、投稿記事の幅を変更する方法は
知っていると思うが一応、自分用メモとしても書いているので
最初の流れから書いていく。
このブログはBlogSixteenというテーマを基本ベースに
カスタマイズしながら使わせてもらっている。
スマホを意識すればあまり変更しな方が良いのだろうが
投稿記事の幅をもう少し広くしたくなり調べてみた。
するとどうやらスタイルシート(style.css)でsite-contentの#main の
数値を大きくすれば広げられそうだったので実行した。
※この画像は変更後なので正しい数値になっている。
赤い部分の数値だけを大きくし投稿記事の幅が予定通り広がり
目的が達成されたのでこのまま運用していた。
スポンサーリンク
サイドバー・ウィジェットが異常になる原因の解決方法
しばらくしてウィジェットが使いたくなったので項目を追加した。
するとサイドバーに表示されるはずのウィジェットがなぜか投稿記事の
下の方に表示された。なんじゃこれと思いながら原因を探っていった。
時間が少したっていたので投稿記事の幅の変更が原因だと気づくのに遅れたが
なんとかそれが原因だという事に気づく事ができた。
何が悪かったかというと投稿記事の幅だけを変更し、
その他を修正しなかったのが原因だった。
図で説明すると
①#main のwidthが投稿記事の幅
②#secondaryのwidthがサイドバーの幅
③#secondaryのmargin-leftが余白
にそれぞれ対応している。
そして大事な事は①、②、③の３つの数値の合計が１００に
なるようにしないと異常が起こるということだ。
自分の場合は②と③をそのままにしていたので、
合計が１００を超えてしまいウィジェットを設定しても
投稿記事の下の方に表示されるという異常が発生した。
というわけで①、②、③の３つの数値の合計が１００になるように
調整したら無事にウィジェットがサイドバーの位置に
表示されるようになり問題が解決した。
テーマによって数値を変える場所は様々だと思うが
基本的な考え方は同じだと思う。
注意点は③の余白の設定が無いテーマもあると思うので
よく確認してから数値を変更した方が良い。
合計を１００にしないと別の所でも異常が発生する可能性も有る。
ブログ初心者なので１つの異常を解決するのも大変だ。
スポンサーリンク
