【WordPress】ヘッダ・メイン・サイドバーの横幅レイアウト調節

2017年11月27日2019年6月12日WordPress,WordPressカスタマイズ

WordPressのテーマ「Simplicity2」を利用していた時の記事になります

「Simplicity2」も子テーマのstyle.cssに上書きCSSを追記していく事でCSSデザインをカスタマイズが可能

今回はレスポンシブデザインを維持しながら好みのカラムサイズに横幅レイアウトを調節してみました

ヘッダーとメニュー部分の横幅100%表示

まず一番に変更したかったのがヘッダーとメニュー部分の横幅100%表示

あ、フッターも横幅100%で。

これはPC・スマホ共通でそうしたいのでそのまま
style.css

#header-in, #navi-in, #footer-in {
 width: 100%;
 margin: 0 auto;
 }

2カラム表示時のカラム幅を広げる案

広げるのはmainとsidebarの合計に余白分を合わせてbody(div)のサイズに収まるようにすればOKですね

サイドバーも広めにとるとメインカラムもある程度広くないとバランス悪いですの

style.css

@media only screen and ( min-width: 1180px ) {

#body-in{
 width: 1180px;
 margin: 0 auto;
}

#main{
width: 800px;
margin:auto;
}

#sidebar {
width: 350px;
}
}

左カラム（メイン）可変・右カラム（サイドバー）固定案

WordPressの管理画面もそうですが、レスポンシブらしく2カラムでの左カラム（メイン）可変・右カラム（サイドバー）固定、という案もありますね

この場合いくつか方法はあると思いますが、flexboxでやろうとするとfloatでやってある親テーマのCSSを眺めてどれか上書きや解除しなくては崩れるかも知れない、というわけで

@media only screen and ( min-width: 1180px ) {
#body-in{
overflow: hidden;
}
#main {
  float: left;
  margin-left:6px;
  width : -webkit-calc(100% - 380px);
  width : calc(100% - 380px);
}

#sidebar {
  margin-light:6px;
  float: right;
  width: 350px;
}
	
}

左右に少しmarginを付けたのはborderがウィンドウ端と重なってるのが気持ち悪いから。

記事リストをボックス？タイル？タイプにしている「Simplicity2」のブログでは選択肢がそのままだと最大３つなので右側に余白がいっぱい余るかもですね

追記：タイルタイプの記事リストは３つを選んでもデフォルトの横幅で丁度３つになるサイズだよってだけで折り返さなかったです（スペースがあれば４つでも５つでも横に並ぶ）

一定サイズ以下は１カラム横幅100%に変更

「Simplicity2」はデフォルトでブラウザウィンドウの横幅に合わせて切り替えていてデフォルトでも一定のトコから１カラムにしてありますね

個人的には最近はサイドバーをあまり重要視していないのでPCサイズの割と大きめな1180px以下からはもう１カラム表示にしました。

あとこのサイズからはもう左右余白なし表示の方が好みなので100％表示としました

style.css

@media only screen and ( max-width: 1180px ) {
#body-in,#main,#sidebar{
 width: 100%;
}
}