PC表示のレイアウト設定

◆PC表示のパーツレイアウト
※「画像なし」の場合のパーツレイアウトは、画像パーツ以外「画像あり」と同様です。

PC表示の設定例

◆例1

※1 サブリンクパーツの追加や編集はこちら
　　→ 「ヘッダーリンクパーツ / サブリンクパーツの設定」
※2 区切り線の設定はこちら → 「区切り線の設定」
※3 ヘッダーリンクパーツの追加や編集はこちら
　　→ 「ヘッダーリンクパーツ / サブリンクパーツの設定」
※4 階層化についてはこちら → 「ヘッダーリンクパーツの階層化設定 / 解除」

◆例2

※1 全体背景の設定はこちら → 「全体背景の設定」
※2 ハイライトの設定はこちら → 「ハイライトの設定」
※3 下線の設定はこちら → 「下線の設定」
※4 2段目の背景設定はこちら → 「2段目背景の設定」

PCのレイアウト変更手順

1. ヘッダーセクションをクリック。
2. 「PC表示」をクリック。
3. レイアウトを選択。
   ・画像赤枠内のレイアウトを選択した場合、サブリンクパーツの設定が
   　可能になります。
   　サブリンクパーツの設定は以下をご参照ください。
   　→ 「ヘッダーリンクパーツ / サブリンクパーツの設定」
   

   ・サブリンクパーツは階層化できません。
   　ヘッダーリンクパーツの階層化については以下をご参照ください。
   　→ 「ヘッダーリンクパーツの階層化設定 / 解除」

4. 「OK」で確定。
5. 以上が、PCのレイアウト変更手順です。
   公開サイトへ反映するには「サイト更新」をクリックしてください。

スマホ表示のレイアウト設定

◆スマホ表示のパーツレイアウト
※「画像なし」の場合のパーツレイアウトは、画像パーツ以外「画像あり」と同様です。

◆パーツの表示非表示設定
バーガー表示の場合に限り、メニュー内の「ヘッダーリンクパーツ」「サブリンクパーツ」
「ボタンパーツ」「テキストパーツ」の表示非表示設定ができます。
設定方法はこちら → 「バーガー表示のパーツ表示非表示設定」

スマホ表示の設定例

◆例1

※1 全体背景の設定はこちら → 「全体背景の設定」
※2 ヘッダーリンクパーツの追加や編集はこちら
　　→ 「ヘッダーリンクパーツ / サブリンクパーツの設定」
※3 区切り線の設定はこちら → 「区切り線の設定」
※4 2段目の背景設定はこちら → 「2段目背景の設定」

◆例2

※1 バーガーアイコン色の設定はこちら → 「スマホバーガーの設定」
※2 バーガー内背景の設定はこちら → 「スマホバーガーの設定」
※3 展開アイコンの設定はこちら → 「展開アイコンの設定」
※4 階層化についてはこちら → 「ヘッダーリンクパーツの階層化設定 / 解除」
※5 階層アイコンの設定はこちら → 「階層アイコンの設定」
※6 テキストの位置の設定はこちら → 「テキスト位置の設定」
※7 サブリンクパーツの追加や編集はこちら
　　→ 「ヘッダーリンクパーツ / サブリンクパーツの設定」
※8 三角アイコンの設定はこちら → 「三角アイコンの設定」

スマホのレイアウト変更手順

1. ヘッダーセクションをクリック。
2. 「スマホ表示」をクリック。
3. レイアウトを選択。
   階層化設定をしている場合はバーガー表示のみ選択可能です。
4. 「OK」で確定。
5. 以上が、スマホのレイアウト変更手順です。
   公開サイトへ反映するには「サイト更新」をクリックしてください。

バーガー表示のパーツ表示非表示設定

・バーガー表示の場合に限り、表示させたい項目の設定ができます。
・表示切り替えを「スマホ表示」、レイアウトはスマホ表示で「バーガー」を選択してください。

1. ヘッダーセクションをクリック。
2. 「スマホ表示」をクリック。
3. 下へスクロールし、表示したい項目のアイコンをクリック。
   「メインメニュー」「サブメニュー」「ボタン」「追加テキスト」の
   表示非表示が可能です。
4. 「OK」で確定。
5. 以上が、パーツの表示非表示設定手順です。
   公開サイトへ反映するには「サイト更新」をクリックしてください。

階層化の設定

1. ヘッダーリンクをクリック。
2. 「リンク」をクリック。
3. 子階層にしたいヘッダーリンクを、親リンクの右下へドラッグ。
   
   ・右側にずらすようドラッグすると設定がしやすいです。

   「OK」で確定。

4. 以上が、階層化の設定手順です。
   公開サイトへ反映するには「サイト更新」をクリックしてください。

階層化の解除

左側にドラッグしてもうまくいかない場合は、一度上にドラッグすることで 解除できます。
その後、お好みの場所にドラッグしてください。

ヘッダーのレイアウトの変更

