ページを作成しよう
各ページのコンテンツを制作します。
bingo!CMSでは、まず「コンテナ」で段を組むようにレイアウトを構成し、続いてデザイン パーツであるユニットを配置してコンテンツを制作します。
この工程を繰り返すことで、ひとつのページが完成していきます。
※このマニュアルはbingo!CMS1.7.0を使用しています。最新版とは一部仕様が異なります。
この工程を繰り返すことで、ひとつのページが完成していきます。
※このマニュアルはbingo!CMS1.7.0を使用しています。最新版とは一部仕様が異なります。
「HOME」インデックスページのコンテナを設定しよう
「メニュー＆ページ管理」メニューの「HOME」／「HOME-インデックスページ」の「ページ編集」ボタンをクリックします。
1行目のコンテナを挿入する
「コンテナモード」に移動し、「コンテナユニット2列」アイコンをメニューの下にドラッグします。
挿入したい場所に赤いラインが現れたらドロップ（マウスボタンを離す）します。
挿入したい場所に赤いラインが現れたらドロップ（マウスボタンを離す）します。
コンテナ上にカーソルを合わせると、コンテナが薄い緑色になり、ポップアップメニューが表示されます。
① EDITアイコン：コンテナの設定をします。
② DELアイコン ：コンテナを削除します。
③ 複製アイコン ：コンテナを現在のコンテナのすぐ下に複製します。
④ クリップボードアイコン：コンテナの書式を再利用できるよう「クリップボード」に保存します。
⑤ ユニットモードアイコン：ユニットモードに移動します。
① EDITアイコン：コンテナの設定をします。
② DELアイコン ：コンテナを削除します。
③ 複製アイコン ：コンテナを現在のコンテナのすぐ下に複製します。
④ クリップボードアイコン：コンテナの書式を再利用できるよう「クリップボード」に保存します。
⑤ ユニットモードアイコン：ユニットモードに移動します。
1行目のコンテナを設定する
「EDIT」アイコンをクリックし、コンテナの設定を行います。
・Aのパディング設定を行います。
左：150 ／ 上：80 ／ 右：150 ／ 下：80
→ユニットが入るスペースを調整します。
・背景色アイコンをクリックし背景色を設定 （#f7f7f5）します。
→コンテナに背景色がつきます。
「保存」ボタンをクリックします。
・Aのパディング設定を行います。
左：150 ／ 上：80 ／ 右：150 ／ 下：80
→ユニットが入るスペースを調整します。
・背景色アイコンをクリックし背景色を設定 （#f7f7f5）します。
→コンテナに背景色がつきます。
「保存」ボタンをクリックします。
不要なコンテナを削除する
デフォルトで配置されている1列コンテナを、「DEL」アイコンををクリックして削除します。
※デフォルトのコンテナは「マルチコンテナ」です。カラム数やカラム幅などを自由に設定できますが、今回は使用しないので削除します。
※デフォルトのコンテナは「マルチコンテナ」です。カラム数やカラム幅などを自由に設定できますが、今回は使用しないので削除します。
2行目のコンテナを挿入して設定する
「コンテナユニット1列」アイコンを先程のコンテナの下にドラッグし、設定を行います。
・Aのパディング設定を行います。
左：150 ／ 上：80 ／ 右：150 ／ 下：80
・背景画像を設定します。
「ファイル選択」ボタンをクリックし、「section_02_bg.jpg」画像を最適化して読み込みます。
背景画像ポジションは「垂直：中央／水平：右寄せ」の位置を選択します。
「保存」ボタンをクリックします。
・Aのパディング設定を行います。
左：150 ／ 上：80 ／ 右：150 ／ 下：80
・背景画像を設定します。
「ファイル選択」ボタンをクリックし、「section_02_bg.jpg」画像を最適化して読み込みます。
背景画像ポジションは「垂直：中央／水平：右寄せ」の位置を選択します。
「保存」ボタンをクリックします。
2行目のコンテナが完成し、背景画像が設定されました。
1行目のコンテナを複製し3行目のコンテナを設定する
1行目のコンテナの上にカーソルを合わせ、コンテナのポップアップメニューから「複製」ボタンをクリックします。
すぐ下に複製されたコンテナが現れます。
複製されたコンテナを一番下にドラッグし、背景画像が入ったコンテナと位置を入れ替えます。
すぐ下に複製されたコンテナが現れます。
複製されたコンテナを一番下にドラッグし、背景画像が入ったコンテナと位置を入れ替えます。
以上でこのページで使用するコンテナを全て設定しました。
続いて、デザイン要素であるユニットを設定します。
続いて、デザイン要素であるユニットを設定します。
「HOME」インデックスページの各ユニットを設定しよう
「ユニットモード」アイコンをクリックし、ユニットモードに切り替えます。
1行目にユニットを設定する
まず、カフェのコンセプトを紹介するコンテンツを制作します。
１行目の左側のカラムに「画像のみ」ユニットをドロップし、「EDIT」アイコンをクリックします。
１行目の左側のカラムに「画像のみ」ユニットをドロップし、「EDIT」アイコンをクリックします。
ファイル選択をクリックし、「section_01_photo.jpg」を最適化して取り込みます。
※今回設定したカラムでは、表示幅は自動的に460pxになります。幅460px以上のファイルサイズであれば事前にサイズを変更する必要はありません。
alt（代替テキスト）に「コンセプトイメージ写真」と入力します。
※今回設定したカラムでは、表示幅は自動的に460pxになります。幅460px以上のファイルサイズであれば事前にサイズを変更する必要はありません。
alt（代替テキスト）に「コンセプトイメージ写真」と入力します。
「デザインオプション」タブをクリックし 下方スペースを「なし」にします。
「保存」ボタンをクリックします。
「保存」ボタンをクリックします。
右側のカラムに「タイトル（見出し）」ユニットをドロップし、その下に「テキスト」ユニットをドロップします。
①「タイトル（見出し）」ユニット：
「EDIT」アイコンをクリックします。
・「CONCEPT」と入力します。
・見出しレベルを「h2」に設定します。
・「デザインオプション」タブをクリックし、下方スペースを「狭い」にします。
「保存」ボタンをクリックします。
②「テキスト」ユニット：
「EDIT」アイコンをクリックします。
・コンセプトを入力します。
・書体の属性は何もつけません。
・「デザインオプション」タブをクリックし 下方スペースを「狭い」にします。
「保存」ボタンをクリックします。
1行目のコンテンツの設定が完了しました。
①「タイトル（見出し）」ユニット：
「EDIT」アイコンをクリックします。
・「CONCEPT」と入力します。
・見出しレベルを「h2」に設定します。
・「デザインオプション」タブをクリックし、下方スペースを「狭い」にします。
「保存」ボタンをクリックします。
②「テキスト」ユニット：
「EDIT」アイコンをクリックします。
・コンセプトを入力します。
・書体の属性は何もつけません。
・「デザインオプション」タブをクリックし 下方スペースを「狭い」にします。
「保存」ボタンをクリックします。
1行目のコンテンツの設定が完了しました。
2行目にユニットを設定する
続いて、カフェのメニューを紹介するコンテンツを制作します。
カラム内に「タイトル（見出し）」ユニットと「テキスト」ユニットをドロップします。
①「タイトル（見出し）」ユニット：
・「MENU」と入力します。
・見出しレベルを「h2」に設定します。
・「デザインオプション」タブをクリックし 下方スペースを「狭い」にします。
②「テキスト」ユニット：
・メニューについて入力します。
・書体の属性は何もつけません。
・「デザインオプション」タブをクリックし、下方スペースを「狭い」にします。
「保存」ボタンをクリックします。
カラム内に「タイトル（見出し）」ユニットと「テキスト」ユニットをドロップします。
①「タイトル（見出し）」ユニット：
・「MENU」と入力します。
・見出しレベルを「h2」に設定します。
・「デザインオプション」タブをクリックし 下方スペースを「狭い」にします。
②「テキスト」ユニット：
・メニューについて入力します。
・書体の属性は何もつけません。
・「デザインオプション」タブをクリックし、下方スペースを「狭い」にします。
「保存」ボタンをクリックします。
「画像ボタン」ユニットをドロップし、「EDIT」アイコンをクリックして設定を行います。
※bingo!CMS最新版をご利用の場合は「画像 v17（高機能画像ユニット）」をご使用ください。
※bingo!CMS最新版をご利用の場合は「画像 v17（高機能画像ユニット）」をご使用ください。
ボタン画像（通常時）：
「btn_more.png」
リンク先URL：
「/menu/」と入力し「同じウィンドウ」を選択します。
（クリックすると、手順3で制作した「MENU」ページへ飛ぶようになります。）
ボタン画像（マウスオーバー時）：
「btn_more_on.png」
「デザインオプション」タブをクリックし 下方スペースを「狭い」にします。
「保存」ボタンをクリックします。
2行目のコンテンツの設定が完了しました。
※「画像 v17（高機能画像ユニット）」の場合はこちらのマニュアルを参考に設定してください。なお、画像サイズは「オリジナル」を選択してください。
「btn_more.png」
リンク先URL：
「/menu/」と入力し「同じウィンドウ」を選択します。
（クリックすると、手順3で制作した「MENU」ページへ飛ぶようになります。）
ボタン画像（マウスオーバー時）：
「btn_more_on.png」
「デザインオプション」タブをクリックし 下方スペースを「狭い」にします。
「保存」ボタンをクリックします。
2行目のコンテンツの設定が完了しました。
※「画像 v17（高機能画像ユニット）」の場合はこちらのマニュアルを参考に設定してください。なお、画像サイズは「オリジナル」を選択してください。
3行目にユニットを設定する
最後に、カフェへの行き方を紹介するコンテンツを制作します。
3行目の左側のカラムに「画像のみ」ユニットをドロップし、「EDIT」アイコンをクリックします。
「ファイル選択」をクリックし、「section_03_photo.jpg」を最適化して取り込みます。
「デザインオプション」タブをクリックし 下方スペースを「なし」にします
「保存」ボタンをクリックします。
3行目の左側のカラムに「画像のみ」ユニットをドロップし、「EDIT」アイコンをクリックします。
「ファイル選択」をクリックし、「section_03_photo.jpg」を最適化して取り込みます。
「デザインオプション」タブをクリックし 下方スペースを「なし」にします
「保存」ボタンをクリックします。
右側のカラムに「タイトル（見出し）」ユニットと「テキスト」ユニットと「画像ボタン」ユニットをドロップします。
「タイトル（見出し）」ユニット：
・「ACCESS」と入力します。
・見出しレベルを「h2」に設定します。
・「デザインオプション」タブをクリックし、下方スペースを「狭い」にします。
「保存」ボタンをクリックします。
「テキスト」ユニット：
・アクセス情報を入力します。
・書体の属性は何もつけません。
・「デザインオプション」タブをクリックし、下方スペースを「狭い」にします。
「保存」ボタンをクリックします。
「画像ボタン」ユニット：
・ボタン画像（通常時）：
「btn_more.png」
・リンク先URL：
「/access/」と入力し「同じウィンドウ」を選択
（クリックすると、手順3で制作した「ACCESS」ページへ飛ぶようになります。）
・ボタン画像（マウスオーバー時）：
「btn_more_on.png」
・「デザインオプション」タブをクリックし 下方スペースを「狭い」にします。
「保存」ボタンをクリックします。
「タイトル（見出し）」ユニット：
・「ACCESS」と入力します。
・見出しレベルを「h2」に設定します。
・「デザインオプション」タブをクリックし、下方スペースを「狭い」にします。
「保存」ボタンをクリックします。
「テキスト」ユニット：
・アクセス情報を入力します。
・書体の属性は何もつけません。
・「デザインオプション」タブをクリックし、下方スペースを「狭い」にします。
「保存」ボタンをクリックします。
「画像ボタン」ユニット：
・ボタン画像（通常時）：
「btn_more.png」
・リンク先URL：
「/access/」と入力し「同じウィンドウ」を選択
（クリックすると、手順3で制作した「ACCESS」ページへ飛ぶようになります。）
・ボタン画像（マウスオーバー時）：
「btn_more_on.png」
・「デザインオプション」タブをクリックし 下方スペースを「狭い」にします。
「保存」ボタンをクリックします。
以上でこのページのコンテンツ制作が完了しました。
プレビューページを見て、制作したページに問題がないか確認します。
テキストの入力間違いや、リンクボタンをクリックしてページが正しく遷移するかなどをチェックしましょう。
問題がなければ、続いて公開作業に移ります。
プレビューページを見て、制作したページに問題がないか確認します。
テキストの入力間違いや、リンクボタンをクリックしてページが正しく遷移するかなどをチェックしましょう。
問題がなければ、続いて公開作業に移ります。
【「HOME」インデックスページを公開します。】
「メニュー＆ページ管理」メニューの「HOME」／「HOME-インデックスページ」にチェックを入れて、「ページ操作」／「公開する」もしくは「更新する」を選択します。
これで、先ほど制作した「HOME」インデックスページが公開されました。
続いて、「MENU」インデックスページのコンテンツを制作します。
「メニュー＆ページ管理」メニューの「HOME」／「HOME-インデックスページ」にチェックを入れて、「ページ操作」／「公開する」もしくは「更新する」を選択します。
これで、先ほど制作した「HOME」インデックスページが公開されました。
続いて、「MENU」インデックスページのコンテンツを制作します。
「MENU」インデックスページのコンテナを設定しよう
「MENU」インデックスページのページ編集画面に入り、コンテナモードに切り替えます。
デフォルトで配置されているマルチコンテナは今回は使用しないので、適宜削除してください。
1行目のコンテナを挿入する
「コンテナユニット1列」アイコンをメニューの下にドラッグし、コンテナの設定を行います。
・Aのパディング設定を行います。
左：150 ／ 上：80 ／ 右：150 ／ 下：80
・背景画像を設定します。
ファイル選択ボタンをクリックし「2_step02」/「2_images」/「section_01_bg.jpg」画像を
最適化して読み込みます。
背景画像ポジションは「垂直：中央／水平：右寄せ」の位置を選択します。
「保存」ボタンをクリックします。
2行目のコンテナを挿入する
「コンテナユニット3列」を1行目の下にドラッグし、コンテナの設定を行います。
・Aのパディング設定を行います。
左：150 ／ 上：80 ／ 右：150 ／ 下：60
「保存」ボタンをクリックします。
2行目のコンテナを複製し3行目を作る
2行目のコンテナの個別メニューから「複製」ボタンをクリックして3行目を作ります。
・Aのパディング設定を変更します。
左：150 ／ 上：0 ／ 右：150 ／ 下：60
「保存」ボタンをクリックします。
MENUページのコンテナが全て設定されました。
デフォルトで配置されているマルチコンテナは今回は使用しないので、適宜削除してください。
1行目のコンテナを挿入する
「コンテナユニット1列」アイコンをメニューの下にドラッグし、コンテナの設定を行います。
・Aのパディング設定を行います。
左：150 ／ 上：80 ／ 右：150 ／ 下：80
・背景画像を設定します。
ファイル選択ボタンをクリックし「2_step02」/「2_images」/「section_01_bg.jpg」画像を
最適化して読み込みます。
背景画像ポジションは「垂直：中央／水平：右寄せ」の位置を選択します。
「保存」ボタンをクリックします。
2行目のコンテナを挿入する
「コンテナユニット3列」を1行目の下にドラッグし、コンテナの設定を行います。
・Aのパディング設定を行います。
左：150 ／ 上：80 ／ 右：150 ／ 下：60
「保存」ボタンをクリックします。
2行目のコンテナを複製し3行目を作る
2行目のコンテナの個別メニューから「複製」ボタンをクリックして3行目を作ります。
・Aのパディング設定を変更します。
左：150 ／ 上：0 ／ 右：150 ／ 下：60
「保存」ボタンをクリックします。
MENUページのコンテナが全て設定されました。
「MENU」インデックスページの各ユニットを設定しよう
「ユニットモード」に切り替え、1行目を設定します。
1行目のカラム内に「タイトル（見出し）」ユニットと「テキスト」ユニットをドロップし、「EDIT」から以下のように編集します。
「タイトル（見出し）」ユニット：
・「MENU」と入力します。
・見出しレベルを「h2」に設定します。
・「デザインオプション」タブをクリックし 下方スペースを「狭い」にします。
「テキスト」ユニット：
・メニューについて入力する。
・書体の属性はなにもつけません。
・「デザインオプション」タブをクリックし、下方スペースを「狭い」にします。
「保存」ボタンをクリックします。
1行目のカラム内に「タイトル（見出し）」ユニットと「テキスト」ユニットをドロップし、「EDIT」から以下のように編集します。
「タイトル（見出し）」ユニット：
・「MENU」と入力します。
・見出しレベルを「h2」に設定します。
・「デザインオプション」タブをクリックし 下方スペースを「狭い」にします。
「テキスト」ユニット：
・メニューについて入力する。
・書体の属性はなにもつけません。
・「デザインオプション」タブをクリックし、下方スペースを「狭い」にします。
「保存」ボタンをクリックします。
2行目・3行目を設定します。
・2行目・3行目の3つのカラムに「画像（上段）＋タイトル・テキスト（下段）」ユニットをそれぞれ1つずつドロップします。
・各メニューの画像を設定します。
《設定場所》
2行目左から「Coffe」「Ice Coffe」「Smoothee」
3行目左から「Salad」「Hamburger」「Cake」
・「タイトル・テキスト（下段）」に、金額やメニューについてのコメントを入力します。
（金額は書式設定で「太字(B)」にしました。）
「デザインオプション」タブをクリックし、下方スペースを「なし」にします。
・2行目・3行目の3つのカラムに「画像（上段）＋タイトル・テキスト（下段）」ユニットをそれぞれ1つずつドロップします。
・各メニューの画像を設定します。
《設定場所》
2行目左から「Coffe」「Ice Coffe」「Smoothee」
3行目左から「Salad」「Hamburger」「Cake」
・「タイトル・テキスト（下段）」に、金額やメニューについてのコメントを入力します。
（金額は書式設定で「太字(B)」にしました。）
「デザインオプション」タブをクリックし、下方スペースを「なし」にします。
「MENU」インデックスページの全ユニットの設定が終わったら、
「メニュー＆ページ管理」メニューの「MENU」／「MENU-インデックスページ」にチェックを入れて、「ページ操作」／「更新する」を選択し、設定した内容を公開しましょう。
続いて、「ACCESS」インデックスページのコンテンツを制作します。
「メニュー＆ページ管理」メニューの「MENU」／「MENU-インデックスページ」にチェックを入れて、「ページ操作」／「更新する」を選択し、設定した内容を公開しましょう。
続いて、「ACCESS」インデックスページのコンテンツを制作します。
「ACCESS」インデックスページのコンテナを設定しよう
「ACCESS」インデックスページのページ編集画面に入り、コンテナモードに切り替えます。
デフォルトで配置されているマルチコンテナは今回は使用しないので、適宜削除してください。
１行目のコンテナを挿入する
「コンテナユニット1列」アイコンをメニューの下にドラッグし、コンテナの設定を行います。
・Aのパディング設定を行います。
左：150 ／ 上：80 ／ 右：150 ／ 下：80
・背景画像を設定します。
「ファイル選択」ボタンをクリックし「3_step03」/「2_images」/「section_01_boat_bg.jpg」
画像を最適化して読み込みます。
背景画像ポジションは「垂直：中央／水平：右寄せ」の位置を選択します。
「保存」ボタンをクリックします。
2行目のコンテナを挿入する
「コンテナユニット2列」1行目の下にドラッグし、コンテナの設定を行います。
・Aのパディング設定を行います。
左：150 ／ 上：80 ／ 右：150 ／ 下：60
「保存」ボタンをクリックします。
ACCESSページのコンテナが全て設定されました。
デフォルトで配置されているマルチコンテナは今回は使用しないので、適宜削除してください。
１行目のコンテナを挿入する
「コンテナユニット1列」アイコンをメニューの下にドラッグし、コンテナの設定を行います。
・Aのパディング設定を行います。
左：150 ／ 上：80 ／ 右：150 ／ 下：80
・背景画像を設定します。
「ファイル選択」ボタンをクリックし「3_step03」/「2_images」/「section_01_boat_bg.jpg」
画像を最適化して読み込みます。
背景画像ポジションは「垂直：中央／水平：右寄せ」の位置を選択します。
「保存」ボタンをクリックします。
2行目のコンテナを挿入する
「コンテナユニット2列」1行目の下にドラッグし、コンテナの設定を行います。
・Aのパディング設定を行います。
左：150 ／ 上：80 ／ 右：150 ／ 下：60
「保存」ボタンをクリックします。
ACCESSページのコンテナが全て設定されました。
「ACCESS」インデックスページの各ユニットを設定しよう
「ユニットモード」アイコンをクリックしユニットモードに切り替えます。
1行目を設定します。
・1行目のカラム内に「タイトル（見出し）」ユニットと「テキスト」ユニットをドロップします。
・「タイトル（見出し）」ユニットに「ACCESS」と入力します。
・「テキスト」ユニットにアクセス情報を入力します。
・見出しレベルを「h2」に設定します。
・「デザインオプション」タブをクリックし、下方スペースを「狭い」にします。
「保存」ボタンをクリックします。
1行目を設定します。
・1行目のカラム内に「タイトル（見出し）」ユニットと「テキスト」ユニットをドロップします。
・「タイトル（見出し）」ユニットに「ACCESS」と入力します。
・「テキスト」ユニットにアクセス情報を入力します。
・見出しレベルを「h2」に設定します。
・「デザインオプション」タブをクリックし、下方スペースを「狭い」にします。
「保存」ボタンをクリックします。
2行目の左コンテナに住所や電話番号など、必要な情報を入力します。
2行目の右コンテナにはYahooMapを組み込み、目的地を表示します。
プルダウンメニューから「機能ユニット」を選び、「マップ」アイコンをドロップします。
プルダウンメニューから「機能ユニット」を選び、「マップ」アイコンをドロップします。
「マップ」ユニットを設定します。
・「スポットタイトル」マップの目的地の名称を入力します。（今回は「Loos」）
・「住所」マップの目的地の住所を入力します。（今回は「神奈川県小田原市城山1-3-20」）
・YahooMap API ID（アプリケーションID）を取得し、記入します。
注意）Yahoo! JAPAN Webサービスのご利用にはアプリケーションIDを登録する必要があります。
未登録の場合は次のURLよりIDを取得してください。
http://developer.yahoo.co.jp/map/
・「緯度、経度を調べる」テキストをクリックし、表示されたMAPで目的地をクリックすると、
緯度、経度が入力されます。
マップユニットが設定されました。
「保存」ボタンをクリックします。
以上で全てのページの設定が完了し、サイトが完成しました。
「ACCESS」ページを公開（更新）し、全ページの内容とリンクを確認してみましょう。
・「スポットタイトル」マップの目的地の名称を入力します。（今回は「Loos」）
・「住所」マップの目的地の住所を入力します。（今回は「神奈川県小田原市城山1-3-20」）
・YahooMap API ID（アプリケーションID）を取得し、記入します。
注意）Yahoo! JAPAN Webサービスのご利用にはアプリケーションIDを登録する必要があります。
未登録の場合は次のURLよりIDを取得してください。
http://developer.yahoo.co.jp/map/
・「緯度、経度を調べる」テキストをクリックし、表示されたMAPで目的地をクリックすると、
緯度、経度が入力されます。
マップユニットが設定されました。
「保存」ボタンをクリックします。
以上で全てのページの設定が完了し、サイトが完成しました。
「ACCESS」ページを公開（更新）し、全ページの内容とリンクを確認してみましょう。
前へ戻る
>（4）ページの基本設定をして公開しようへ
次へ進む
>（6）スマートフォン向けに調整しようへ