「レイアウトについて（2）」
フリーパーツの作成・追加方法
１．ページの上で右クリックし、表示されたショートカットメニューから
[レイアウト] → [レイアウトを変える]を選択すると、"レイアウトダイアログ”が表示されます。
※コントロールパネル＞デザイン＞レイアウトを変えるからも"レイアウトダイアログ”を開くことができます。
２．ダイアログの[パーツの追加]ボタンをクリックします。
※“レイアウトダイアログ”左のパーツリストにある「フリーパーツ」の[追加]ボタンからもフリーパーツの追加をすることができます。
３．【全般設定】タブに必要事項を入力します。
| タイトル | フリーパーツのタイトルを入力します。 |
|---|---|
| ステータス |
サイト公開の際にこのフリーパーツを一般に公開するかどうかを設定します。
|
４．【パーツ】タブをクリックし、掲載したい内容を自由に編集します。
5．[OK]ボタンをクリックすると完了です。
注意
-
レスポンシブのサイトデザインを使用の場合はモバイルサイト用の表示設定はできません。
レスポンシブ以外のサイトデザインをご使用の場合でモバイルサイトの表示内容をパソコンの表示と変更したい場合は、【モバイル】タブをクリックして、モバイルサイト用に本文を編集してください。
モバイルサイト用に本文を編集しない場合は、パソコンと同じく【本文】タブの内容が表示されます。
作成したフリーパーツのページ設置方法
追加したフリーパーツをページに配置する場合は、レイアウトで該当するフリーパーツを配置してください。
フリーパーツの設置方法について詳しくはこちらをご確認ください。
【レイアウト設定方法】
今回はレイアウト内の【HEADER】にフリーパーツでバナーを作成して挿入します。
フリーパーツ《バナー》の作成
フリーパーツの作り方について詳しくは上記のフリーパーツの作成・追加方法をご確認ください。
レイアウト画面
【HEADER】に作成した《バナー》のパーツを挿入、OKボタンを押します。
実際の画面
【HEADER】部分に《バナー》パーツが挿入されました。
ページデザイン
ページデザインとは
ページデザインを変えることでTOPページとフリーページでの見せ方を変えたりすることができます。
ant2でご用意しているレスポンシブのサイトデザインでは全て1カラム・2カラムに対応しており、ページデザインから各ページに設定することができます。
サイトデザイン・カラムとは
サイトデザイン
サイトデザインには現在、1カラム、2カラム、3カラム、レスポンシブの4種類があります。
サイトデザインでは各カラムが既にページデザインに設定されたデザインとレスポンシブデザイン（1カラムまたは2カラムに設定）を選ぶことができます。
注意
- 1~3カラムのサイトデザインではカラム数がテンプレートとして設定されていますので、
ページデザインからカラム数を変更することはできませんのでご注意ください。
※1カラムのページデザイン内default.htmは1カラム、2カラムのdefault.htmは2カラム、3カラムのdefault.htmは3カラムとなります。
カラム
「カラム」とはWebサイトの段組を指します。
用途やサイトやページ内の情報量、ユーザーのサイトの使いやすさを優先してカラム数を決定する必要があります。
カラムの変更はページデザインから変更することができます。
ページデザインの設定方法
- テンプレートを変更したいページを開き、コントロールパネルの[作成] → [デザイン] → [ページデザインを変える]をクリックします。
- “ページデザインダイアログ”が表示され、現在表示をしているページの設定を行います。
- [OK]ボタンをクリックして完了です。
| default.htm | レスポンシブのサイトデザインでは1カラムとして設定されています。（例外あり） |
|---|---|
| column2.htm | ページデザイン用に2カラムに設定することができます。 |
| top.htm | トップページ専用のページデザイン（サイトデザインによってはないものもございます） |
注意
- default.htmは新規でページを作成した時に適用されるページデザインとなっており、選択したサイトデザイン内でメインとなるカラム数が設定されています。
※トップページに特化したページデザイン用のtop.htmが含まれているかどうかはテンプレートによります。
また、type20のサイトデザインのみ仕様が異なり、default.htmが2カラムで、1カラム用のページデザインが含まれています。
| テンプレート |
該当ページに適用しているテンプレートを設定します。
※「default.htm」、「column2.htm」など、サイトデザインによって指定できるページデザイン用テンプレートは異なります。 |
|---|
1カラムに設定した場合
レスポンシブのサイトデザイン使用であれば基本的にdefault.htmに設定されています。（一部のサイトデザインを除く）
実際の画面
2カラムに設定した場合
実際の画面
2カラムに作成したフリーパーツ《バナー》を挿入した場合
レイアウト画面
実際の画面
レスポンシブには1カラムと2カラム以外は含まれていないため、
ページデザインで設定できるカラム外のカラム数のデザインが欲しい場合はカスタマイズを行う必要があります。
個別レイアウトの複製方法
個別レイアウトで作成したレイアウトを他のページで使用したい場合には既存レイアウトの複製を行うことができます。
１．既に別のページに適用されているレイアウトを元に作成する場合は[既存レイアウトの複製]ボタンをクリックします。
２．[既存レイアウトの複製]ボタンをクリックした場合、現在利用されているレイアウトの一覧が表示されますので、その中から複製したいレイアウトをチェックして[OK]ボタンをクリックしてください。
注意
- [既存レイアウトの複製]を選択した場合、作成元のレイアウトを複製して新規でレイアウトを作成するため、作成元のレイアウトは連動していませんのでご注意ください。
例：Newsのレイアウト（個別）を複製して、新しくNews2というタイトルで個別レイアウトを作成した場合、Newsのレイアウト内容を変更してもNews2 を複製後であれば変更内容はNews2 には反映されません。
また、反対にNews2 のレイアウト内容を変更しても、Newsに変更内容は反映されません。
モバイルレイアウトのレイアウトの変更方法
１．モバイルレイアウトを変更したいページ上で右クリックをして、表示されたショートカットメニューから[レイアウト] → [モバイルレイアウトを変える]をクリックします。
２．モバイルレイアウトダイアログ”が表示されますので、左側のパーツリストの中から、使用したいパーツを配置したいブロックまでドラッグで移動させます。配置されているパーツを外したいときは、外したいパーツをドラッグして左側のパーツリストのエリア内に戻します。
レイアウトからモバイルレイアウトへの切り替え方法
パソコン用の“レイアウトダイアログ”からモバイルレイアウトに切り替える場合は、ダイアログの上部の[モバイルレイアウト]をクリックします。
同様にモバイルレイアウトからレイアウトへも同じ方法で切り替えすることができます。