ヘッダーは、「PC表示」「スマホ表示」それぞれでレイアウトを設定できます。
設定方法はこちら → 「ヘッダーのレイアウト変更」

※選択したレイアウトによって表示されるパーツが異なります。

ヘッダーの背景の変更

設定できる背景の種類

◆背景が設定できる場所には以下の4種類があります。

1.全体背景
　ヘッダーセクション全体の背景を設定できます。

2.PCの２段目背景
　パソコン表示で2段目があるレイアウトを選択した場合、2段目のみの背景を設定できます。

3.スマホの2段目背景
スマホ表示で2段目があるレイアウトを選択した場合、2段目のみの背景を設定できます。

4.スマホバーガー内の背景
　スマホ表示でバーガータイプのレイアウトを選択した場合、バーガー内の背景設定と、
　バーガーアイコン（3本線）の色を変更できます。

全体背景の設定

◆全体背景の変更

1. ヘッダーセクションをクリック。
2. 「背景」をクリック。
3. 背景の設定。
   
   背景の設定についてはこちら → 「背景の設定」
4. 「OK」で確定。
5. 以上が、全体背景色の変更手順です。
   公開サイトへ反映するには「サイト更新」をクリックしてください。

◆枠線の設定

1. ヘッダーセクションをクリック。
2. 「枠線」をクリック。
3. 「表示位置」を選択。
4. 「形状」を選択。
5. 色を選択。
   
   色の詳細設定についてはこちらをご参照ください
   → 背景の設定「詳細設定をする」
6. 「OK」で確定。
7. 以上が、枠線の設定手順です。
   公開サイトへ反映するには「サイト更新」をクリックしてください。

2段目背景の設定

・2段目があるレイアウトを選択した場合、全体背景とは別に2段目の背景を変更することが
　できます。
・PC表示とスマホ表示で別々の２段目背景を設定することができます。
・ここではPC表示を例にとってご説明いたしますが、設定手順はスマホ表示も同様です。

1. ヘッダーセクションをクリック。
2. PCまたはスマホ表示をクリック。
3. 2段目があるレイアウトを選択。
4. 2段目の背景設定。
   
   背景の設定についてはこちら → 「背景の設定」
5. 「OK」で確定。
6. 以上が、2段目背景の変更手順です。
   公開サイトへ反映するには「サイト更新」をクリックしてください。

スマホバーガーの設定

◆バーガー内の背景変更

1. ヘッダーセクションをクリック。
2. 「スマホ表示」をクリック。
3. レイアウトでバーガーを選択。
4. バーガーメニューの背景色を選択。
   
   背景の設定についてはこちら → 「背景の設定」
5. 「OK」で確定。
6. 以上が、背景色の変更手順です。
   公開サイトへ反映するには「サイト更新」をクリックしてください。

◆アイコン色の変更

1. ヘッダーセクションを選択。
2. 「スマホ表示」をクリック。
3. レイアウトでバーガーを選択。
4. アイコン色を選択。
   
   色の詳細設定についてはこちらをご参照ください
   → 背景の設定「詳細設定をする」
5. 「OK」で確定。
6. 以上が、アイコン色の変更手順です。
   公開サイトへ反映するには「サイト更新」をクリックしてください。

ヘッダーリンク / サブリンクのフォントと文字色の変更

・ヘッダーリンクパーツ / サブリンクパーツの装飾は、PCとスマホで別々の見た目に
　設定ができます。
・スマホ表示でサブリンクパーツが設置できるのは、レイアウトでバーガータイプを
　選択した場合のみです。
・フォントの種類と文字色の変更手順はPCとスマホ共通です。
・ここでは、ヘッダーリンクパーツを例にとってご説明しますが、
　サブリンクパーツの変更手順も同様です。

1. ヘッダーリンクパーツをクリック。
   スマホの装飾をする場合はスマホに表示切り替えをしてください。
2. 装飾の編集をしたい方をクリック。
3. 「フォント」と「文字色」の設定。
   
   設定方法は以下をご参照ください。
   → フッターの設定「フッターリンクの装飾」
4. 「OK」で確定。
5. 以上が、フォントと文字色を変更する手順です。
   公開サイトへ反映するには「サイト更新」をクリックしてください。
   さらに装飾について知りたい場合は以下をご参照ください。
   → 「ヘッダーリンクパーツの装飾をカスタマイズ」

PC表示の装飾

フォントの設定

1. ヘッダーリンクパーツをクリック。
   
2. 「PC装飾」をクリック。
3. 「フォント」の種類を選択。
4. フォントの色を選択。
   詳細設定については以下をご参照ください。
   → 背景の設定「詳細設定をする」
5. 「OK」で確定。
6. 以上が、フォントの設定手順です。
   公開サイトへ反映するには「サイト更新」をクリックしてください。

区切り線の設定

ヘッダーリンク / サブリンクの間に区切り線を入れることができます。
サブリンクの設定は、ヘッダーリンクの設定手順と同様です。

