(2)テンプレートを設定しよう

bingo!CMSにデフォルトでインストールされているスキンからテンプレートを設定します。

※このマニュアルはbingo!CMS1.7.0を使用しています。最新版とは一部仕様が異なります。

トップページ用のデザインテンプレートを設定しよう

テンプレートとはページの共通要素（ロゴ・背景・ヘッダー・フッターなど）を設定したものです。
今回は、トップページ用のテンプレート（コマーシャルエリアあり）と、
セカンドページ用のテンプレート（コマーシャルエリアなし）の2種類を設定します。

サイドメニューを使うレイアウトなど、デフォルトのスキンで作れないページを開発したい場合は、スキンを追加インストール（ダウンロード・新規作成）することが可能です。
無料の追加スキンはbingo!CMSユーザーズサイトからダウンロードできます。
メニューバーの「デザイン管理」／「テンプレート管理」を選びます。
「通常用」タブが選択されていることを確認します。
「初期テンプレート」を複製し名称を変更します。
「初期テンプレート」にチェックを入れ、「テンプレート操作」／「複製」を選びます。
「複製処理を開始します。よろしいですか？」のダイアログで「OK」をクリックします。

※「初期テンプレート」を直接編集することもできますが、ここでは複製したテンプレートを使用します。
「初期テンプレートのコピー」にチェックを入れ、「テンプレート操作」／「基本情報編集」を選びます。

テンプレート名を変更する

テンプレート名称を「Loos（TOP）」に変更し、メモ欄内のテキストを消去します。
「保存」ボタンをクリックします。

ヘッダーにロゴを登録する

「Loos(TOP)」テンプレートの「編集」ボタンをクリックします。
テンプレート編集プルダウンメニューから「ヘッダー」を選び、ロゴの「画像選択」ボタンをクリックします。
「ファイルを追加」ボタンをクリックし、「logo.png」を選択し、「ファイルを取り込む」ボタンをクリックします。
最適化：「最適化」ボタンをクリックすると、画面表示に最適なサイズに圧縮されます。
（対象はpngファイルとjpgファイルのみになります）
ロゴが設定されました。
必要に応じて位置を微調整します。
「保存する」ボタンをクリックします。

カバーを設定する

テンプレート編集プルダウンメニューから「カバー」を選び、
「画像選択」ボタンをクリックします。
「ファイルを追加」ボタンをクリックし、カバー画像を選びます。
「cover_01.jpg」「cover_02.jpg」「cover_03.jpg」をshiftキーを選択して同時に取り込みます。
「最適化」ボタンをクリックしてから「閉じる」ボタンをクリックします。
（この画面はmacの画面です。）
最初に表示したい画像からクリックします。今回は「cover_01.jpg」を選択し、「ファイルを取り込む」ボタンをクリックします。
1番目の画像が設定されました。
続いて2番目、3番目に表示したい画像を取り込み、全てを取り込み終えたら「保存する」ボタンをクリックします。
カバー画像からリンク設定を行うこともできます。 スキンの種類によっては画像の効果（トランジション）やスピードを変更できるものもあります。

フッターを設定する

テンプレート編集プルダウンメニューから「フッター」を選び、
以下の内容を設定します。

・フッターナビゲーション　「　」内の文字を入力します。
MENU　：URL「/menu/」
ACCESS：URL「/access/」

・コピーライト　以下の文字を入力します。
&copy 2017 Loos Inc. All Rights Reserved.

「保存する」ボタンをクリックします。

セカンドページ用のデザインテンプレートを設定しよう

メニューバーの「デザイン管理」／「テンプレート管理」を選び、「Loos(TOP)」を複製します。
「Loos(TOP)」にチェックを入れ、「テンプレート操作」／「複製」を選びます。

「複製処理を開始します。よろしいですか？」のダイアログで「OK」をクリックします。

「Loos(TOP)コピー」の名称を「Loos(2ND)」に変更し、メモ欄内のテキストを消去します。
「保存」ボタンをクリックします。

 
セカンドページに不要なカバー画像を消去します。

「Looos(2ND)」テンプレートの「編集」ボタンをクリックします。
テンプレート編集プルダウンメニューから「カバー」を選び、
3つの画像それぞれについている「削除」ボタンをクリックして全ての画像を消去し、「保存する」ボタンをクリックします。

 
以上で、全てのページのテンプレートが完成しました。

ページトップ