Simplicityの本文部分の横幅を横長にする方法【CSS弄ります】

追記:

この方法は多分もう使えません。

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

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

このサイトで使用しているテーマでもある「Simplicity」についてです。

新しく作るサイトを「Simplicity」で作ろうとした際、サイトのコンテンツ上、横長にした方が良いなと思い、↓みたいなデフォルトのデザインに変更した際のメモです。

1270pxとしたのは、各サイトをアクセス解析した所、1280pxを下回るパソコンユーザーが殆ど居なかった為です。

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

横幅を広くするのではなく”可変”にしたい場合は以下の記事を参照してください
Simplicityの横幅を可変にする方法

やり方(弄らなアカンCSS)

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

style.css

style.cssの中の以下のセレクタ郡のwidthを1070px→1270pxに。

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

style.cssの中の#main(記事部分)の横幅を740px→940pxに。

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

responsive-pc.css

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

デフォルトでは、1100px以下になると横幅を強制的に740pxにするような設定になっています。

このままだと、記事部分を940pxにしたのに、全体サイズは740pxのままという変な感じ(↓)になっちゃうので直します。

b

ちなみにこのresponsive-pc.cssは、wordpress上からは編集出来ないみたい(テーマの編集画面に表示されてなかった)ので、FTPでサーバーから直接落としてきて編集して下さい。

以下のセレクタのwidth部分を740px→940pxに。

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

いじるのが面倒くさい人へ

いじるのが面倒くさい人の為に、編集済みのCSSもうpしときます。

responsive-pc.css

style.css

※上記以外の項目がいじってませんが、不具合が起きても全て自己責任でお願いします。(simplicityのバージョンは1.7です)

ひとこと

横長にしようと思った経緯は、次に作ろうとしてるサイトが完全に「ヘビーユーザー向け」のサイトなので、ユーザビリティを大きくした方が結果的にリピーターが増えて収益が増えるんじゃないかなと思ったからです。

というかそもそも、ヘビーユーザは広告なんて見慣れてるから小細工で儲けようとしてる感がアリアリなサイトだと、すぐに愛想を尽かされてサヨナラバイバイされてしまいそうだからです\(^o^)/

スポンサーリンク

シェアする

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

フォローする

スポンサーリンク