ブロック詳細
6種類のカスタムブロックの詳細な機能と設定項目を解説します。
見出しバー
セクション見出しを装飾的に表示
ボタン
リンク付きのCTAボタン
汎用ボックス
アイコン付きコンテンツコンテナ
ボーダー
装飾的な水平線
テーブル
レスポンシブ対応データテーブル
吹き出し
アバター付き会話形式ブロック
見出しバー(Heading Bar)
セクション見出しを装飾的に表示するブロックです。
| 設定 | 説明 |
|---|---|
| 見出しレベル | H1〜H6から選択 |
| 背景色・テキスト色 | カラーピッカーで自由設定 |
| ボーダー | 色・幅・角丸を設定 |
| パディング・マージン | 上下左右を個別に設定 |
| ボックスシャドウ | 影の有無を切り替え |
ボタン(Button)
リンク付きのCTAボタンブロックです。
| 設定 | 説明 |
|---|---|
| ボタンテキスト・URL | テキストとリンク先を設定 |
| 新しいタブで開く | リンクの開き方を選択 |
| サイズ | 小・中・大の3サイズ |
| 幅 | 自動・全幅・カスタム幅 |
| 背景色・テキスト色 | カラーピッカーで設定 |
| ボーダー・角丸 | 枠線のスタイルを設定 |
| ホバーアニメーション | マウスオーバー時の効果 |
プリセット機能でボタンスタイルを保存・再利用できます。
汎用ボックス(Box)
アイコン付きのコンテンツコンテナブロックです。内部に他のブロックをネスト可能です。
| アイコン | 用途 |
|---|---|
| info | 情報・お知らせ |
| warning | 注意・警告 |
| success | 成功・完了 |
| alert | 危険・エラー |
| tip | ヒント・アドバイス |
| なし | アイコンなし |
背景色、グラデーション、ボーダー(色・幅・スタイル・角丸)、パディング、マージン、影、最大幅、配置を設定できます。
プリセット機能でボックススタイルを保存・再利用できます。
ボーダー(Border)
コンテンツの区切りに使う装飾的な水平線です。
| 設定 | 説明 |
|---|---|
| 線のスタイル | 実線・破線・点線・二重線 |
| 線の色 | カラーピッカーで設定 |
| 線の太さ | ピクセル単位で設定 |
| 幅(%) | 親要素に対する割合 |
| マージン | 上下の余白を設定 |
| グラデーション | グラデーション線に対応 |
テーブル(Table)
レスポンシブ対応のデータテーブルブロックです。
| 設定 | 説明 |
|---|---|
| 行・列の追加削除 | 動的にサイズ変更 |
| ヘッダー行 | 先頭行をヘッダーとして表示 |
| ストライプ | 交互に背景色を変更 |
| ホバー効果 | マウスオーバーで行をハイライト |
| 横スクロール | モバイルでスクロール対応 |
| セル色・テキスト色 | セルごとに色を設定 |
| セル配置 | 左・中央・右揃え |
吹き出し(Speech Bubble)
アバター付きの会話形式ブロックです。Q&Aや対談記事に最適です。
アバター設定
| 設定 | 説明 |
|---|---|
| アバター画像 | メディアライブラリから選択 |
| 位置 | 左・右 |
| 形状 | 円形・角丸・正方形 |
| サイズ | ピクセル単位 |
| 話者名・肩書 | 名前とタイトルを表示 |
| プロフィールURL | アバタークリック時のリンク |
吹き出し設定
| 設定 | 説明 |
|---|---|
| バブルスタイル | 標準・角丸・思考(3種類) |
| 背景色・テキスト色 | カラーピッカーで設定 |
| ボーダー | 色・幅を設定 |
| 最大幅 | パーセントで設定 |
| しっぽ表示 | しっぽの表示/非表示 |
吹き出しブロックはプリセット機能で最も活用できます。アバター・名前・スタイルをまとめて保存・再利用できます。