1. ヘッダーリンクパーツをクリック。
   
2. 「PC装飾」をクリック。
3. 下へスクロールし「区切り線」の種類を選択。
4. 区切り線の色を選択。
   
   詳細設定については以下をご参照ください。
   → 背景の設定「詳細設定をする」
5. 「OK」で確定。
6. 以上が、区切り線の設定手順です。
   公開サイトへ反映するには「サイト更新」をクリックしてください。

ハイライトの設定

ハイライトをつけた場合、現在選択中のページが分かりやすくなります。
スマホにはハイライト設定はありませんが常にハイライトがついています。

1. ヘッダーリンクパーツをクリック。
2. 「PC装飾」をクリック。
3. 「ハイライト」を選択。
4. 上へ戻り「OK」で確定。
5. 以上が、ハイライトの設定手順です。
   公開サイトへ反映するには「サイト更新」をクリックしてください。

下線の設定

下線をつけた場合、現在選択中のページが分かりやすくなります。
また、ハイライトを付けた場合と付けない場合とでは下線の見え方が変わります。

1. ヘッダーリンクパーツをクリック。
2. 「PC装飾」をクリック。
3. 「下線」を選択。
4. 下線の色を選択。
   
   詳細設定については以下をご参照ください。
   → 背景の設定「詳細設定をする」
5. 上へ戻り「OK」で確定。
6. 以上が、下線の設定手順です。
   公開サイトへ反映するには「サイト更新」をクリックしてください。

スマホ表示の装飾

スマホ表示の設定をする場合は、表示の切り替えで「スマホ」アイコンを選択してください。

区切り線の設定

ヘッダーリンク / サブリンクの間に区切り線を入れることができます。
サブリンクの設定は、ヘッダーリンクの設定手順と同様です。

1. ヘッダーリンクパーツをクリック。
   
2. 「スマホ装飾」をクリック。
3. 下へスクロールし、区切り線「あり」をクリック。
4. 区切り線の色を選択。
   
   詳細設定については以下をご参照ください。
   → 背景の設定「詳細設定をする」
5. 「OK」で確定。
6. 以上が、区切り線の設定手順です。
   公開サイトへ反映するには「サイト更新」をクリックしてください。

テキスト位置の設定

スマホ表示でバーガータイプのレイアウトを選択時のみテキストの位置設定が可能です。

1. ヘッダーリンクをクリック。
2. 「スマホ装飾」をクリック。
3. 「テキストの位置」を選択。
4. 「OK」で確定。
5. 以上が、テキスト位置の変更手順です。
   公開サイトへ反映するには「サイト更新」をクリックしてください。

三角アイコンの設定

スマホ表示でバーガーメニューのテキスト位置を左にした場合、
三角アイコンの位置と色の設定が可能です。

1. ヘッダーリンクパーツをクリック。
2. 「スマホ装飾」をクリック。
3. テキストの位置で「左」を選択。
4. 「三角アイコン」を選択。
5. アイコンの色を選択。
   
   詳細設定についてはこちらをご参照ください
   → 背景の設定「詳細設定をする」
6. 上へ戻り「OK」で確定。
7. 以上が、三角アイコンの設定手順です。
   公開サイトへ反映するには「サイト更新」をクリックしてください。

展開アイコンの設定

階層化設定をした場合、展開アイコンの色を変更することができます。
階層化についてはこちら → 「ヘッダーリンクパーツの階層化設定 / 解除」

1. ヘッダーリンクパーツをクリック。
2. 「スマホ装飾」をクリック。
3. 下へスクロールし、展開アイコンの色を選択。
   
   詳細設定についてはこちらをご参照ください
   → 背景の設定「詳細設定をする」
4. 上へ戻り「OK」で確定。
5. 以上が、展開アイコンの設定手順です。
   公開サイトへ反映するには「サイト更新」をクリックしてください。

階層アイコンの設定

階層化設定をした場合、階層アイコンの色を変更することができます。
階層化についてはこちら → 「ヘッダーリンクパーツの階層化設定 / 解除」

1. ヘッダーリンクパーツをクリック。
2. 展開アイコンをクリック。
3. 「スマホ装飾」をクリック。
4. 下へスクロールし、階層アイコンの色を選択。
   
   詳細設定についてはこちらをご参照ください
   → 背景の設定「詳細設定をする」
5. 上へ戻り「OK」で確定。
6. 以上が、展開アイコンの設定手順です。
   公開サイトへ反映するには「サイト更新」をクリックしてください。

ヘッダーリンクパーツのデザイン設定

◆パーツをクリックして編集します。

エキスパへ移動するには

1. サイポン画面右上のアカウント名をクリック。
   
2. 「エキスパ」をクリック。
   
   
   はじめてエキスパにログインする場合はアカウント情報の確認画面が表示されます。
   内容を確認して「エキスパの利用開始」をクリックしてください。
3. 以上が、サイポンからエキスパへの移動方法です。