2016年1月20日に、賢威7のビューティ版が公開になりました。

冒頭の画像のように、早速このビューティ版を利用して1カラムのサイトを作っていますが、デフォルトだと横幅が大きいため、1カラムの横幅を変更する方法をご紹介します。

CSSの修正

作成中のサイトは、賢威の子テーマを利用しているので、子テーマディレクトリの「base.css」に以下のような追記をしています。

「base.css」に追記した内容

.site-header-in,
.global-nav-in,
.main-image-in,
.main-image-in-text,
.main-image-in-text-cont,
.main-body-in,
.site-footer-in,
.col1 .breadcrumbs,
.main-image-in-text.wide .main-image-in-text-cont,
.col1 .section-wrap,
.col1 .float-area,
.col1 .section-wrap.wide .section-in,
.col1 .main-body .archive-title{
	max-width: 800px;
}

賢威7のデフォルトの横幅は1200ピクセルなのですが、PCで表示した際に、1カラムの場合だと横幅がちょっと大きく、文字が読みづらく感じます。

そのため、上記の場合は800ピクセルに変更した例です。

1カラムではない場合のCSS設定は異なる

前述のCSS設定は「1カラムの場合」に必要な設定です。

もし、1カラムではない=2カラムの場合は以下のCSSを追記するのみでOKです。

.site-header-in,
.global-nav-in,
.main-image-in,
.main-body-in,
.site-footer-in{
	width: 800px; /*サイトの横幅。これより小さければレスポンシブ*/
}