ホーム > サポート・マニュアル > マニュアル > カスタマイズの方法 > ユニットグループ機能を使ってレイアウトする

マニュアル

このマニュアルは、a-blog cms 1.4.0をもとに説明しています。ご利用のバージョンによって、画面表示や内容が若干異なる場合があります。ご了承ください。

ここでは、ユニットグループ機能を使った入力について説明します。

ユニットグループとは?

ユニットグループ機能を利用することで、複数のユニットをDIVで囲むことができるようになります。そのグループにはラベル(選択時の名前)とクラス(CSS)を自由に追加する事が可能です。

ユニットグループを使った段組の例

ユニットグループを使った段組の例

ユニットグループ機能を使用するための設定

ユニットグループ機能を有効にする

ユニットグループ機能を使用するためには、まず管理ページの編集設定からユニットグループ機能を有効にする必要があります。(「エントリーの編集設定」を参考にしてください)

ユニットグループを作成する

ユニットグループは複数のユニットを囲むDIV要素を付与する機能です。このため、ユニットグループとして囲むDIVに適用されるclassと、選択肢として使用するラベルを設定する必要があります。(「エントリーの編集設定」を参考にしてください)

スタイルを作成する

ユニットグループに設定したclass名に相当するスタイルは、別途設定を行う必要があります。

以下、標準のテーマ「company3」に設定されている内容を元に説明していきます。

company3での設定

company3での設定

スタイル(layout.css内)

/* 1カラム用 */
div.column1 {
    clear: both;
    width: 100%;
}

/* 2カラム用 */
div.column2 {
    float: left;
    margin-right: 10px;
    width: 265px;
}

ユニットグループの適用方法

複数のユニットをユニットグループでまとめる

複数のユニットをまとめるためには、どのユニットからどのユニットまでをまとめるのかを決める必要があります。そのために、ユニットのヘッダー部分にある[グループ]を使用します。

[グループ]から選択

[グループ]から選択


仮に「2カラム」のグループでまとめる場合、まとめたい最初のユニットのグループを「2カラム」にします。

「2カラム」でまとめたい最後のユニットまでは、ユニットのグループを「---」に設定します。これで複数のユニットが「2カラム(column2)」というグループ(DIV要素)でまとめられました。

再度ユニットグループの設定をする場合には、ユニットにグループの設定を行います。例として再度「2カラム」のユニットグループを開始します。このユニットグループは、1エントリ内に何回でも作成できます。

ユニットグループ機能を使用した具体的な例

上記のように、複数のユニットをグループ化することでどのようなレイアウトが実現できるか見てみましょう。

エントリー入力画面

エントリー入力画面

左の図は、エントリー入力画面です。

この例では「2カラム」のユニットグループと「1カラム」のユニットグループをしています。「2カラム」として囲むDIV要素にはCSSで2段組みの設定がされています。「1カラム」として囲むDIV要素にはCSSで1段組み(全幅を使う)の設定がされています。

1つ目のユニットで「2カラム」を開始、2つ目のユニットには指定がないため「2カラム」が継続されます。(赤色で着色した部分です)

3つ目のユニットでは2回目の「2カラム」が指定され、2つ目のグループが始まります。4つ目のユニットには指定がないため「2カラム」が継続されます。(青色で着色した部分です)

5つ目のユニットで「1カラム」を開始しています。3つ目のグループが始まります。6つ目と7つ目のユニットには指定がないため「1カラム」が継続されます。(黄色で着色した部分です)

このように、複数のユニットをまとめる(ユニットグループ化する)ことで、段組みなどのレイアウトや、複数のユニットにまたがる枠線の表示が実現できます。

実際の表示

実際の表示



携帯アクセス解析