Simplicityの横幅を簡単に可変にする方法【CSS弄ります】

追記:

この方法は多分もう使えません(?)

というかこのやり方以外に良い方法があるので、この記事の方法は非推奨です

↓――――――――――――ここから元記事開始――――――――――――↓

無料wordpressテーマである「Simplicity」を可変デザインにする方法です。

デモを見る

具体的には、サイドバーは300pxのままでその他を可変にすると言った感じです。

※wordpressのバージョンは4.1.5、Simplicityのバージョンは1.7です。 

やり方(いじらなアカンCSS)

※CSSを変更する際には必ずバックアップを取ってから行ってください

style.css

■1つ目

mainクラスタ(本文部分)のwidthを740px→calc(100% – 310px)に変更する。

#main {
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: calc(100% - 310px);
padding: 20px 29px;
border:1px solid #ddd;
background-color:#fff;
border-radius: 4px;
margin-bottom: 30px;
}

サイドバーの300pxにしてしまうと、サイドバーとくっついてしまうので10pxだけ大きく取ってます。

しかし残念ながら、この「calc」関数は、IE9より以前のバージョンに対応してません。(IE8で表示するとこんな↓感じになります)

ie

まぁでもほとんどのユーザーはIE9以降でしょう!たぶん!!(時代遅れなユーザーは知らん)

てかすごいですねcss3。四則演算まで出来てしまうとは・・・。

今のような時代なら、私のような超初心者でもレスポンシブなwordpressテーマが簡単に作れてしまいそうです\(^o^)/

■2つ目

以下のクラス部分(全体幅)のwidthを1070px→100%に変更する。

#header-in, #navi-in, #body-in, #footer-in {
width: 100%;
margin: 0 auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

これは単に100%にするだけです。

responsive-pc.css

responsive-pc.cssは、パソコンでウィンドウサイズが可変した際にレシポンシブにする為のスタイルシートです(たぶん)

デフォルトでは、ブラウザの横幅が1110pxより小さくなった場合に「全体の幅」を740pxに落とし、サイドバーを「本文部分」下に回り込ませるようにしているようです。

上記の設定では、「本文部分」の横に310px分の空白が出来てしまいますので、それを埋めます。

以下のコードを追加するだけです。

  div#main{
width:100%;
}

あと740pxまで落とされるのが気に入らないので、940pxまで引き上げます。widthを740px→940pxに。

@media screen and (max-width:1110px){
div#header-in, div#navi-in, div#body-in, div#footer-in{
width:940px;
}

以上で終わりです!

横幅を広げたいだけの場合は、以下の記事を参考にしてください。
Simplicityの本文部分の横幅を横長にする方法

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク