ブロックエディターの基本ブロック

ブロックエディターでは、スラッシュコマンド（/）の入力やブロックメニューから、さまざまな種類のブロックを挿入できます。ここでは、基本とレイアウトのブロックについて説明します。

基本

段落

通常のテキストを記述するためのブロックです。デフォルトのブロックタイプであり、見出しやリスト以外のテキストは段落として扱われます。Enter を押すと次の段落になり、Shift + Enter で改行が挿入されます。

<p>...</p>

見出し

見出しレベル1〜6に対応するブロックです。文書の構造化やアウトラインの作成に使用します。

リスト

順序なしリスト（箇条書き）を挿入します。

<ul><li>...</li></ul>

番号付きリスト

順序付きリストを挿入します。

<ol><li>...</li></ol>

引用

引用文を記述するためのブロックです。

<blockquote>...</blockquote>

コード

コードブロックを挿入します。等幅フォントで表示され、改行やスペースがそのまま保持されます。

<pre><code>...</code></pre>

画像

メディアから画像を挿入するブロックです。メディアライブラリと連携し、大元のメディアで画像を差し替えると同一メディアIDを持つすべての画像ブロックが自動で更新されます。

編集メニューで設定できる項目：

• 配置: 左・中央・右

• 画像サイズ: 編集画面設定 > ブロックエディター設定で登録した選択肢（例: 100%, 75%, 66%）から選択。

• キャプション・代替テキスト: アクセシビリティやSEOのためにも設定を推奨

• リンク: 画像クリック時のリンク先、別タブで開くの有無

• 拡大表示: デフォルトで有効。SmartPhoto によるライトボックス表示。

• メイン画像に設定: 編集画面にメディアのカスタムフィールド（blockEditorConfig.setMainImageMark で指定）がある場合、そのフィールドに選択中の画像をセット可能

その他：

• HTMLをコピー&ペーストしたとき、画像のURLが自サイト内の同一パスに存在するファイルを指している場合、相対パスに自動変換される

• ペーストやURLで挿入した画像（メディア未登録）は、画像を選択した状態で表示されるアップロードボタンからメディアライブラリに登録できる

<div class="media-image-block align-{left|center|right}" data-type="imageBlock" data-align="..." data-width="..." data-mid="..." data-eid="..." data-no-lightbox="false">
  <figure style="max-width: ...;">
    <a href="..."><img src="..." alt="..." loading="lazy" data-mid="..." /></a>
    <figcaption class="caption">...</figcaption>
  </figure>
</div>

ファイル

メディアからファイル（PDF、Word、Excel など）を挿入するブロックです。画像以外のファイルをダウンロードリンクとして配置できます。

表示形式：

• アイコン表示（デフォルト）: ファイル種別のアイコンとキャプションを表示

• ボタン表示: リンク風のボタンとして表示。キャプションの設定が必須

編集メニューで設定できる項目：

• 配置: 左・中央・右（デフォルト: 左）

• キャプション・代替テキスト: ボタン表示時はキャプションがリンクテキストになる

• 別タブで開く: リンクを target="_blank" で開くかどうか

• メディア選択・編集: メディアライブラリからファイルを選択・差し替え

<div class="media-file-block align-{left|center|right}" data-type="fileBlock" data-display-type="icon|button" data-icon="..." data-extension="..." data-file-size="...">
  <a href="...">
    <img src="..." alt="..." />
    <p class="caption">...</p>
  </a>
</div>

※ 別タブで開くが有効な場合は target="_blank" と rel="noopener noreferrer" が付与されます。

リンクボタン

ボタン風のリンクを挿入するブロックです。ブロック内でテキストを直接編集でき、そのテキストがボタンのラベルになります。CTA（Call to Action）やダウンロードリンクなどに適しています。

編集メニューで設定できる項目：

• 配置: 左・中央・右（デフォルト: 中央）

• リンクURL: クリック時の遷移先

• 別タブで開く: target="_blank" の有無

操作：

• ブロックを選択してテキストを入力すると、ボタンに表示される文言を編集できる

• Enter で次のブロックへ、Backspace で空の場合はブロック削除

<div class="link-button-block align-{left|center|right}" data-type="linkButton" data-align="...">
  <a href="..." class="link-button-block-link" data-type="button">ボタンのテキスト</a>
</div>

テーブル

表を挿入するブロックです。デフォルトで3行×3列のテーブルが作成されます。行・列の追加・削除、セルの結合、ヘッダー行の設定、横スクロール表示の設定が可能です。

<div class="tableWrapper"><table>...</table></div>

区切り線

文章の途中に区切り線を挿入するブロックです。セクションの区切りなどに使用します。

<div data-type="horizontalRule"><hr></div>

レイアウト

2カラムに分割

コンテンツを2カラムのレイアウトに分割します。各カラム内で通常通りブロックの追加・編集が可能です。

<div data-type="columns" data-layout="two-column">
  <div data-type="column">...</div>
  <div data-type="column">...</div>
</div>

3カラムに分割

コンテンツを3カラムのレイアウトに分割します。

<div data-type="columns" data-layout="three-column">
  <div data-type="column">...</div>
  <div data-type="column">...</div>
  <div data-type="column">...</div>
</div>