ブロック詳細

6種類のカスタムブロックの詳細な機能と設定項目を解説します。

見出しバー

セクション見出しを装飾的に表示

ボタン

リンク付きのCTAボタン

汎用ボックス

アイコン付きコンテンツコンテナ

ボーダー

装飾的な水平線

テーブル

レスポンシブ対応データテーブル

吹き出し

アバター付き会話形式ブロック

見出しバー(Heading Bar)

セクション見出しを装飾的に表示するブロックです。

設定 説明
見出しレベル H1〜H6から選択
背景色・テキスト色 カラーピッカーで自由設定
ボーダー 色・幅・角丸を設定
パディング・マージン 上下左右を個別に設定
ボックスシャドウ 影の有無を切り替え

ボタン(Button)

リンク付きのCTAボタンブロックです。

設定 説明
ボタンテキスト・URL テキストとリンク先を設定
新しいタブで開く リンクの開き方を選択
サイズ 小・中・大の3サイズ
自動・全幅・カスタム幅
背景色・テキスト色 カラーピッカーで設定
ボーダー・角丸 枠線のスタイルを設定
ホバーアニメーション マウスオーバー時の効果

プリセット機能でボタンスタイルを保存・再利用できます。

汎用ボックス(Box)

アイコン付きのコンテンツコンテナブロックです。内部に他のブロックをネスト可能です。

アイコン 用途
info 情報・お知らせ
warning 注意・警告
success 成功・完了
alert 危険・エラー
tip ヒント・アドバイス
なし アイコンなし

背景色、グラデーション、ボーダー(色・幅・スタイル・角丸)、パディング、マージン、影、最大幅、配置を設定できます。

プリセット機能でボックススタイルを保存・再利用できます。

ボーダー(Border)

コンテンツの区切りに使う装飾的な水平線です。

設定 説明
線のスタイル 実線・破線・点線・二重線
線の色 カラーピッカーで設定
線の太さ ピクセル単位で設定
幅(%) 親要素に対する割合
マージン 上下の余白を設定
グラデーション グラデーション線に対応

テーブル(Table)

レスポンシブ対応のデータテーブルブロックです。

設定 説明
行・列の追加削除 動的にサイズ変更
ヘッダー行 先頭行をヘッダーとして表示
ストライプ 交互に背景色を変更
ホバー効果 マウスオーバーで行をハイライト
横スクロール モバイルでスクロール対応
セル色・テキスト色 セルごとに色を設定
セル配置 左・中央・右揃え

吹き出し(Speech Bubble)

アバター付きの会話形式ブロックです。Q&Aや対談記事に最適です。

アバター設定

設定 説明
アバター画像 メディアライブラリから選択
位置 左・右
形状 円形・角丸・正方形
サイズ ピクセル単位
話者名・肩書 名前とタイトルを表示
プロフィールURL アバタークリック時のリンク

吹き出し設定

設定 説明
バブルスタイル 標準・角丸・思考(3種類)
背景色・テキスト色 カラーピッカーで設定
ボーダー 色・幅を設定
最大幅 パーセントで設定
しっぽ表示 しっぽの表示/非表示

吹き出しブロックはプリセット機能で最も活用できます。アバター・名前・スタイルをまとめて保存・再利用できます。