スマートフォン向けに調整しよう
自動的に作成されたスマートフォン用ページを見やすく調整します。
自動作成されたページを、スマートフォンでの表示に合わせて調整しましょう。
※このマニュアルはbingo!CMS1.7.0を使用しています。最新版とは一部仕様が異なります。
画像の準備をしよう
ページの調整に入る前に、スマートフォンで表示するには大きすぎるファイルをbingo!CMSの機能を使ってリサイズします。
メニューバーから「素材管理」／「ライブラリ」を選択し、「ライブラリ」をクリックして全てのファイルを表示します。
「cover_01.jpg」にチェックを入れ、「素材ファイル操作」メニューから「画像を編集する」を選びます。
「比率固定」のチェックを外し、「横幅／高さ」の横幅を800pxに変更します。
トリミング後の画像の大きさが表示され、削除される部分には黒いレイヤーがかかります。
画像が表示されている部分をドラッグで動かすとトリミング位置を調整できます。
トリミング位置が決まったら、「SPcover_01.jpg」と名前を変えて「保存」ボタンをクリックします。
ライブラリ画面に戻り、「SPcover_01.jpg」の「最適化」ボタンをクリックします。最適化済みのファイルが作成されます。
同様に他のファイルも縮小します。
「section_02_bg.jpg」の画像編集画面を開き、
「比率固定」のチェックを外し、画像の大きさを「80%」に、「横幅／高さ」の横幅を550px高さを300pxに変更します。
トリミング後の画像の大きさが表示されるので、表示したい部分を選び、「SPsection_02_bg.jpg」と名前を変えて「保存」ボタンをクリックします。ライブラリ画面に戻り、「最適化」ボタンをクリックします。
「section_01_bg.jpg」の画像編集画面を開き、
「比率固定」のチェックを外し、「横幅／高さ」の横幅を550px高さを300pxに変更します。トリミング後の画像の大きさが表示されるので、表示したい部分を選び、「SPsection_01_bg.jpg」と名前を変えて「保存」ボタンをクリックします。ライブラリ画面に戻り、「最適化」ボタンをクリックします。
「section_01_boat_bg」の画像編集画面を開き、
「比率固定」のチェックを外し、画像の大きさを「70%」に、「横幅／高さ」の横幅を550px高さを300pxに変更します。トリミング後の画像の大きさが表示されるので、表示したい部分を選び、「SPsection_01_boat_bg」と名前を変えて「保存」ボタンをクリックします。ライブラリ画面に戻り、「最適化」ボタンをクリックします。
トップページ用のテンプレートを用意しよう
メニューバーの「デザイン管理」／「テンプレート管理」を選び、
「スマートフォン用」タブを選択します。
「初期スマートフォン用テンプレート」にチェックを入れ、「テンプレート操作」／「複製」を選びます。
「複製処理を開始します。よろしいですか？」のダイアログで「OK」をクリックします。
「スマートフォン用」タブを選択します。
「初期スマートフォン用テンプレートのコピー」をクリックしテンプレート名称を「LoosSP(TOP)」に変更します。
メモ欄内のテキストを消去し保存します。
スマートフォン用TOPを設定しよう
「スマートフォン用」タブを選択し、「「LoosSP(TOP)」」テンプレート編集の編集ボタンをクリックします。
ロゴを設定しよう
「ファイルを追加」ボタンをクリックし、「logo.png」を選択し、「ファイルを取り込む」ボタンをクリックします。 （jpgファイルの場合は、「最適化」ボタンをクリックすると、画面表示に最適なサイズに圧縮されます。pngファイル及びgifファイルの場合はクリックしません。）
ロゴが設定されました。
「保存する」ボタンをクリックします。
カバーを設定しよう
テンプレート編集プルダウンメニューから「カバー」を選び、「画像選択」ボタンをクリックします。
「ファイルを追加」ボタンをクリックし、カバー画像「SPcover_01.jpg」「SPcover_02.jpg」「SPcover_03.jpg」を選択して取り込みます。
（jpg画像を取り込む際は「最適化」ボタンをクリックしてから「閉じる」ボタンをクリックします。）
最初に表示したい画像を上から順に設定します。今回は「SPcover_01.jpg」を最初にクリックします。
続いて2番目、3番目に表示したい画像を取り込み、全てを取り込み終えたら「保存」ボタンをクリックします。
カバー画像からリンク設定を行うこともできます。
フッターを設定しよう
テンプレート編集プルダウンメニューから「フッター」を選び、以下の内容を設定します。
・フッターナビゲーション 「 」内の文字を入力します。
MENU ：URL「/menu/」
ACCESS：URL「/access/」
・コピーライト 以下の文字を入力します。
© 2017 Loos Inc. All Rights Reserved.
「すべての項目を保存する」ボタンをクリックします。
セカンドページ用のテンプレートを設定しよう
メニューバーの「デザイン管理」／「テンプレート管理」を選び、「スマートフォン用」タブを選択します。
・「LoosSP(TOP)」にチェックを入れ、「テンプレート操作」／「複製」を選びます。
・「複製処理を開始します。よろしいですか？」のダイアログで「OK」をクリックします。
・「スマートフォン用」タブを選択しLoosSP(TOP)のコピー」をクリックします。
・テンプレート名称を「LoosSP(2ND)」に変更して、メモ欄内のテキストを消去します。
「保存」ボタンをクリックします。
セカンドページに不要なカバー画像を消去します。
「スマートフォン用」タブを選択し、「LoosSP(2ND)」のテンプレート編集の編集ボタンをクリックします。
・テンプレート編集プルダウンメニューから「カバー」を選びます。
・3つの画像それぞれについている「削除」ボタンをクリックして全ての画像を消去し、「すべての項目を保存する」ボタンをクリックします。
以上で、スマートフォン用ページのテンプレートが完成しました。
テンプレートを割り当てよう
制作したテンプレートを各ページに割り当てます。
「メニュー＆ページ管理」メニューの「HOME」にチェックを入れ、「メニュー操作」／「スマートフォンテンプレートを変更する」を選びます。
「公開用」「編集用」ともに「LoosSP(TOP)」を選び、「保存」ボタンをクリックします。
「MENU」「ACCEESS」ページは「LoosSP(2ND)」を選び、「保存」ボタンをクリックします。
「HOME」インデックスページの表示を調整しよう
「メニュー＆ページ管理」メニューの「HOME」／「HOME-インデックスページ」の「ページ編集」ボタンをクリックし、編集画面を表示します。
ページ上部のツールバー「VIEW」欄にある「SP」ボタンをクリックすると、編集画面がスマートフォン表示用に切り替わります。
同じくツールバー「PREVIEW」欄にある「SP」ボタンをクリックして、プレビュー画面を表示します。
スマートフォンのプレビューが表示されます。
画像の配置や余白など、調整が必要な部分を確認します。
1行目の設定を調整しよう
1行目に配置したユニットのポップアップメニュー「コンテナEDIT」アイコンをクリックしてコンテナ編集画面を開きます。
「SP」タブをクリックし、Aの設定を下記の通り行います。
パディング： 左：20 ／ 上：20 ／ 右：20 ／ 下：20
背景色 ：「f7f7f5」
「保存」ボタンをクリックします。
１行目に配置したユニットのポップアップメニュー左端「EDIT」をクリックしてユニットの編集画面に入ります。
「SP用デザインオプションの設定を使用する」をクリックし、下方スペースを「標準」にします。
「保存」ボタンをクリックします。
2行目を調整しよう
2行目に配置したユニットのポップアップメニュー「コンテナEDIT」アイコンをクリックしてコンテナ編集画面を開きます。
「SP」タブをクリックし、Aのパディング設定を行います。
左：20 ／ 上：20 ／ 右：20 ／ 下：20
スマートフォンでは背景が適正に表示されないので、背景画像「削除」にチェックを入れます。
「保存」ボタンをクリックします。
背景画像の代わりに、画像を配置します。
テキストの上段に「画像のみ」ユニットを追加し、ポップアップメニューの「EDIT」アイコンをクリックして編集画面に入ります。
「ユニット設定」のタブをクリックします。
「表示設定」のPCアイコンをクリックしアイコンをグレーアウトします。
この「画像のみ」ユニットはPC表示用の画面には表示されなくなります。
「ファイル選択」で使用する画像を選びます。
「保存」ボタンをクリックします。
「スマートフォン設定」のタブをクリックします。
「SP用デザインオプションの設定を使用する」をクリックし「下方スペース」を「標準」にします。
「保存」ボタンをクリックします。
「スマートフォン設定」のタブをクリックします。
「表示設定」の「PC」アイコンをクリックして非表示にする（グレーアウトします）。
「ファイル選択」で使用する画像を選ぶ。
「SP用デザインオプションの設定を使用する」をクリックし「下方スペース」を「標準」にします。
「保存」ボタンをクリックします。
3行目を調整しよう
3行目も1行目と同様の設定を行います。
コンテナモードに切り替え、「SP」タブをクリックし、Aの設定を下記の通り行います。
パディング： 左：20 ／ 上：20 ／ 右：20 ／ 下：20
背景色 ：「f7f7f5」
「保存」ボタンをクリックします。
以上で「HOME」インデックスページのスマートフォン表示の調整が終了しました。
「MENU」インデックスページの表示を調整しよう
「メニュー＆ページ管理」メニューの「MENU」／「MENU-インデックスページ」の「ページ編集」ボタンをクリックし、編集画面を表示します。
ページ上部のツールバー「VIEW」欄にある「SP」ボタンをクリックすると、編集画面がスマートフォン表示用に切り替わります。
同じくツールバー「PREVIEW」欄にある「SP」ボタンをクリックして、プレビュー画面を表示します。
画像の配置や余白など、調整が必要な部分を確認します。
1行目を調整しよう
1行目に配置したユニットのポップアップメニュー「コンテナEDIT」アイコンをクリックしてコンテナ編集画面を開きます。
「SP」タブをクリックし、Aのパディング設定を行います。
左：20 ／ 上：20 ／ 右：20 ／ 下：20
スマートフォンでは背景が適正に表示されないので、背景画像が入って入れば「削除」にチェックを入れます。
「保存」ボタンをクリックします。
「HOME」インデックスページ2行目の手順と同じように、背景画像の代わりに「画像のみ」ユニットを使用して画像を設置します。
2行目以降を調整しよう
ページ編集画面をコンテナモードに切り替え、2行目のコンテナのポップアップメニュー「EDIT」からコンテナ編集画面に入ります。
「SP」タブをクリックし、Aのパディング設定を行います。
左：20 ／ 上：20 ／ 右：20 ／ 下：20
「保存」ボタンをクリックします。
ユニットモードに切り替え、画像の設定を変更します。
「SP用デザインオプションの設定を使用する」をクリックし、下方スペースを「標準」にします。
「保存」ボタンをクリックします。
同様に2行目以降全てのコンテナと画像の設定を変更します。
以上で「MENU」インデックスページのスマートフォン表示の調整が終了しました。
「ACCESS」インデックスページの表示を調整しよう
「メニュー＆ページ管理」メニューの「ACCESS」／「ACCESS-インデックスページ」の「ページ編集」ボタンをクリックし、編集画面を表示します。
ページ上部のツールバー「VIEW」欄にある「SP」ボタンをクリックすると、編集画面がスマートフォン表示用に切り替わります。
同じくツールバー「PREVIEW」欄にある「SP」ボタンをクリックして、プレビュー画面を表示します。
画像の配置や余白など、調整が必要な部分を確認します。
1行目を調整しよう
1行目に配置したユニットのポップアップメニュー「コンテナEDIT」アイコンをクリックしてコンテナ編集画面を開きます。
「SP」タブをクリックし、Aのパディング設定を行います。
左：20 ／ 上：20 ／ 右：20 ／ 下：20
スマートフォンでは背景が適正に表示されないので、背景画像が入って入れば「削除」にチェックを入れます。
「保存」ボタンをクリックします。
「HOME」インデックスページ2行目の手順と同じように背景画像の代わりに「画像のみ」ユニットを使用して画像を設置します。
設定が終了しました。
2行目を調整しよう
最後に、2行目「Adress」のコンテナ調整をします。
・「コンテナEDIT」アイコンをクリックしてコンテナモードに切り替えます。
・「SP」タブをクリックし、Aのパディング設定を行います。
左：20 ／ 上：20 ／ 右：20 ／ 下：20
「保存」ボタンをクリックします。
以上で「ACCESS」インデックスページのスマートフォン表示の調整が終了しました。
プレビュー画面を確認し、問題がなければマニュアル「(4)ページの基本設定をして公開しよう」を参考にページを公開しましょう。
前へ戻る
>（5）ページを作成しようへ