WordPress上でTwitter Bootstrapを用いて 色鮮やかなボタンを手軽に実現 したり、これまた お手軽なグリッドシステムを用いたレイアウト及びレスポンシブWebデザインを実現 したりしましたが、勿論Bootstrapの実力はこんなものではありません。 今回はホームページの作成者が先ず気に掛けるであろう全体のレイアウトについて、 レスポンシブWebデザインを実現した上のセンター合わせを Twitter Bootstrapを利用してWordPress上に実現してみます。
因みに2013年8月16日付けでTwitter Bootstrapのバージョンが3の RC（リリース候補）2にアップしていましたので、今回は以下2ファイルを 最新バージョンに差替え、大凡今迄の実装に問題の出なかったのを見ての作業となります。
- bootstrap.min.css
- bootstrap.min.js
Twitter Bootstrapのcontainerクラス
j時代に依って閲覧端末の性能も変わればホームページのレイアウトも其れに連れて変化するもの、 現在ではホームページは大概…
一定の固定幅を保った上で、 ブラウザの幅が変えられようとも真ん中に表示されるように位置合わせされることが多くなっています。
勿論CSSフレームワークたるTwitter Bootstrapでも此れに対応しており、 Bootstrap公式サイト を見ればCSSページのオーバービューと言う最も基本的機能の最後 CSS#container の項に其れは記され container クラスで実現されるのが分かります。 以下に其の記述例を記します。
...
</div>
この様にcontainerクラスを付与した表示ボックスは 下表のルールに従いレスポンシブに固定の表示幅を変えながらセンター位置を保たれるのです。
| Extra small devices Phones (<768px) | Small devices Tablets (>768px) | Medium devices Desktops (>992px) | Large devices Desktops (>1200px) | |
|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||
| Max container width | None (auto) | 720px | 940px | 1140px |
Twenty Thirteenに於けるcontainerクラスの記述場所
従ってcontainerクラスを記述すれば後はTwitter Bootstrapが宜しなに計らってくれる訳ですが、 では何処に記述すれば良いでしょうか。
本ブログの2013年8月14日の記事 新テーマTwentyThirteenを有効化してTwitterBootstrapのグリッドシステムを使う で紹介したグリッドシステムはホームページのレイアウトに関する機能ですから 当然ながら横幅の表示についても扱う処であり、 列表示となるcol-**-** クラスをn列あれば其々に記述して其れ等を 大枠のrowクラスで囲みましたから、 rowクラスと同じ位置にcontainerクラスを記述すれば良いような気がしてきます。
処が此処でrowと同じ部分にcontaingerクラス指定をするとクラス同士が干渉し合い 奇妙な表示がされてしまい、どうも塩梅が良くありません。 其処で今回は取敢えずヘッダーからフッターまでサイト全体をセンター合わせすることにしました。 従ってヘッダー、フッターを100％幅に、コンテンツ部分を固定幅に、と言う最近良くある手法については 新たにdivタグなど、ブロックを書き加えるような処置を別途考慮する必要があるでしょう。
上記の如く方針が決まればcontainerクラスは既存のブロックに追記すれば良くなります。 手元の環境に於いてはheader.phpファイルに以下、赤字の如くcontainerクラスを追記しました。
此の処理を以て手元の環境である サウンド追っ掛け情報 に於いては下の図の如く表示がブラウザ幅いっぱいであった薄く表示している部分のものが 固定幅へと変じ、中央へ寄せられる恰好が出来しました。
ブラウザ幅が992px以下の時発生する問題
因みのこの時はウィンドウサイズは以下のJavaScriptで調べて1263pxでした。
ウィジェット位置のずれる原因
Twitter Bootstrapのcontainerクラスの導入で固定幅のレスポンシブWebデザインを実現した際に ホームページの横幅が940pxとなる状況でフッターのウィジェット位置がずれてしまう、 この問題もTwitter BootstrapとWordPressの新テーマTwenty Thirteenの干渉に因って惹起されています。 今回はTwenty Thirteenテーマを改訂して対処してみたいと思います。
此のフッター内のウィジェットを括る枠は #secondary .widget-area クラスで指定され、其々のウィジェットの位置は jquery.masonry.min.js で計算されており、其の全体の最終的な位置決めをスタイルシートに於いて .sidebar .site-footer .widget-area クラスで指定して実施おり其の具体的値は以下となっています。
max-width: 724px;
position: relative;
left: -158px;
}
ウィジェット位置を補正するためのJavaScript
以上から .sidebar .site-footer .widget-area のスタイルシート値をcontainerクラスを与えられている幅が940pxの際に此れ等の値は適正なものに変えてやれば良いという寸法になりますが、 この実行を本ブログ2013年8月16日の記事 TwitterBootstrapがキャンセルするTwentyThirteenのサイドバーとフッターの重なりを復元する でも取り扱った functions.js に盛り込み、ズレを補正することにしました。
改訂したJavaScript部分は以下になります。
if ( $('.container').width() == 940 )
$( '.sidebar .site-footer .widget-area' ).css( {
'left': '-180px',
'width': '540px'
} );
var columnWidth = body.is( '.sidebar' ) ? 228 : 245;
$( '#secondary .widget-area' ).masonry( {
itemSelector: '.widget',
columnWidth: columnWidth,
gutterWidth: 20,
isRTL: body.is( '.rtl' )
} );
}
上の ブラウザ幅が992px以下の時発生する問題 項目の図をビフォー画面とすれば以下図がズレを此のJavaScriptで補正したアフター画面となります。 どうやら想定通りに表示をしてくれました。
本ブログ記事の内容を応用すれば 本ブログ2013年8月16日の記事 でTwitter BootstrapがキャンセルしてしまうTwentyThirteenのサイドバーとフッターの重なりを復元せずとも フッター内のウィジェット位置を常にセンター合わせにして レイアウトの調整をする方法も実現出来るものでしょう。