CASTPROページビルダー：エレメント

エレメントは、ページを組み立てる部品です。左メニューの［エレメントを追加］（3番目のアイコン）を開き、使いたいエレメントをプレビュー画面の置きたい場所へドラッグ＆ドロップします。

エレメントの一覧

区分	エレメント
要素	カラム／見出し／テキスト／画像／動画／スペーサー／区切り線／ボタン／テーブル／アイコン／ショートコード／フローティング・メニュー／アコーディオン
動的要素	メニュー／ウィジェット／ロゴ／電話番号／ハンバーガーメニュー／会員用ログイン／パンくずリスト

「動的要素」は、WordPressのメニューや店舗情報、キャストデータなど、サイトに登録された情報を自動で表示するエレメントです。

共通の設定項目

多くのエレメントで、右側の要素設定パネルに次の設定項目が表示されます（エレメントによって表示される項目は異なります）。

アニメーション

項目	内容
種類	表示されるときの動き（フェードインなど）。「なし」で無効。
所要時間／遅延	動きの長さと、動き始めるまでの待ち時間（ミリ秒）。
移動距離	スライドして現れる動きの距離。
イージング	動きの加速・減速のしかた。
実行回数	「1回のみ」または「無限ループ」。
タイミング	画面に入ったときに再生するかなどの再生タイミング。

スタイル

項目	内容
背景色	単色またはグラデーション（角度・カラーストップを指定）。不透明度も指定できます。下の丸いボタンはグローバル設定で登録したカラーです。
オーバーレイ	背景画像や背景動画の上に重ねる色。写真を暗くして文字を読みやすくするときなどに使います。
背景画像／背景動画	画像や動画を背景に設定します（主にカラム）。
枠線	線の太さと色。
角丸	角の丸み（px）。右のボタンで4つの角を個別に指定できます。
box shadow	影。
ガラス効果	背景をすりガラスのようにぼかします（背景色を半透明にすると効果がわかります）。

レイアウト

項目	内容
幅	全幅（フル幅）／コンテンツ幅／指定幅（px・%）など。
高さ	「自動」または「数値指定」。
水平配置／垂直配置	中の要素を左・中央・右、上・中央・下に揃えます。
余白（内側）／余白（外側）	Padding／Margin。上下左右をまとめて、または「4辺個別」で指定します。プレビュー上で青いハンドルをドラッグして調整することもできます。
ポジション	relative／absolute／sticky など配置方法。sticky にすると、スクロールしても画面上部に留まる表示にできます。
並び順	横並びの中での表示順。モバイルだけ順番を入れ替えたいときに使います。
重なり順	要素が重なったときの前後関係。

ホバー効果

マウスを重ねたときの「背景色(hover)」「シャドウ(hover)」を指定します。

カラム

他のエレメントを入れる「箱」です。ページのレイアウトはカラムを組み合わせて作ります。

使い方

［カラム］をページにドラッグします。
カラムの中に、見出しや画像などのエレメントをドロップします。
横に並べたいときは、カラムの隣にカラムを追加します（横並びは「Row（行）」としてまとまります）。
カラムの境目のハンドルをドラッグすると、幅の比率を変えられます。

主な設定

スタイル：背景色、オーバーレイ、背景画像、背景動画（［動画を選択］でMP4を選ぶと、自動再生・ループの背景動画になります）、枠線、角丸、影、ガラス効果
レイアウト：幅（全幅／コンテンツ幅／指定幅）、高さ、配置、余白、ポジション、並び順
モバイル表示時のカラム設定：行（Row）を選ぶと、モバイル（幅767px以下）でのカラム数を指定できます。はみ出し防止のため、カラムは折り返し・自動縮小されます。

見出し

ページやセクションのタイトルを表示します。

プレビュー上で直接クリックして文字を入力します。改行もできます。
見出し設定：見出しレベル（H1〜など）。ページの構造に合わせて選びます（1ページにH1は1つが目安です）。
タイポグラフィー：フォント・スタイル、フォントの太さ、テキスト色（単色・グラデーション）、縁取り・縁取りの色、行間隔、文字間隔。
段落：縦書き、斜体、下線。
マスク：文字の形に画像を切り抜いて表示します（［マスクを解除］で元に戻せます）。
モーション：シマー（光沢）、フェードイン、スライドイン、ブラーイン、スケールイン、ロール、ラインリビール、ライズなど、文字の登場アニメーション。
ブロックリビール・アニメーション：色の帯が横切りながら見出しが現れる演出です。

テキスト

本文などの文章を表示します。

プレビュー上で直接入力できます。
編集ツールバーで、太字、斜体、下線、打ち消し線、箇条書き、番号付きリスト、リンク挿入・リンク解除、フォーマット解除ができます。
［HTMLコード表示に切替］で、HTMLを直接編集することもできます（［ビジュアルエディタに切替］で戻ります）。
文字の大きさ・色・行間などは、見出しと同じタイポグラフィー設定で変更します。

画像

配置後、画像を選択してツールバーから［画像の置換］を選び、メディアライブラリから画像を選びます。
ALTテキスト：画像の代替テキスト（画像の内容を表す短い説明）を入力します。
リンク：リンクURLを設定できます。「新しいタブで開く」「モーダルで開く」も選べます。
画像設定：［遅延表示］（画面に近づいてから読み込む）、［webpに変換］（軽量な形式に変換して表示を速くする）。
角丸、枠線、影、ブロックリビール・アニメーションなども設定できます。

動画

配置後、［動画の置換］でメディアライブラリの動画（MP4）を選びます。
動画を選択し、ツールバーの設定アイコンを開くと、［自動再生］［コントローラー］（再生ボタン等の表示）［音声］［サムネイル画像］（再生前に表示する画像）を設定できます。
自動再生をONにすると、ブラウザの制限により音声はミュートになります。
角丸は右パネルで設定します。
動画はファイルサイズが大きくなりがちです。表示速度のため、圧縮した動画の使用をおすすめします。

スペーサー

要素と要素の間に空白を作ります。高さを指定するか、プレビュー上でドラッグして調整します。モバイルだけ高さを変えることもできます。

区切り線

横線を表示してセクションを区切ります。「線の太さ」「線の色」、幅、配置を設定します。

ボタン

文字はプレビュー上で直接書き換えます。
ボタン・プリセット：用意されたデザインから選ぶと、色・角丸などが一度に設定されます。
リンク：ツールバーの［リンク設定］でリンクURLを設定します。「新しいタブで開く」「モーダルで開く」も選べます。
右側の矢印アイコン：選択して画像を変更・削除できます。
左側のアイコン：ツールバーの［アイコンを追加］で、文字の左にアイコンを追加できます。追加後に画像を選んで差し替えます。
背景色・文字色・枠線・角丸・ホバー時の色なども変更できます。

テーブル

料金表などの表を作成します。

セルをクリックして文字を入力します。行・列の追加や削除はテーブルのツールから行います。
テーブル設定：［ヘッダー(th)を使用］、［偶数行に色を指定］（縞模様の背景）、ヘッダー背景・ヘッダー文字の色、枠線の色・太さ、セルの余白。
ボーダー：「上下左右」または「下のみ」を選べます。

アイコン

［アイコンを選択］で、アイコンライブラリから選びます。「アイコンを検索...」で名前検索ができ、カテゴリー（基本・アクション、SNS、矢印・ナビゲーション、ナビゲーション・基本UI、コンタクト・連携、アクション・機能、メディア・ファイルなど）で絞り込めます。
アイコン設定：サイズ、色、リンクURL（新しいタブ／モーダルで開く）、水平配置。
電話番号の前にアイコンを置きたい場合などは、カラムを2つに分けて、片方にアイコン、もう片方に電話番号を置きます。

ショートコード

ショートコードを使ってプラグインの機能や、他のプラグインのフォームなどを表示します。

［ショートコード］を配置して選択します。
右パネルの［ショートコード入力］欄に、ショートコード（例：[cpl_reviews_list count="5"]）を入力します。

CASTPROのショートコード一覧は基本設定：ショートコードを参照してください。

フローティング・メニュー

画面下部に固定表示されるナビゲーションです。主にスマートフォン向けの「ホーム」「キャスト」「出勤」「お問い合わせ」などのボタンに使います。

配置すると、HOME／キャスト／出勤／お問い合わせの4項目が、アイコン・リンク先付きで作成されます。
各項目の文字・アイコン・リンク先は、項目を選択して変更します。「お問い合わせ」のリンク先は仮（#）のため、ご自身のページや電話番号（tel:）に変更してください。
フローティング・メニュー設定：背景色、文字色・アイコン色、角丸、影などを設定します。
デバイス別表示設定：配置したときのデバイスで表示されます。スマートフォンだけで表示したい場合は、ツールバーの［表示設定］でモバイルだけをONにします。
全ページに表示したい場合は、フッター（共通パーツ）の中に配置します。

アコーディオン

見出しをクリックすると本文が開閉する部品です。よくある質問（FAQ）や料金の補足などに使います。

見出し・本文はプレビュー上で直接入力します。
初期状態で開く：ONにすると、ページを開いたときに本文が開いた状態で表示されます。
ヘッダー背景／ヘッダー文字：見出し部分の色。
本文の背景／本文の文字：開いた本文部分の色。
枠線の色／枠線の太さ。

