OrigamiUIのグループブロックはレイアウトを柔軟に作成できるブロックです。例えば以下のようなことができます。

• Flexboxに変更して内側のコンテンツを横並びや縦並びにする
• 配置を設定してサムネイル画像の左上にラベルを設置する
• サイズと配置を組み合わせて画面の半分だけ背景画像を入れる
• アイコン付きのボタンを作成する
• サムネイルだけ、もしくはカラム全体をリンクに変更する

他のブロックではある程度用途が固定されていますが、グループブロックを使うことで自由にレイアウトを作ることができます。

グループブロックの設置方法

グループブロックは以下の手順で設置することができます。

1. 編集画面の右上にある「+」アイコンのついたボタンを押す
2. ブロック一覧から、「グループ」をクリック
3. 設置したグループブロックの「+」ボタンを押す
4. グループブロック内に設置するブロックを選択

詳しいブロックの設置方法についてはこちらのドキュメントをご覧ください。

ブロックの配置方法

グループブロックの設定パネル

グループブロックの設定パネルでは以下の設定ができます。

• レイアウト設定: Flexboxとギャップの設定
• スペース設定: パディングとマージンの設定
• サイズ設定: 幅と高さの設定
• 配置設定: 配置(ポジション)と位置の設定
• リンク設定: リンクの設定
• 表示設定: OverfloやOpacityの設定
• カスタムCSS: CSSコードの入力
• 高度な設定: idと追加classの設定

レイアウト設定

レイアウト設定ではFlexboxとギャップの設定ができます。

具体的な設定内容は以下のとおりです。

• ブレークポイント選択: 設定を行うブレークポイントを選択
• 表示設定: displayのプロパティを選択
• 方向: Flexの方向を選択
• 整列: AlignItemsのプロパティを選択
• 均等配列: JustifyContentのプロパティを選択
• 整列(Self): AlignSelfのプロパティを選択
• Grow: FlexGrowのプロパティを選択
• Shrink: FlexShrinkのプロパティを選択
• ギャップ変数: ギャップ設定で使用する変数を選択
• ギャップリセット: ギャップの設定内容を全てリセット
• Row: 縦方向のギャップを選択
• Column: 横方向のギャップを選択

ギャップはギャップ変数で入力した数値に1~10の値をかけたものになります。

例) ギャップ変数=10px、Row=10px~100pxの間で選択

変数以外はブレークポイントごとに設定を変更可能です。

メディアクエリの`min-width`で設定されるため、スマホで設定した内容は他のブレークポイントで変更しない限り全てのブレークポイントで適用されます。

例) スマホで方向を縦に設定 -> スマホ、タブレット、PCの全てで縦並び

例) スマホで方向を縦に、PCで方向を横に設定 -> スマホとタブレットで縦並び、PCで横並び

スペース設定

スペース設定ではパディングとマージンの設定ができます。

具体的な設定内容は以下のとおりです。

• スペース変数: スペース設定で使用する変数の値を入力
• スペースリセット: スペースの設定を全てリセット
• ブレークポイント選択: 設定を行うブレークポイントを選択
• マージン設定: 上下左右のマージンを選択
• パディング設定: 上下左右のパディングを選択

パディングとマージンはスペース変数で入力した数値に0~10の値をかけたものから選択できます。

例) スペース変数=10px、マージントップ=10px~100pxの間で選択

変数以外はブレークポイントごとに設定を変更可能です。

メディアクエリの`min-width`で設定されるため、スマホで設定した内容は他のブレークポイントで変更しない限り全てのブレークポイントで適用されます。

例) スマホでトップを50pxに設定 -> スマホ、タブレット、PCの全てで50px

例) スマホでトップを50pxに設定、PCでトップを100pxに設定 -> スマホとタブレットで50px、PCで100px

サイズ設定

サイズ設定では幅(width)と高さ(height)の設定ができます。

具体的な設定内容は以下のとおりです。

• サイズ変数: サイズ設定で使用する変数の値を入力
• サイズリセット: サイズの設定を全てリセット
• ブレークポイント選択: 設定したいブレークポイントを選択
• 幅の設定: 幅(width)を選択
• 高さの設定: 高さ(height)を選択

幅と高さはサイズ変数で入力した数値に1~10の値をかけたものとautoから選択できます。

例) サイズ変数=10px、幅=10px~100pxの間で選択

変数以外はブレークポイントごとに設定を変更可能です。

メディアクエリの`min-width`で設定されるため、スマホで設定した内容は他のブレークポイントで変更しない限り全てのブレークポイントで適用されます。

例) スマホで幅を300pxに設定 -> スマホ、タブレット、PCの全てで300px

例) スマホで幅を300pxに設定、PCでトップを500pxに設定 -> スマホとタブレットで300px、PCで500px

配置設定

配置設定では、ポジションと位置の設定ができます。

具体的な設定内容は以下のとおりです。

• ブレークポイント選択: 設定したいブレークポイントを選択
• 配置: positionプロパティの値を選択
• 配置の設定: 表示する位置を選択
• 位置調整: ONにすることで縦方向、横方向に半分出す

配置はブレークポイントごとに設定を変更可能です。

メディアクエリの`min-width`で設定されるため、スマホで設定した内容は他のブレークポイントで変更しない限り全てのブレークポイントで適用されます。

例) スマホで配置をabsoluteに設定 -> スマホ、タブレット、PCの全てでabsolute適用

例) スマホで配置をabsoluteに設定、PCでstaticに設定 -> スマホとタブレットでabsolute、PCでstatic適用

リンク設定

リンク設定では、グループをリンクとして使用する場合の設定を行うことができます。

具体的な設定内容は以下のとおりです。

• リンクを有効にする: ONにするとグループのHTMLタグがdivからaに変わる
• URL / mailto: / tel: href属性の内容を入力
• REL: rel属性の内容を入力

`URL / mailto: / tel:`はhref属性の内容を入力してください。

例) https://example.com

例) mailto:example@example.com

例) tel:06-1234-5678

表示設定

表示設定ではブロックの表示にかかわる設定ができます。

具体的な設定内容は以下のとおりです。

• Overflow: overflowの値を選択
• Opacity: opacityの値を選択
• z-index: z-indexの値を選択
• HTMLタグ: HTMLタグを選択

HTMLタグはリンク設定で「リンクを有効にする」をONにしていると自動的に`a`が選択されます。

その状態で`div`など`a`以外のHTMLタグを選択するとリンク設定の「リンクを有効にする」がOFFになります。

カスタムCSS

カスタムCSSではCSSコードを入力することができます。

セレクタは`selector`を使用することで現在選択中のブロックに対してスタイルをつけることができます。

selector {
  color: red;
}
selector:hover {
  color: blue;
}

CSSコードは`head`要素内に出力されます。

`selector`はスタイルとして`head`に出力される際にクラス名に変更されます。

高度な設定

高度な設定では、HTMLタグのidとclass名を設定できます。

具体的な設定内容は以下のとおりです。

• HTML アンカー: id名を入力
• 追加 CSS クラス: クラス名を入力

オフキャンバスブロックではHTMLアンカーに入力したidを識別するため、必ず入力が必要です。

クラス名はカスタムCSS用に自動的に作成されたものが表示されています。

クラス名を追加する場合、このクラス名は削除せず、半角スペースを空けて追加してください。

例) my-class oui_cm-group-xxxxxxxxxx