BizVektorで画面全体の幅を100%に広げる方法

BizVektorで画面全体の幅を100%に広げる方法を紹介します。検証したバージョンはBizVektor 1.9.13、デザインスキンはRebuildです。仕上がりイメージは次のようになります。 全体の幅を100%にしたBizVektor 加工前のBizVektorは次のようなイメージです。ヘッダー画像を含めて画面全体の幅は950pxになっています。 初期設定の幅は950px 以下、画面幅を100%に広げる方法を紹介します。 画面全体の幅を100%にするCSS 画面全体の幅を100%にするには、次のようなCSSを子テーマのstyle.cssなどに入力します。 外枠を100%、内枠を98%に設定して、少しだけ余白(左右1%、合計で2%)を入れています。全体を文字通りの100%にするとコンテンツが左右ピッタリくっついてしまい、見づらくなるためです。 すべて100%にすると見づらくなる 上記CSSの18行目の「98%」は自由に変更できます。小さくすることで左右の余白が大きくなります。また、34行目、39行目ではメインコンテンツ、サイドバーの幅を設定しています。これらも自由に設定してください。 18行目:全体の幅(98%) 34行目:メインコンテンツの幅(70%) 39行目:サイドバーの幅(25%) ヘッダー画像のサイズを大きく 全体の幅を100%にしてヘッダー画像の幅も広げた場合、初期設定の幅950px、高さ250pxというヘッダー画像は幅が広がってぼやけてしまうかもしれないので、ヘッダー画像のサイズも変更した方が良いかもしれません。それには、次のコードを子テーマのfunctions.phpなどに入力します。 この例では幅1500px、高さ300pxに変更しています。画面の幅が広がっても対応できるようになります。変更後、「外観」-「ヘッダー」メニューを見るとヘッダー画像のサイズ設定が変更されます。 ヘッダー画像のサイズ設定が変更される これで、BizVektorの画面幅を100%(98%)に広げる作業は完了です。 全体の幅を100%にしたBizVektor スライドショーを表示している場合の問題 トップページのヘッダー画像をスライドショーにしている場合、スライドショー画像の切り替えボタンが100%の外にはみ出てしまうので対処が必要です。たとえば、次のようなCSSを使います。前述のCSSに続けて入力してください。 スライドショーからはみ出た部分を非表示にするやっつけのCSSですが、これで100%幅の外に出てしまった部分に対応できます。 まとめ 以上、BizVektorで画面全体の幅を100%に広げる方法を紹介しました。ふわっと仕上げなので足りない部分があれば修正をお願いします。また、コンテンツ幅などを変えてみて、自分なりのベストな設定を模索してみてください。 ...
2017年4月18日0 DownloadsDownload