ページビルダーの使い方

ページビルダーを使用するにはプラグインが必要です。インストール方法に記載している必須プラグインのインストールを完了してください。

ページビルダーの使用開始

投稿（固定）ページ編集エリアの上にあるビルダーボタンをクリックしてください。
投稿ページでページビルダーを使用する方法1

編集画面にすでにコンテンツが存在する場合、ポップアップが表示されます。
編集ページに入力したコンテンツをコピーして使用する場合は「Yes」を選択してください。
投稿ページでページビルダーを使用する方法2

クリックするとレイアウト設定パネルが表示されます。
投稿ページでページビルダーを使用する方法2

各ボタンの意味は以下の通りです（プラグインのバージョンによって若干異なる場合があります）。

Add Widget: ウィジェットを追加
Add Row: カラムを追加（グリッドレイアウトを作成できます）
Layouts: レイアウトを追加（レイアウトテンプレートを設置できます）
History: 以前の設定に戻す
Live Editor: 実際の画面を見ながら編集できるライブエディターモードを起動
Addons: 有料のウィジェットを追加
Revert to Editor: ページビルダーを終了して、通常のエディターに戻す

ページビルダーの編集を終了する際は「Revert to Editor」をクリックしてください。
カスタマイズした内容は通常の投稿と同じように「公開」ボタンもしくは「更新」ボタンで保存できます。

ウィジェットの設置方法

「Add Widget」ボタンを押すとウィジェットの選択画面が表示されます。
PressBuilder ウィジェットの設置方法1

この中から設置したいウィジェットを選択することでウィジェットを設置することができます。
PressBuilder ウィジェットの設置方法2

設置したウィジェットをマウスオーバーすると以下のようなメニューが表示されます。

Edit: ウィジェットの設定画面を開く
Duplicate: ウィジェットを複製する
Delete: ウィジェットを削除する

ウィジェットの設定を変更する場合は、「Edit」をクリックし、設定画面を開いてください。
PressBuilderで追加したオリジナルウィジェットについては、左のメニューの「ウィジェットの使い方」にまとめていますのでそちらをご覧ください。
プラグイン側で提供されているウィジェットに関しては、こちらのドキュメントをご覧ください。

設置したウィジェットを複製（コピー）する場合は、「Duplicate」をクリックしてください。
設置したウィジェットを削除したい場合は、「Delete」をクリックしてください。

カラム（グリッドレイアウト）の設置方法

「Add Row」ボタンを押すとカラムの設置画面が表示されます。
PressBuilder カラムの設置方法1

画面上部にある数値の変更や選択肢の変更でカラムの設定を行います。

Set row layout: カラム数を設定できます（３列にしたい場合は３を入力）
columns with a ratio of: カラム幅の割合を変更できます。
going from: カラム幅の割合を左から右、もしくは右から左に変更

カラムのレイアウトが作成できたら、作成画面の右下にある「Insert」ボタンを押すことでカラムを設置できます。
PressBuilder カラムの設置方法2

設置したカラムは再編集することができます。
スパナのマークをマウスオーバーすると以下のようなメニューが表示されます。

Edit Row: カラムの編集
Duplicate Row: カラムの複製
Delete Row: カラムの削除

PressBuilder カラムの設置方法2

カラムの編集では、作成時に行った、カラム数や幅だけでなく、classの追加やスタイルの変更が可能です。
PressBuilder カラムの設置方法2

Attributes: 編集中のカラムに、idやclass、CSSスタイルのコードを追加することができます。
Layout: marginやpaddingの設定ができます。
Design: 背景色の設定や背景画像の設定が可能です。

カラムの複製を選ぶと、設置したウィジェットもまとめて複製されます。
カラムを削除したい場合は、「Delete Row」をクリックしてください。「Are You Sure?」と表示されるのでもう一度クリックすると削除が完了します。

カラムにウィジェットを設置する方法

作成したカラムにはウィジェットを配置することができます。

ウィジェットを設置するには、設置したいカラムをクリックして選択し、そのあと「Add Widget」ボタンからウィジェットを選んでください。
PressBuilder ウィジェットの設置方法3

１つのカラムに複数のウィジェットを設置することもできます。また、どちらかのカラム幅を狭くし、サイドバーとして利用することもできます。
PressBuilder ウィジェットの設置方法4

設置したウィジェットは通常の場合と同様に設定項目の変更や複製、削除が可能です。

レイアウトテンプレートの利用方法

あらかじめ用意されたレイアウトテンプレートを使用することができます。

レイアウトテンプレートを利用するには「Layouts」ボタンを押してレイアウト選択画面を開きます。
PressBuilder レイアウトテンプレートの設置方法1

左メニューはこちらのようになっています。

検索: レイアウトテンプレートの検索
Theme Defined: PressBuilderオリジナルレイアウトテンプレートの選択
Layouts Directory: プラグイン側で用意されたレイアウトテンプレート
Import/Export: レイアウトのインポートとエクスポート
Clone: 固定ページ: 固定ページで作成したレイアウトをコピー
Clone: 投稿: 投稿ページで作成したレイアウトをコピー

PressBuilderに同梱されているレイアウトテンプレートを使用する場合は、「Theme Defined」の中から選んでください。
使用したいレイアウトが決まったら、レイアウトをクリックし、選択状態にした上で、右下にある「Insert」ボタンをクリックします。
クリックしたあとに表示されるメニューの内容は以下の通りです。

Insert after: 現在作成しているレイアウトのあとにレイアウトテンプレートを挿入
Insert before: 現在作成しているレイアウトの前にレイアウトテンプレートを挿入
Replace current: 現在作成しているレイアウトを削除し、選択したレイアウトテンプレートを挿入

すでにカラムの設置やウィジェット設定を行っており、そのあとに続けてレイアウトテンプレートを入れたい場合は、「Insert after」を選択してください。
現在作成中のレイアウトを一旦削除し、新しくレイアウトテンプレートを入れたい場合は、「Replace current」を選択してください
「Replace current」を選択すると、「Are you sure?」と出てくるのでもう一度クリックするとレイアウトテンプレートを設置できます。
PressBuilder レイアウトテンプレートの設置方法3