各ブロックの操作・設定・修飾は、主にブロックツールバー、右サイドバーの設定、右サイドバーのスタイルで行います。それぞれの設定項目の概要を表に纏めました。
| ブロック名 | ブロックツールバー | 右サイドバー：設定（歯車） | 右サイドバー：スタイル（半円） | 記事・補足 |
| 段落（文章の入力） | ・文字の配置（左 / 中央 / 右） ・太字、イタリック、リンク挿入 ・インライン要素（マーカー、文字色など） ・ブロックタイプの変更（見出し等へ） | ・Cocoon設定（文字色・背景色 ・サイズの一括選択） ・ドロップキャップ（最初の1文字を大きく） ・高度な設定（HTMLアンカー、追加CSSクラス） | ・タイポグラフィ（フォントサイズ、行の高さ、文字間隔） ・色（テキスト、背景、リンク） ・外枠（ボーダー、パディング、マージン） | |
| 見出し（目次や構造） | ・見出しレベルの変更（H1 〜 H6） ・文字の配置（左 / 中央 / 右） ・太字、リンク挿入、インライン要素（バッジ等） | ・Cocoon設定（見出しスタイルの個別変更） ・高度な設定（HTMLアンカー：目次の飛び先として重要、追加CSSクラス） | ・タイポグラフィ（サイズ、太さ、行の高さ） ・色（テキスト、背景、リンク） ・外枠（マージン、パディング、ボーダー） | |
| リスト（箇条書き） | ・リスト形式（箇条書き • / 番号付き 1.） ・インデント（階層を下げる / 上げる） ・太字、イタリック、リンク挿入 | ・番号付きリスト専用（開始番号、逆順の設定） ・高度な設定（HTMLアンカー、追加CSSクラス） | ・タイポグラフィ（リスト全体の文字サイズ等） ・色（テキスト色、背景色） ・外枠（全体のパディング、マージン） | |
| カラム（横並び分割） | ・全体選択時：垂直配置（上/中央/下）、幅の変更 ・各列選択時：個別の垂直配置、中に配置するブロックの追加 | ・全体選択時：列数（1〜6列）、モバイルで縦に並べるかの設定 ・各列選択時：個別のカラム幅（％指定） ・高度な設定 | ・色（テキスト、背景 ※全体または各列ごと） ・外枠・サイズ（カラム同士の間隔、パディング、マージン、境界線） | |
| 画像(Image) | ・置換（画像の変更）・配置（左寄せ/中央/右寄せ/幅広/全幅）・リンクの挿入（メディアファイル/添付ファイルのページ）・切り抜き（トリミング、アスペクト比変更、ズーム）・テキストのオーバーレイ（カバーへの変換） | ・画像設定（代替テキスト（Alt属性）の入力、画像サイズの選択「サムネイル/中/大/フルサイズ」）・高度な設定（HTMLアンカー、追加CSSクラス） | ・スタイルスタイル（デフォルト / 角丸）・外枠・サイズ（画像の幅・高さ（％やpx指定）、ボーダーの太さ・色、角の丸みの微調整）・横縦比（画像の縦横比の固定） | 画像とカバーの違い 「画像ブロック」は写真そのものを配置するためのもので、上に文字を重ねることは基本的にできません。「カバーブロック」は背景として画像や動画を敷き、その上に段落や見出し、ボタンなどのブロックを重ねて配置するためのコンテナ（箱）です。 |
| カバー(Cover / 背景画像) | ・配置（幅広/全幅：ファーストビューでよく使用） ・メディア置換（背景画像や動画の変更） ・コンテンツの配置（中央配置、上揃え、下揃えなど） ・全高（画面いっぱいに広げる） | ・メディア設定（背景の固定（パララックス効果）、背景画像の表示位置（フォーカルポイント）の調整） ・オーバーレイ設定（画像の上に重ねる色と、その透明度（不透明度）の調整） ・高度な設定 | ・タイポグラフィ（カバー内全体の文字サイズなど） ・色（カバー内全体の文字色） ・サイズ ・外枠（カバー自体の最小高さ（最小高）、パディング、マージン） | |
| テーブル(Table / 標準) | ・表の編集（行・列の挿入/削除） ・配置（幅広/全幅など） ・セル内の文字配置（左/中央/右寄せ） ・太字、リンク挿入などの文字装飾 | ・テーブル設定（セルの幅を固定にするかどうかの切り替え） ・表のセクション（ヘッダー領域、フッター領域の有効化） ・高度な設定 | ・スタイル（標準 / ストライプ（行ごとに背景色が変わる）） ・色（テキスト、背景の色） ・外枠 ・サイズ（全体のパディング、マージン、境界線の太さや色） | テーブルとFlexible Table Blockの違い 標準の「テーブルブロック」はシンプルな表作成に向いていますが、スマホで見たときに崩れやすいデメリットがあります。「Flexible Table Block（外部プラグイン）」を使うと、「セルの結合」や「スマホ表示時の横スクロール対応」など、実用的なホームページ制作に必要な高度な表がノーコードで作れるようになります。 |
| プラグイン： Flexible Table Block(高度なテーブル) | ・セルの結合 / 分割 ・行、列の挿入/削除/複製 ・配置（幅広/全幅） ・セルごとの配置や文字装飾 | ・テーブル全体の構造設定（レスポンシブ対応：スマホでのスクロールや縦並び化の設定） ・CSVインポート/エクスポート ・高度な設定 | ・セルのデザイン詳細（セルのパディング、背景色、文字色） ・ボーダー設定（外枠や内線の太さ、種類（実線/破線）、色の個別指定） | |
| プラグイン： PDF Embedder(PDF埋め込み) | ・配置（左寄せ/中央/右寄せ/幅広/全幅） ・ブロックタイプの変更（通常のファイルブロック等へ） | ・PDFの表示設定（幅と高さの指定（pxまたは%）） ・ツールバーの設定（PDF上部のツールバーを表示するか、ダウンロードボタンを表示/非表示にするか、拡大縮小ボタンの制御） | ・（プラグイン依存のため、一般的にはスタイルタブでの変更項目は少なく、外枠のマージンやパディングなどの簡易的なレイアウト調整が中心となります） | |
| グループ(Group / 枠) | ・レイアウト構造の変更（グループ / 行 / スタック） ・配置（幅広/全幅：コンテナ全体の広がりを設定） ・垂直/水平方向の配置（中に入れる要素の並び） | ・レイアウト設定（内部のコンテンツ幅を制限するか、インナーブロック（中身）に継承させるか） ・高度な設定 | ・色（グループ全体のテキスト、背景、リンクの色 ※全体の雰囲気を一発で変えられます） ・外枠 ・サイズ（パディング、マージン、ブロックの間隔、ボーダーの太さや色 角の丸み、シャドウ（影）） | デザインの鍵を握る「グループ」 複数の段落や画像を「グループ」でひとまとめに囲むことで、「そのエリアだけ背景色をグレーにして、太い枠線で囲む」といった「ボックス（囲み枠）」のデザインを右サイドバーの「スタイル」から簡単に作ることができます。 |
コメント