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

カテゴリー別今日の人気ランキング
スポンサーリンク

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

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

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

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

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

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

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

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

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

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

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

子テーマのstyle.cssに追加

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

子テーマを利用してサイトデザインをカスタマイズする方法
子テーマによるテーマの編集方法 WoedPressのテーマは、 配置するコンテンツを設定したり、テーマの機能を設定するためのphpフ...

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

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

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

スポンサーリンク
wp_レクタングル (大)
wp_レクタングル (大)
☆最後までお読みいただきましてありがとうございます。
☆この記事がお役に立ちましたらシェア・フォローしていただけると嬉しいです!

シェアする

フォローする