Simplicityの全体レイアウトを変更して低解像度のパソコンでも表示できるようにする

低解像度のパソコンでも表示する手順

Simplicityは、表示画面の横サイズが1110px以下だと、レスポンシブ表示によりサイドバーが折りたたまれ、２カラム表示から１カラム表示になり、ナビゲーションバーも非表示になります。

また、バージョン1.5.7からは、「PCではレスポンシブ表示しない」機能も追加され、PCでは２カラム表示でナビゲーションバーも常時表示されるようになりましたが、全体を表示するには表示画面の横サイズが1110px以上必要です。

古いパソコンでは、解像度が1024pxのものもあり、低解像度のパソコンでは右サイドバーが欠けて表示されてしまいます。２カラム表示のままでナビゲーションバーも常時表示し、全体も表示できるようにするにはレイアウトの変更が必要になります。その手順は、

• 完全レスポンシブデザイン機能をオフ
• Simplicityの style.css のレイアウト設定の変更
• 子テーマの style.css に追加

完全レスポンシブデザイン機能をオフ

「外観」→「カスタマイズ」→「レイアウト設定（全体・リスト）」の

• 「完全レスポンシブデザインにする」
• 「PCでサイドバーをレスポンシブ表示（※完全レスポンシブがオフの時のみの設定）」

をオフにします。オンのままだとこのカスタマイズは無効になります。

オフにしても、パソコンとモバイル（スマホ、タブレット端末）に合わせた３つのレスポンシブスタイルは維持されます。

Simplicityの style.css のレイアウト設定の変更

Simplicityの全体レイアウトの設定は、style.css の「レイアウト（Layout）」部分で定義されています。その中の以下の設定を変更します。

全体サイズ（980px）＝#main（670px）＋#sidebar（300px）＋#mainと#sidebar間のマージン10px のレイアウトに変更します。
サイドバーは AdSense 広告用に300pxを確保します。

• #header-in等：1070px→980px
• #main：740px→670px
• #sidebar：300px→300px

/************************************
** レイアウト（Layout）
************************************/
#header-in, #navi-in, #body-in, #footer-in{
  width: 980px;
}
#main{
  width: 670px;
}
#sidebar{
  width: 300px;
}

子テーマのstyle.cssに追加

上記のCSS変更を子テーマのstyle.cssに追加します。子テーマのstyle.cssに追加する方法はこちらを参照してください。

レイアウト変更前後の表示

【レイアウト変更前】（全体1070px、メイン740px、サイドバー300px）

【レイアウト変更後】（全体980px、メイン670px、サイドバー300px）