################## ヘッダーの作成 ################## ******************************** パーシャルデザインのアイテム作成 ******************************** まずはヘッダーエリアを作成するために、ヘッダーのパーシャルデザインを作成することになります。メニューの「エクスペリエンスアクセラレーター」を開いて、「パーシャルデザイン」のアイコンをクリックすると、作成するためのメニューが表示されます。 .. image:: images/header01.png :align: center :width: 400px :alt: メニュー 「パーシャルデザインを追加」をクリックすると、ダイアログが開きます。今回作成するパーシャルデザインはヘッダーになるため、`Partial Design` を選択してアイテム名を `Header` とします。入力したら OK をクリックします。 .. image:: images/header02.png :align: center :width: 400px :alt: ヘッダーアイテムの作成 作成しているアイテムが何かを確認しやすくするために、メニューの項目から「表示」－「ナビゲーションバー」をチェックします。 .. image:: images/header03.png :align: center :width: 400px :alt: ナビゲーションバーの表示 ******************************** モジュールの配置 ******************************** ヘッダーエリアにモジュールを配置していきます。ヘッダーエリアは、クリックをするとヘッダーと表示される場所となります。 .. image:: images/header04.png :align: center :width: 400px :alt: ヘッダー なおモジュールは右側のエリアに一覧が隠れており、＜ のアイコンをクリックすると表示されます。 .. image:: images/header05.png :align: center :width: 400px :alt: ツールボックス 「ページ構造」のグループにある「スプリッタ（列）」をドラッグ＆ドロップでヘッダーエリアに配置してください。 .. image:: images/header06.png :align: center :width: 400px :alt: ドラッグ＆ドロップ スプリッターが配置されると、以下のような画面になります。 .. image:: images/header07.png :align: center :width: 400px :alt: スプリッター配置 スプリッターのエリアは2つ出来上がっており、カラムを選択することが可能です（下図は左側のカラムを選択）。 .. image:: images/header08.png :align: center :width: 400px :alt: カラム スプリッターの基本設定としては、12分割する形となっており、配置したときには２つは 6 のサイズが割り当てられています。今回は左側にロゴを配置する、という形で左側を 4 、右側を 8 というサイズに変更します。まず、左側のカラムを選択した際に、以下のボタンをクリックしてください。 .. image:: images/header09.png :align: center :alt: アイコン 以下のようなダイアログが表示されます。 .. image:: images/header10.png :align: center :width: 400px :alt: ダイアログ 今回は左側のカラムを 4 に設定するために、一番上の数字を 6 から 4 に変更をして、OK を押します。すると、サイズが変わることがわかります。 .. image:: images/header11.png :align: center :width: 400px :alt: 設定後 同じ手順を右側のカラムに対しても変更します。右側のカラムは 6 を 8 に変更します。 .. image:: images/header12.png :align: center :width: 400px :alt: 設定後その２ カラムの設定変更を完了させたので、続いてモジュールを配置していきます。左側には「メディア」グループにある「画像」をドラッグ＆ドロップします。 .. image:: images/header13.png :align: center :width: 400px :alt: 画像を配置 右側のエリアには「検索」グループにある「検索ボックス」をドラッグ＆ドロップします。 .. image:: images/header14.png :align: center :width: 400px :alt: 検索ボックスを配置 ダイアログが開きますが、今回は「デフォルト」を選択して OK　を押してください。 .. image:: images/header15.png :align: center :width: 400px :alt: デフォルトを設定 結果は以下のような画面となります。 .. image:: images/header16.png :align: center :width: 400px :alt: 配置した結果 左上の保存のアイコンをクリックしてください。ここまで作成した内容を保存することができます。 ******************************** ナビゲーションの追加 ******************************** ここでグローバルメニューをヘッダーエリアに追加します。ナビゲーションアイテムを選択し、ドラッグ＆ドロップでスプリッターの下に配置します。 .. image:: images/header17.png :align: center :width: 400px :alt: ナビゲーションを配置 配置すると、すでに作成をしておいたアイテムをベースとしたナビゲーションが作成されています。 .. image:: images/header18.png :align: center :width: 400px :alt: ナビゲーションの情報を参照 ナビゲーションの設定を変更するために、カラムのサイズを変更したときのアイコンを改めてクリックします。 .. image:: images/header09.png :align: center :alt: アイコン ここでは「スタイリング」の中にある設定で、「メインナビゲーション - 垂直ドロップダウン」を選択します。 .. image:: images/header19.png :align: center :width: 400px :alt: 設定を変更 変更をすると、ドロップダウンメニューに切り替わります。 .. image:: images/header20.png :align: center :width: 400px :alt: メニュー項目の変更 これでヘッダーエリアの作業を一度終了させます。 ************* 参考動画 ************* .. raw:: html