ページデザイナー

トップページのデザインを簡単に変更できる機能です。指定のテンプレートに従ってお客様自身で画像や文言を変更いただけます。
※こちらの機能はデザインカスタマイズもしくは専用サーバー をご契約のお客様が対象です。
※ページデザイナーで作成したデザインと、HTML/CSSで記述したデザインは同時に利用することはできません。
※お客様がページデザイナーをご利用することで発生した問題につきましては、弊社では対応いたしかねます。
　発生する可能性がある問題について、詳しくはこちらをご参照ください。

目次

• 01ページデザイナーの使い方

• 02デザインの変更方法
• 画像をアップロードする
• 個別のパネルを編集する
• 作成したデザインをトップページに設定する

• 03パネルの入れ替え・追加
• パネルを入れ替える
• パネルを追加する

更新履歴

2022.03.09 / Ver.2.17よりページデザイナー機能が追加されました。使い方

ページデザイナーの使い方

　　　　

01サイトカスタマイザーを開く

サイドメニューから「設定」＞「サイトカスタマイザー」をクリックします。

　　　　

02「デザイン」をクリックする

　　　　

03「トップページを編集する」をクリックする

　　　　

04ページデザイナーが表示される

デザインの変更方法

　　　　

01テンプレートを選択する

検定・販売向け（template-B）、社内研修向け（template-C）からご希望のテンプレートを選択し、「適用する」をクリックします。
今回は例として、検定・販売向け（template-B）を選択します。
※パネルは後から追加・削除できます。

あとからログイン画面のみ（template-A）に変更したいとき

システム上、ページデザイナーのテンプレート選択画面でログイン画面のみ（template-A）に変更することはできません。
template-Aに変更したい場合は、ページデザイナーをオフにしてから、サイトカスタマイザーの歯車ボタン＞「テーマの変更」からtemplate-Aを選択してください。
ログイン画面の画像の変更についてはサイトカスタマイザー基本設定をご覧ください。

02パネルを編集する

選択したテンプレートが表示されたら、それぞれのパネルを編集します。
パネル右上の︙アイコンをクリックし、「編集」をクリックします。

　　　　

03個別編集用のモーダルが表示される

　　　　 　　　　

画像をアップロードする

　　　　

01画像を追加する

デザインの編集をする前に、システム内に使用する画像を登録します。
最初にすべての画像を登録しておくと、後の作業がスムーズになります。
「画像を追加する」をクリックします。

　　　　

02画像を追加する

別タブで画像登録画面が表示されます。
画像ファイルの「新規作成」をクリックします。

　　　　

03画像を追加する

画像追加用のモーダルが表示されます。
「ファイルを選択」から使用する画像をご自身のフォルダから選択し、「保存」をクリックします。
保存が完了したら、タブを閉じてください。

　　　　

個別のパネルを編集する

　　　　

01項目を設定する

ページデザイナー画面に戻り、それぞれの項目を設定します（※パネルごとに項目が異なります）。設定が完了したら「パネル一覧に戻る」をクリックします。

　　　　

02設定が反映される

タブレット表示/スマートフォン表示タブで、それぞれの見え方を確認できます。
他のパネルも同様に設定していきます。

　　　　

03デザインを保存する

パネルの設定が完了したら、「保存して公開」をクリックします。
※こちらをクリックしないとデザインが保存されないので、ご注意ください。

　　　　

作成したデザインをトップページに設定する

　　　　

01トップページへの反映をOn / Offできます

作成したデザインをトップページに反映させる / させないを切り替えることができます。Onにするとページデザイナーのデザインが設定され、OffにするとページファイルのHTMLデザインが設定されます。状況に応じて使用するデザインを使い分けることができます。

パネルの入れ替え・追加

　　　　

パネルを入れ替える

　　　　

01パネルを入れ替える

検定・販売向け（template-B）、社内研修向け（template-C）からご希望のテンプレートを選択し、「適用する」をクリックします。今回は例として検定・販売向け（template-B）を選択します。
※パネルは後で追加・削除することが可能です

　　　　

02パネルが入れ替わる

パネルが入れ替わります。PC表示の設定でパネルを入れ替えると、タブレット表示 / スマートフォン表示にした際も、そのレイアウトが反映されます。

　　　　

パネルを追加する

　　　　

01「表示項目を追加」をクリックする

　　　　

02「パネルを選択する」をクリックする

　　　　

03パネルを選択する

追加するパネルを選択します。

　　　　

04パネルの設定を完了する

各項目が設定が完了したら、「新規作成」をクリックします。

　　　　

05パネルが追加される

パネルは一番下に追加されますので、適宜順番を入れ替えてください。