WordPressの［外観］→［メニュー］で作成したメニューを表示します。

メニュー設定：［メニュー選択］で表示するメニューを選びます（ヘッダーメニュー、フッターメニュー、作成済みのメニュー）。
並び方向：横並び／縦並び。
配置：左揃え／中央揃え／右揃え／均等配置。
項目間隔、文字の大きさ・色、ホバー時文字色。

メニューの項目（リンク先・名前）を変えたいときは、WordPressの［外観］→［メニュー］で編集します。

ヘッダー内のメニューの場合

ヘッダー（共通パーツ）に置いたメニューを選択すると、次の設定も表示されます。

ヘッダー設定：背景色、文字色、リンク色、ホバー色、ガラス効果、トップページでヒーロー（メインビジュアル）に重ねる。
下層ページ設定：トップページ以外でのヘッダーの色など。
固定ヘッダー：固定表示にする、固定時の背景色、ガラス効果、影、非固定時に背景を透過。

動画：ウィジェットを追加する流れ

キャスト一覧や出勤情報など、サイトの登録データを自動で表示する部品です。

［エレメントを追加］の「動的要素」にある［ウィジェット］をクリックします。
「利用可能なウィジェット」一覧が開きます（「ウィジェットを検索...」に「CASTPRO」と入力すると絞り込めます）。使うウィジェットを、プレビューの置きたい場所へドラッグ＆ドロップします。
- CASTPRO: 在籍一覧（キャスト一覧）
- CASTPRO: 本日の出勤スケジュール（当日のスケジュール）
- CASTPRO: スライダー（画像スライダー）
- CASTPRO: 新着情報（お知らせ一覧）
- CASTPRO: クチコミレビュー一覧（最新レビュー）
- 検索バー（サイト内検索）／最新の投稿（最近の記事一覧）
- テキスト
- カスタムHTML
ウィジェットを選択すると、右パネルに「ウィジェット設定」が表示されます。

各ウィジェットの設定項目はウィジェットのページで説明しています。

カードのデザインを変える

ウィジェット内のカード（ループ項目）やカード内の画像・名前（ループ内要素）を選択して編集すると、「ここでの変更は、同じウィジェット内の他の投稿(カード)にもリアルタイムで反映されます。」と表示され、すべてのカードに同じデザインが適用されます。

ロゴ

ヘッダーのロゴ画像を選択したところ

サイトのロゴ画像を表示します。主にヘッダー・フッターに配置します。

配置後、ロゴを選択して画像を自店のロゴ画像に差し替えます。
幅・配置・余白で大きさと位置を調整します。

電話番号

［CASTPRO設定］→［基本設定］→［店舗情報］の「電話番号」を表示します。

店舗情報の番号を変更すると、配置済みのすべての電話番号が自動で新しい番号になります。
店舗情報が未入力の場合は、仮の番号（03-1234-5678）が表示されます。
文字の大きさ・太さ・色を変更できます。
表示されるのは番号の文字だけです。「TEL」などの文字やアイコンを添えたい場合は、カラムを分けてテキストやアイコンを隣に置きます。タップで発信させたい場合は、ボタンのリンクに「tel:番号」を設定してください。

ハンバーガーメニュー

三本線のアイコンをクリックすると、メニューが全画面で開くナビゲーションです。主にスマートフォン・タブレット向けに使います。

アイコンは画面右上に固定表示されます。クリックでドロワーメニューが上から全画面に開きます。
ハンバーガーメニュー設定：
- メニュー選択（表示するWordPressメニュー）
- アイコン色、アイコンの太さ
- ドロワー背景色、ドロワー文字色
- 変形アニメーション（開いたときに三本線が「×」に変わる動き）
- X（右からの位置）、Y（上からの位置）
PCでは通常のメニューを、スマートフォンではハンバーガーメニューを表示するなど、ツールバーの［表示設定］と組み合わせて使います。

会員用ログイン

会員向けのログイン・会員登録への入口を表示するエレメントです。ヘッダーなどに置いておくと、訪問者がログインページや会員登録ページへ移動できます。ログインしていないときは「ログイン　ようこそ！ゲストさん」のように表示されます。

文字の大きさ・色・余白などを調整できます。
会員機能（いいね、メッセージ送信、会員専用動画など）を使う場合に配置してください。

「HOME ＞キャスト一覧＞〇〇」のように、現在のページの位置を表示します。

表示内容は、表示しているページに合わせて自動で作られます。
ヘッダーやフッター（共通パーツ）に置くと、すべてのページで表示できます。
文字の大きさ・色・余白などを調整できます。

マニュアル目次へ戻る