BurgerEditor は、ブロックを積み上げるように組み立てていくエディターです。固定ページやブログ記事の本文を、HTML の知識がなくてもレイアウトを保ったまま編集できます。
写真とテキストを並べる、ボタンを置く、Google マップや YouTube を埋め込むといった内容を、あらかじめ用意されたブロックを選ぶだけで作成できます。
通常のエディター（CKEditor）が文章をひとつづきの流れとして編集するのに対し、BurgerEditor は ブロックという単位で本文を組み立てます 。
ブロックは上から順に積み上がり、それぞれを個別に追加・移動・削除できます。ブロックごとに余白や背景色といった見た目も設定できるため、ページ全体のレイアウトが崩れにくいのが特徴です。
BurgerEditor はプラグインとして提供されています。インストール後、システムのエディター設定が自動的に BurgerEditor へ変更されます。
エディターを切り替えたい場合は、管理画面の「システム管理」から設定を変更してください。
なお、エディターを切り替えても すでに保存済みの本文はそのまま残ります 。ただし BurgerEditor で作成した本文を通常のエディターで開くと、ブロックの構造がそのまま HTML として表示されるため、編集には注意が必要です。
本文にマウスを乗せると、ブロックの操作メニューが表示されます。
いずれかをクリックすると「要素を追加」ダイアログが開き、追加できるブロックの一覧が表示されます。使いたいブロックをクリックすると、その位置にブロックが挿入されます。
ブロックはカテゴリごとに分類されています。標準では次のブロックが利用できます。
| ブロック | 内容 |
|---|---|
| 大見出し / 中見出し | 見出しを配置します |
| 1カラムテキスト / 2カラムテキスト | 文章を配置します。2カラムは左右に分かれます |
| 画像右寄せ / 画像左寄せ（テキスト回り込み） | 画像の横にテキストが回り込みます |
| 画像右寄せ / 画像左寄せ（テキスト回り込み無し） | 画像とテキストを横並びに配置します |
| ブロック | 内容 |
|---|---|
| 画像1列〜5列 | 画像を横に並べます。元の縦横比のまま表示されます |
| トリミング画像2列〜5列 | 画像を同じ大きさに切り抜いて並べます。サイズがそろうため一覧向きです |
| 画像1列〜5列（リンク付） | 画像にリンクを設定できます |
| トリミング画像2列〜5列（リンク付） | 切り抜き表示にリンクを設定できます |
| ブロック | 内容 |
|---|---|
| 画像2列〜5列（テキスト付） | 画像の下に説明文を添えます |
| 画像2列〜5列（リンク・テキスト付） | 画像にリンクと説明文を添えます |
| ブロック | 内容 |
|---|---|
| ボタン / ボタン x2 / ボタン x3 | リンクボタンを配置します |
| ファイルダウンロード（x1 / x2 / x3） | PDF などのファイルをダウンロードさせるボタンを配置します |
| ブロック | 内容 |
|---|---|
| 2カラムテーブル | 項目名と内容の表を作成します |
| ギャラリー | 複数の画像をまとめて表示します |
| ギャラリー+テキスト（左 / 右） | ギャラリーの横に説明文を添えます |
| GoogleMaps | 地図を埋め込みます |
| YouTube | 動画を埋め込みます |
| 埋め込みタグ | script や form などのタグを直接埋め込みます |
| 区切り線 | 横線で区切ります |
「埋め込みタグ」は入力した内容がそのままページに出力されます。外部サービスから提供された正規のコード以外は貼り付けないでください。
ブロックにマウスを乗せて 編集 をクリックすると、そのブロック専用の編集ダイアログが開きます。
入力内容はブロックの種類ごとに異なります。編集が終わったら 完了 をクリックすると、内容が本文に反映されます。 キャンセル をクリックした場合、編集内容は破棄されます。
画像を扱うブロックでは、編集ダイアログから画像をアップロードしたり、アップロード済みの画像を選んだりできます。
アップロードした画像は表示サイズに合わせて自動的に縮小されるため、大きな写真をそのまま指定しても問題ありません。
一覧が多くなった場合は 絞込検索 にファイル名の一部を入力して 検索 をクリックすると絞り込めます。
画像には次の項目を設定できます。
不要になった画像は 選択画像を削除する で削除できます。 他のページで使用している画像を削除すると、そのページでも表示されなくなります 。
ファイルダウンロードのブロックでは、PDF などのファイルをアップロードしてダウンロードボタンを設置できます。
アップロードできるファイルの種類は制限されています。制限内容はサイトの設定によって異なるため、必要なファイルがアップロードできない場合はサイト管理者へご相談ください。
ブロックの操作メニューから、次の操作が行えます。
| 操作 | 内容 |
|---|---|
| ひとつ上へ移動 | ブロックを 1 つ上に移動します |
| ひとつ下へ移動 | ブロックを 1 つ下に移動します |
| ブロックを削除 | ブロックを削除します |
削除したブロックは元に戻せません。 確認のメッセージが表示されるので、内容をよく確認してから実行してください。
同じ構成のブロックを繰り返し使いたい場合は、コピー機能が便利です。
コピーした内容はブラウザのタブを閉じるまで保持されます。 別のページの編集画面に移動しても貼り付けられる ため、固定ページからブログ記事へブロックを持っていくこともできます。
なお、コピーした内容はタブを閉じると失われます。また、別のタブや別のブラウザには引き継がれません。
ブロックの操作メニューから オプション設定 をクリックすると、そのブロックの見た目を調整できます。
| 項目 | 内容 |
|---|---|
| 下余白 | ブロックの下の余白を「広い / 標準 / 狭い / 無し」から選びます |
| 背景色 | ブロックの背景色を選びます |
| 枠線 | 線のスタイル（太い / 細い / 点線）と、線を引く位置（上下左右 / 上下 / 左右 など）を選びます |
| 独自class設定 | ブロックに任意の CSS クラスを付与します |
| ID設定 | ページ内リンク用の ID を設定します |
選べる色やスタイルはテーマによって異なります。表示されない項目がある場合や、独自の選択肢を追加したい場合はサイト管理者へご相談ください。
ID設定 に入力した値は、重複を避けるため先頭に自動的に bge- が付きます。
たとえば access と入力した場合、リンク先は #bge-access になります。同じページ内の別の場所から、この ID を指定してリンクを設定してください。
2 カラムのブロックでは、オプション設定に 左右の横幅比率 のスライダーが表示されます。スライダーを動かすと、左右の幅の割合を変更できます。
SP版の横幅比率 を有効にすると、スマートフォンで表示したときの比率を別に設定できます。
ブログ記事などで下書き機能が有効になっている場合、編集画面に 本稿モード と 下書きモード の切り替えが表示されます。
| ボタン | 内容 |
|---|---|
| 本稿モード / 下書きモード | 編集する対象を切り替えます |
| 本稿を下書きにコピー | 本稿の内容を下書きに複製します |
| 下書きを本稿にコピー | 下書きの内容を本稿に反映します |
公開されるのは本稿の内容です。下書きは公開前の確認用として利用します。
BurgerEditor で作成した本文は、ブロックの構造を持った HTML として保存されています。通常のエディターに切り替えると、その構造がそのまま表示され、意図せず崩してしまう可能性があります。
エディターを切り替える場合は、事前にバックアップを取ることをおすすめします。
アップロードした画像やファイルは、標準ではサイト全体で共有されます。他の編集者がアップロードしたものも一覧に表示され、削除も可能です。削除の際は、他のページで使われていないか確認してください。