ページビルダーの使い方（本文編集の共通ガイド）¶
会社案内 / 事業案内 / 実績紹介 / お知らせ などの記事本文は、WordPress 標準のエディタではなく 「ページビルダー」 という独自のメタボックスで編集します。記事を新規追加・編集するときに、本文エリアの代わりに 「ページビルダー」 という大きなボックスが表示されているのがそれです。
このページでは、ページビルダーの基本操作（行の追加・ウィジェットの追加・編集・並べ替え・削除）を一括で説明します。会社案内・事業案内・実績紹介・お知らせのいずれの記事でも操作はまったく同じ なので、各ページのマニュアル（会社概要 / 代表挨拶 など）からはこのページに戻ってきて操作を確認してください。
ページビルダーの考え方¶
ページビルダーでは、記事本文を 3つの階層 で組み立てます。
- ブロック: 横一列のかたまり。1ブロックは「1カラム」「2カラム」「3カラム」など、横方向にいくつのカラムに分けるかを選べます
- カラム: ブロックの中の縦に区切られた領域。例えば 3カラムブロックなら、左 / 中 / 右の 3つのカラムができます
- コンテンツ（ウィジェット）: 各カラムの中に入れる中身（見出し・文章・画像・テーブル・地図など）
つまり「ブロック → カラム → コンテンツ」の入れ子構造です。シンプルな記事なら、ブロックを 1カラム1個ずつ縦に並べていけば充分です。
ブロック・カラム・コンテンツの呼び方: 管理画面では「ブロック」と「コンテンツ」という言葉が使われていますが、コンテンツは「ウィジェット」「モジュール」と呼ばれることもあります。本マニュアルでは管理画面の表記に合わせて 「ブロック」「コンテンツ」 で統一します。
ページビルダーの全体像¶
会社案内・事業案内などの記事を編集すると、本文エリアに 「ページビルダー」 という大きなボックスがあります。ボックスの一番上には、操作の起点になる 3つのボタン が並んでいます。
① 通常のエディタに戻る — ページビルダーをやめて、WordPress 標準のエディタに切り替えます（通常は押しません。詳細は本ページ末尾） ② コンテンツを追加する — 既存のブロック内に、新しいコンテンツ（見出し・文章・画像など）を追加します ③ ブロックを追加する — 新しいブロック（横一列のかたまり）を追加します
最初に押すのは③: 何も入っていない新規記事の場合、まず ③「ブロックを追加する」でブロックを作ってから、② で中身のコンテンツを追加する流れになります。②を先に押すと「先にブロックを追加してください」というメッセージが出ます。
そのボタンの下に、すでにあるブロックが上から順に並んでいます。1つのブロックは下記のような見た目です。
① ブロック全体（赤枠の一番外側） ② カラム（ブロックの中の区切られた領域、ここでは100%幅の1カラム） ③ コンテンツ（カラムの中に入っている1つ1つの中身）
ブロックにマウスを乗せると、左上にブロック操作のツールバーが現れます。
① ブロックを編集する — ブロックのカラム構成（1カラム / 2カラム / 3カラム など）を変更します ② ブロックを複製する — このブロックをそっくり複製します ③ ブロックを削除する — このブロックと中身のコンテンツをまとめて削除します（確認ダイアログが出ます） ④ 並べ替えハンドル（左右矢印アイコン）— ドラッグして、このブロックを上下に移動させます
編集対象1: 新しいブロックを追加する¶
新しいブロック（横一列のかたまり）を追加して、その中にコンテンツを入れていきます。
操作手順¶
- ページビルダーの一番上にある 「ブロックを追加する」 ボタンを押します
- 下のような選択画面が出ます
- ブロックの カラム構成 を選びます（1カラム / 2カラム / 3カラム / 4カラム / 自由幅の組み合わせ など）
- 必要な設定（背景色・余白・枠線など）があれば右側のサイドバーで設定します
- 右下の 「追加」 ボタンを押すと、新しいブロックがページビルダーの一番下に追加されます
注意点・コツ¶
- シンプルな記事は1カラムでOK: 見出し → 文章 → 画像 → 文章 ... と縦に並べるだけなら、すべて 1カラムのブロックで充分です
- 2カラム以上は横並びレイアウト用: 例えば「左に文章、右に画像」のような横並び表示にしたいときに 2カラムを使います
- 追加したばかりのブロックは 中身が空 です。次の手順で中身（コンテンツ）を追加します
編集対象2: ブロックの中にコンテンツを追加する¶
ブロックに見出し・文章・画像などの コンテンツ を入れます。
操作手順¶
- ページビルダーの一番上にある 「コンテンツを追加する」 ボタンを押します（先にブロックを1つ以上作っておく必要があります）
- 下のようなコンテンツ選択画面が出ます
- 追加したいコンテンツの種類を選びます（下記の コンテンツの種類 参照）
- 詳細な編集画面（モーダル）が開くので、中身を入力します
- 右下の 「完了」 ボタンを押すと、最後にマウスを置いていたブロック/カラムにコンテンツが追加されます
コンテンツの種類（9種）¶
| 種類 | こんなときに使う |
|---|---|
| 見出し | 区切りとなる大きめのタイトル文字（例: 「本社」「支社」）。h2 や h3 相当 |
| 文章 | 本文段落・住所・連絡先などのリッチテキスト。WordPress 標準と同じツールバーで太字・色・リンクを設定できます。HTML のショートコードや iframe を貼ることもできます |
| 画像 | 画像を 1枚だけ単独で表示します（写真・図など） |
| キャッチフレーズ | 大型のキャッチコピー（タイトル＋サブタイトル組み合わせ） |
| シンプルテーブル | 2列のテーブル。「ラベル列 + 内容列」のリスト形式（例: 会社情報の「商号 / 株式会社Blooming」など） |
| 3列シンプルテーブル | 3列のテーブル |
| Googleマップ | 地図の埋め込み（緯度・経度から自動でマップを表示） |
| スライダー | 複数枚の画像をスライド切替で表示 |
| タブ | タブ切替UI（複数の内容を1か所にまとめて表示） |
「文章」コンテンツは万能: 文章コンテンツは内部的には WordPress 標準のリッチエディタを使っているので、画像挿入・HTML 編集・ショートコードの貼り付けなどなんでもできます。実際、現状の会社概要では、地図の iframe や お問い合わせフォームのショートコード も「文章」コンテンツの中に書き込まれています。
編集対象3: 既存のコンテンツを編集する¶
すでに入っているコンテンツの中身を編集します。
操作手順¶
- 編集したいコンテンツの 上部の見出しバー（「文章」「見出し」「シンプルテーブル」などの種類名が書かれた部分）を クリック します
- 下のような編集画面（モーダル）が開きます（コンテンツの種類によって中身は異なります）
- 内容を編集します
- 右下の 「完了」 ボタンを押すと、変更内容がブロックに反映されます
注意点¶
- 「完了」を押さずに右上の × やオーバーレイで閉じると、変更内容は破棄されます — 必ず「完了」で閉じてください
- 「完了」を押しただけでは記事はまだ保存されていません — ページビルダーの操作は、最後に画面右上の「更新」ボタンを押すまでは本番に反映されません
編集対象4: ブロック・コンテンツを並べ替える¶
縦の順番を入れ替えたいときは、ドラッグで移動できます。
ブロックを並べ替える¶
- 並べ替えたいブロックの左上にマウスを乗せて、ブロックツールバーの 左右矢印アイコン（並べ替えハンドル）を見つけます
- その左右矢印アイコンを 上下にドラッグ して、目的の位置で離します
コンテンツ（ウィジェット）を並べ替える¶
- 並べ替えたいコンテンツの 上部の見出しバー（種類名が書かれた帯）を ドラッグ します
- 同じカラム内、または別のカラムの目的の位置で離します
注意点¶
- ドラッグ後は 画面右上の「更新」ボタン を押すまで保存されません
- カラム間のドラッグ（例: 1カラム100% から 2カラムの右半分へ）も可能です
編集対象5: ブロック・コンテンツを削除する¶
ブロックを削除する¶
- ブロックツールバーの 「ブロックを削除する」（ゴミ箱アイコン）をクリック
- 「このブロックを削除しますか？コンテンツが含まれる場合はコンテンツも削除されます。」という確認ダイアログが出るので、OK で確定
- ブロック内のコンテンツも一緒に消えます
コンテンツ（ウィジェット）を削除する¶
- 削除したいコンテンツの上部の 「項目削除」 リンク をクリック
- 「このコンテンツを削除してもよろしいでしょうか？」と確認が出るので、OK で確定
注意点¶
- 削除直後は管理画面上は消えていますが、「更新」ボタンを押すまでは本番には反映されていません。誤って削除したときは「更新」ボタンを押さずにブラウザの戻るボタンで戻れば取り消せます
- ただし「更新」を押した後の削除は元に戻せません。重要な内容を削除する前に、念のため記事の内容を別途控えておくと安全です
編集対象6: 「通常のエディタに戻る」について¶
ページビルダーをやめて、WordPress 標準のエディタに切り替えるボタンです。
押してはいけない場面¶
- 既存記事を編集中に押すと、ページビルダーで作った内容が表示されなくなります — 中身そのものは消えませんが、見えないので困ります。間違って押した場合は、「更新」を押さずにページを再読み込みすれば元に戻ります
- 通常の運営作業では このボタンは押す必要がありません
押してもよい場面¶
- 新規記事で「ページビルダーは複雑だから、シンプルな WordPress 標準エディタで書きたい」という場合だけ
- ただし、現サイトの会社案内・事業案内・実績紹介・お知らせ記事は ページビルダー前提のデザイン になっているので、混在させると見た目が崩れます。標準エディタで書きたい場合も慎重に判断してください
このページが対象となる記事¶
ページビルダーの操作は、下記すべての記事編集で 完全に同じ です:
- 会社案内: 会社概要 (profile) / 代表挨拶 (message)
- 事業案内: 事業案内 (service)
- 実績紹介: 実績の個別記事 (works-single)
- お知らせ: お知らせの個別記事 (news-single)
各記事マニュアルでは「どのコンテンツが何のために使われているか」だけ説明し、ページビルダーの基本操作はこのページに案内しています。
変更が反映されないとき¶
| 症状 | 確認ポイント |
|---|---|
| 編集モーダルを閉じたら内容が消えた | モーダルの右下 「完了」 ボタンを押さずに × やオーバーレイで閉じると変更は破棄されます。必ず「完了」で閉じてください |
| 「完了」を押したのに公開サイトで変わらない | ページビルダー側で変更を「完了」しただけでは、まだ本番には反映されていません。記事編集画面の右上にある 「更新」 ボタンを必ず押してください |
| 並べ替えたあと公開サイトの順番が変わらない | 並べ替えも同様に、「更新」ボタンを押すまで本番には反映されません |
| 通常のエディタに戻ったあと、画面に何も出ない | 中身のテキストはページビルダーのデータとして保存されているだけで、消えてはいません。「ページビルダーで編集する」のような切り替えボタンを探すか、運営者の方では戻せない場合は管理者（toto）に連絡してください |