先月に、BizVektorのサイドバー幅変更にてブログを書いた。

その内容について、追加情報を記載する

なぜなら、補足情報に基づき子テーマにてそのまま記入すると、モバイル機器等での表示において画面サイズより大きく表示されてしまう部分がある。※HPが表示されない等重大な問題ではない

BizVektorはレシポンシブルデザインに対応しているため、CSSに３パターンが定義されている

  • コンテンツ推奨サイズより大きい場合　→　@media (min-width: 660px) {}
  • pc iPad3より大きい場合　→　@media (min-width: 770px) {}
  • フルサイズ　→　@media (min-width: 970px) {}

このパターンを理解して、どのパターンにおける表示調整をしたいのかを踏まえて、子テーマに記載する必要があり、一般的にはフルサイズ時においてだと想定すると下記例のようになる。

これにて、フルサイズ画面におけるレイアウト調整をしているだけであり、その他のパターンにおける、モバイル等の表示には影響を与えない。

(例１)
@media (min-width: 970px) {
#main #container #content { float:left; width:630px; }
#main #container #sideTower { float:right; width:300px;clear:none; }
}

Follow me!

投稿タグ