リファインプロのカスタマイズ：最大限に横幅を広げる方法

こんにちは、Mioです(´ω`)

今回は、ワードプレステーマの一つ「リファインプロ」のカスタマイズのご紹介です。

リファインプロは割と使いやすいテーマですが、他のテーマと比べると横幅が狭くてやや見づらい印象です…

そこを改善して見やすくするためにも、最大限に横幅を広げる方法をご紹介します💡

操作はとっても簡単なので1分あれば終わると思いますが、style.cssをいじるので念のため事前にバックアップを取っておくことをおすすめします。

リファインプロの横幅を広げる方法

外観→テーマの編集→スタイルシート（style.css）を選択します。

1.2　レイアウトのところのwidthで1000になっているところがあると思うのですが、そこを1100に変更します👇

1.2 レイアウト 

*/

.wrapper {
    margin: 0 auto;
}

.wrapper-inner {
}

.banner-inner, 
.header-bar-inner, 
.glovalnavi-inner, 
.container-inner, 
.footer-menu-inner, 
.footer-inner {
    margin: 0 auto;
    width: 1100px;
}

.header-bar {
    width: 100%;
    min-height: 30px;
}

その後、すぐ下にある3カラムというところでwidthの部分の数字を変更していきましょう。

/* ３カラム */

.column3 #contents {
    display: inline;
    float: left;
    width: 855px;
}

.column3 #main {
    display: inline;
    float: right;
    margin-right: 20px;
    width: 600px;
}

.column3 #sub {
    display: inline;
    float: left;
    margin-bottom: 20px;
    width: 215px;
}

.column3 #ex {
    display: inline;
    float: right;
    margin-bottom: 20px;
    width: 245px;
}

最後に、変更を保存ボタンをクリックしたらOKです‼

お疲れさまでした(‘ω’)ノ

ちなみにですが、この数字よりももっと大きな値にするとサイドバーがはみ出てしまい画面から消えてしまいます💦

なので、赤字の数値かそれ以下の値で設定してみてくださいね。