ステップ3 ページを作る
「ページを作る」を動画で見てみましょう！
※オープンソース版（bingo!CMS core）では一部ご利用いただけない機能がございます。
1.ページの基本情報を設定する
メニューが決まったら、メニューごとに必要なページを作ります。
「ページ管理」画面の「編集中メニュー一覧」タブをクリック、
ツリー表示されたメニューから編集を行うフォルダ（メニュー）を選択し、「新規インデックスページ作成」（又は「新規ページ追加」）へ。
ここでそれぞれのページのタイトル、ファイル名（URL）等を設定します。
設定したら、そのまま保存してレイアウト設定に進みます。
2.コンテナを使ってレイアウト（段組）設定
「レイアウトコンテナー」（ページ左上部）より好きなコンテナをドラックしオレンジの点線で囲まれたエリアにドロップします。
コンテナの順序を変更したい場合はドラックして上下に移動できます。
構成が決まったら「保存」ボタンでレイアウトを確定します。
3.ユニット（コンテンツの箱）を配置
ページ右上部「2」ボタンから「ユニットレイアウト設定」ページへ移動します。
「レイアウトコンテナー」同様に「ユニット欄」よりコンテンツ内容に合ったユニットをドラッグしコンテナ内にドロップします。
※ドロップしたユニットはドラッグして別のコンテナに移動できます。
構成が決まったら「保存」ボタンでユニット配置を確定します。
4.コンテンツに素材を設定
ページ右上部「3」ボタンから「ユニット個別設定」画面へ移動、
それぞれのユニットの内容（テキスト、画像、リンク先等）を設定します。
登録した内容がすぐ画面に反映するので、公開ページをイメージしながら内容を設定できます。
5.プレビューで確認する
ページ右上部の虫眼鏡アイコンで画面プレビューを開き、公開状態を確認します。
レイアウトを変更する場合は「1」「2」ボタンで編集画面へ。 データの入った状態でコンテナやユニットを移動できます。
内容を変更する場合は「3」の画面で編集。
全てのページが完成したらいよいよ公開です。
簡単ドラッグ＆ドロップ
データ登録後でも移動が可能！
「レイアウトコンテナー」と「ユニット」はアイコン化され、編集画面の上部に表示されています。そのアイコンをドラッグ＆ドロップで必要な箇所に配置でき、一度配置した後でもドラッグ＆ドロップで簡単に移動することができます。
また、構成を保存した後でも、中に納められたユニット、コンテンツごとドラッグ＆ドロップで簡単に配置を移動することができます。
プロだからわかるレイアウト編集機能
「bingo!CMS」のページレイアウトの構造
「bingo!CMS」はデザインテンプレートをベースにして、ページ毎に「レイアウトコンテナー」を使いページの大まかなレイアウト構造を決め、その枠の中にタイトル、テキスト、画像を設定することができる「ユニット」を配置することで、様々なレイアウトのバリエーションを実現しています。
「レイアウトコンテナー」を使ってページの段組編集
「bingo!CMS」 ではカラム数や幅の比率が異なる「レイアウトコンテナー」と呼ばれる型枠が複数用意されています。レイアウトコンテナーを縦に積み上げることによって、ページで表示したいコンテンツの配置を大まかに決めていきます。
「レイアウトコンテナー」の種類
レイアウトコンテナーには下記の種類があります。
これらを上下に自由に組み合わせて、ページ全体のおおまかなレイアウト構成を決めたり、コンテンツの表示をコントロールすることが出来ます。
「ユニット」でコンテンツを配置
ユニットはコンテンツを納める箱の役割をします。コンテンツは主に「タイトル」「テキスト」「画像」「機能」から構成されています。ユニットの役割に応じて適切にデザインされており、必要な要素を入力できるインターフェイスも用意されています。
ドロップ直後のユニットには、それそれダミーコンテンツが表示されています。
デザインユニット（17種類）
主に静的なページ・コンテンツでページを構成する場合の基本的なデザインパターンが登録されています。構成要素としては、主にタイトル・ テキスト・ 画像です。
機能ユニット（10種類）
機能的な動作をするコンテンツでページを構成したい場合の基本的なパーツ（ユニット）です。フォーム生成やJavaScriptの取り込み、PDFのダウンロードなど具体的な機能毎に用意されています。
ライブビュー画面でコンテンツ入力
配置されたコンテンツはライブビュー画面でデータを入力・保存することができます。保存したデータはその場ですぐに反映されるので、画像のサイズやテキストのボリューム感などを入力しながら調整することができます。
また一度保存したデータはユニット単位、あるいはレイアウトコンテナー単位でドラッグ＆ドロップで簡単に移動することができます。特にユニットは、それが収まるレイアウトコンテナーのサイズに応じて、表示サイズや配置が自動的に最適化されます。
ユニットをクリップボード登録で再利用！
「bingo!CMS Version 1.2」より、データを登録したユニットをクリップボードで管理できるようになりました。
これにより、データがセットされたユニットを他のページに移動したり、一度画面上から削除したユニットを再利用したり、同じような設定のコンテンツを繰り返して利用したい場合にテンプレート的に利用するなど、様々な面でページ制作が楽になります。
クリップボードに登録されたユニットはアイコン化され、通常のユニットと同じように利用することができます。
すぐにでも「bingo!CMS」を体感したい方はこちら
1.デモサイトで体験する
実際にbingo!CMSで作成したサイトと管理画面の操作をご体感いただけます。
※AM3:00に全データがリセットされます。
ログインID：demo@bingo-cms.jp
パスワード：bingo
2.評価版で体験する
評価版「bingo!CMS」では無料でフル機能をお試しいただけます。
導入のご検討に是非ご利用ください。
3.出張デモで体験する
Web制作会社様、ホスティングサービス会社様向けにデモンストレーションをいたします。
※対象は東京都、神奈川県、埼玉県、千葉県、静岡県、愛知県、京都府、大阪府となります。
※日程等は弊社にて調整させていただきます。
※その他のエリアについてはご相談ください。
「デモサイト1、2」はインストール直後の状態
「デモサイト3」は「美容業向け 予約管理システム for bingo!CMS」インストール済みのサンプルサイト
※「bingo!CMS」の操作方法については「マニュアルサイト」をご覧ください。
※「bingo!CMS」の詳細の機能・特徴については「機能一覧」をご覧ください。
※「bingo!CMS」のインストール方法については「bingo!CMSのインストール方法について」をご覧ください。
※「bingo!CMS」の動作可能なサーバーについては「FAQ - 動作可能なレンタルサーバーが知りたい」をご覧ください。