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

こんにちは、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です‼

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

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

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

カスタマイズ完了したのに変更されてない！そんな時は？

きちんとカスタマイズしたのに変更されてないor変わったけど表示がおかしくなった（サイドバーがズレて変な空間が出来たなど）という場合は、以下の記事を参考にしてみてください👇

カスタマイズがすぐに反映されない時の原因・対処法2つ

こんにちは、Mioです。ブログやサイトを運営していると、「あ、ここ変えたいな~」とか「ここがもっとこうなれば見やすくなるだろうな」という気持ちが生まれて色々いじりたくなると思います。でも、カスタマイズ...

lifestylecoordinate.com

2018.12.02