カスタムグリッドレイアウト の作成


概要

ToolsetBootstrapテーマ には,作成するコンテンツページに 好きなグリッドを 直接挿入できる レイアウトツールが あります.簡単なものから 複雑なものまで たくさんの グリッドレイアウトが 用意されていますが,オリジナルの グリッドレイアウトを 使いたい場合は, カスタムグリッドレイアウト を 簡単なフォーマットで 作成し,アップロードすることも出来ます.

レイアウトツールボタン

 

グリッドレイアウトの管理

プリセットされたグリッド

利用できる レイアウトの一覧と,オリジナルのグリッドレイアウトを アップロードする オプションに アクセスするには,外観>テーマオプション>レイアウト(タブ)に 移動します.アップロードする グリッドレイアウトは,XMLで 作成します.

 

カスタムグリッドレイアウト の作成

基本形

手順

①ヘッダー要素を記述する

1行目には,必ず xmlの バージョン および エンコードを 指定します.

2行目以降の 全ての内容(全体)を, <GridList>タグと </GridList>タグで 囲みます.

②itemタグと-columnsパラメーターを記述する

レイアウト内容は, <item></item>タグで 囲みます.一つのxmlファイルで 複数の レイアウトを 追加することも 出来ますが,その場合は レイアウトごとに, <item></item>タグで 囲みます.(レイアウトは 流動グリッドと 固定グリッドが 生成され,グリッド挿入時に 選択します.)

流動グリッドでは,1行のカラム (列)数は 常に 12で,カラム幅は パーセンテージで 設定します.固定グリッドの カラム数は 親のカラム数に 一致する 必要があり,レイアウトツールで 適切なグリッドレイアウト候補を 表示させるための パラメーターを 指定して おきます.

例えば 単純な 2列のグリッドレイアウトの場合は,次のように パラメーターを 指定します.

このように パラメーターを 指定すると,固定グリッドで 親のカラム数が 2,4,6,8,10,12の場合に,2列のグリッドレイアウトが 挿入可能候補として レイアウトツールに 表示されるように なります.

どうやらパラメーターは レイアウトツール上の候補表示に 利用されるだけで,レイアウトの内容 そのものでは ないので 簡易な 指定でも 良さそうです.予め用意されている レイアウト候補の パラメーターを 確認すると,例えば パラメーターが 2のみの 場合でも,2,4,6,8,10,12の候補として 表示されますし,パラメーターが 3のみ の場合では,3,6,9,12の候補として 表示 されます.

レイアウトツール挿入時画面で,「次の項目用に デザインされた レイアウトのみを 表示」を チェックすると,パラメーターで 指定した レイアウトのみが 表示されます.画像では 親が 8カラムの場合で,パラメーターが1,2,4のものが 絞り込まれて 表示されています.

③行(row)とセル(cell)を記述する

この例では,1行の中に 2つのセルが あり,各セルは それぞれ 6つのグリッドに またがっている ことを 示しています.

このレイアウトを レイアウトツールで コンテンツに 挿入すると,次のような HTMLが 挿入(生成) されます.

※上記は 流動グリッドとして 挿入した 例です.この場合 <div class=row-fluid>となっていることに 注意して下さい.固定グリッドとして 挿入すると -fluid が つきません.

応用:ネスト(入れ子)グリッド

複雑なデザインでも 簡単に 作成できます.

入れ子になった グリッドを 挿入した場合,生成される HTMLは,流動グリッドと 固定グリッドで 異なります.

固定グリッドを挿入した場合の出力例

固定グリッドの場合,入れ子になった 列は,親コンテナー内の列と 同じ幅に なります.xmlで 記述したcell size=”6″に対応する,spanの値(html出力結果)に注目.

流動グリッドを挿入した場合の出力例

流動グリッド レイアウトで 入れ子になった列は,親コンテナー内の 列の数に 関係なく,合計で 12に なります.xmlで記述したcell size=”6″に対応する,spanの値(html出力結果)に注目.