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

2018年1月31日カスタマイズ

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」のブログでは選択肢がそのままだと最大3つなので右側に余白がいっぱい余るかもですね

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

 

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

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

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

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

style.css

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

 

2018年1月31日カスタマイズ

Posted by Yousuke.U