CASTPROページビルダー：画面構成と基本操作

［CASTPRO設定］→［CASTPROページビルダー］を開くと、サイトの見た目をプレビューしながら編集できるビルダー画面が表示されます。

画面構成

左端のメニュー（サイドバー）

アイコンにマウスを重ねると名称が表示されます。

上部のツールバー

ダークモード／ライトモード

ビルダー画面の配色を、暗い配色（ダークモード）と明るい配色（ライトモード）で切り替えられます。作業しやすい方を選んでください。

1. 画面右上、［保存］ボタンの左にある「再生」アイコンの、さらに左のアイコンをクリックします。
2. クリックするたびに、ダークモードとライトモードが切り替わります。ダークモードのときは太陽のアイコン、ライトモードのときは月のアイコンが表示されます。

• 切り替わるのはビルダー画面（メニュー・パネル・背景）の配色だけです。プレビュー内のページや、公開中のサイトの見た目は変わりません。
• 保存操作は不要です。選んだモードはお使いのブラウザに記憶され、次にビルダーを開いたときも同じモードで表示されます（別のパソコンやブラウザでは、それぞれ設定します）。

中央：プレビュー画面

実際のサイトとほぼ同じ見た目で表示されます。要素をクリックすると選択され、右側に設定パネルが表示されます。要素の端の青いハンドルをドラッグすると、幅や余白を直接調整できます。

右側：要素設定パネル

選択した要素の設定を行います。何も選択していないときは「編集したい要素をプレビュー画面でクリックして選択してください。」と表示されます。パネル下部の［設定をエクスポート］は、テンプレートの書き出しに使います（エクスポート参照）。

基本操作

要素を追加する

1. 左メニューの［エレメントを追加］を開きます。
2. 追加したいエレメントを、プレビュー画面の置きたい場所へドラッグ＆ドロップします。

要素を編集する

1. プレビュー画面で要素をクリックして選択します。
2. 右側の要素設定パネルで、色・サイズ・余白などを変更します。変更はすぐにプレビューに反映されます。
3. 見出しやテキストは、プレビュー上で直接クリックして文字を書き換えられます。

選択中の要素のツールバー

要素を選択すると、要素の右上にアイコンが表示され、クリックするとツールバー（サブパネル）が開きます。

• 上へ移動／下へ移動：要素の順番を入れ替えます。
• 表示設定：デスクトップ・タブレット・モバイルそれぞれで表示するかどうかを切り替えます。
• 複製：選択中の要素のすぐ後ろにコピーを作ります（ウィジェットは複製できません）。
• 削除：要素を削除します。

モバイル専用スタイル

上部のデバイス切り替えで「モバイル」を選んでから要素を編集すると、「モバイル専用スタイルを編集中」と表示され、変更は画面幅767px以下の表示にだけ適用されます（テキスト・リンク・画像などの内容は共通です）。
モバイル専用の値を取り消してデスクトップと同じ見た目に戻すには、右パネルの［モバイル指定を解除］をクリックします。

共通パーツ（ヘッダー・フッター）

ヘッダーとフッターは「共通パーツ」です。選択すると「ここでの変更はすべてのページに適用されます。」と表示され、どのページを編集中でも、変更はサイト全体のヘッダー・フッターに反映されます。

保存と公開

• ［保存］：編集内容を保存し、サイトに反映します。
• ［∨］→［下書きとして保存］：公開せずに保存します。
• ［∨］→［公開］：ページを公開状態にして保存します。

保存せずにビルダーを閉じたり別のページへ切り替えたりすると、変更が失われる場合があります。こまめに保存してください。