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

こんにちは、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の部分の数字を変更していきましょう。

/* 3カラム */

.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つ
カスタマイズがすぐに反映されない原因と対処法についてご紹介します。
バイマ個別コンサルはこちら

BUYMA バイマ コンサルティング

シェアする

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

フォローする