HeartCore
HeartCore
HeartCore
HeartCore
ドロップダウン
ドロップダウン
ドロップダウン
ドロップダウンメニュー
メニュー
メニュー
メニュー作成
作成
作成マニュアル
作成
マニュアル
マニュアル
マニュアル
September
September
September
September 2009
2009
2009
2009 Ver1.0
Ver1.0
Ver1.0
Ver1.0
目
目
目
目
次
次
次
次
ADD ADDADDADD----ON ON ON ON ---- HORIZONTAL DROP HORIZONTAL DROP- HORIZONTAL DROP HORIZONTAL DROP-DOWN MENU--DOWN MENUDOWN MENUDOWN MENU ののの使用手順の使用手順について使用手順使用手順についてについて ...について... -...--- 3 3 3 3 --- -1.
1.1.
1.構成要素構成要素として構成要素構成要素としてとしてとして DROPDROPDROP-DROP-DOWN MENU--DOWN MENU をDOWN MENUDOWN MENUををを新規作成新規作成新規作成新規作成しますします。しますします。。 ...。... -...--- 4 4 4 4 --- -2. 2.2. 2.使用使用使用する使用するするするテンプレートテンプレートテンプレートをテンプレートを作成をを作成作成します作成しますしますします。。 ...。。... -....--- 5 5 5 5 --- -3. 3.3. 3.使用使用する使用使用するするするコンテンツページコンテンツページコンテンツページのコンテンツページの作成のの作成作成をします作成をしますをしますをします。。...。。... -...--- 6 6 6 6 --- -4. DROP 4. DROP4. DROP
4. DROP--DOWN MENU--DOWN MENUDOWN MENU のDOWN MENUののの設定設定設定設定... -...--- 7 7 7 7 ---
Add
Add
Add
Add-
--
-On
On
On
On -
--
- Horizontal Drop
Horizontal Drop
Horizontal Drop
Horizontal Drop-
-Down Menu
--
Down Menu
Down Menu の
Down Menu
の
の使用手順
の
使用手順
使用手順
使用手順について
について
について
について
ハートコアで Drop-Down Menu の使用について説明致します。 予め条件として既に追加モジュールから Drop-Down Menu をインポート済みという事で 説明をしていきます。 手順としての流れは以下になります。 1.構成要素として Drop-Down Menu を新規作成します。 2.使用するテンプレートを作成します。 3.使用するコンテンツページの作成をします。 4. Drop-Down Menu の設定。 この流れに沿って手順を説明させていただきます。 手順に合わせて作成する Drop-Down Menu は以下になります。 トップページからページ 1-1 とページ 2-1 があり、ページ 1-1 以下にはページ 1-2 とページ 1-3 が続きま す。ページ 2-1 以下にはページ 2-2 が続きます。
1.
1.
1.
1.構成要素
構成要素
構成要素
構成要素として
として
として
として Drop
Drop
Drop-
Drop
--
-Down Menu
Down Menu を
Down Menu
Down Menu
を
を
を新規作成
新規作成
新規作成
新規作成します
します
します
します。
。
。
。
では、Drop-Down Menu を新規に構成要素として作成していきます。
まず、構成要素のメニューからクラス、tollbar と進み tollbar の一覧から Menu を 選択します。
構成要素の Menu にある
<div class="menu_menu dropdown">
@@@extension:menu(top=0:first=top:levels=9:id=@@@id@@@:list=ul:item=li:special=MSIE6tables)@@@ </div> と、アドバンススクリプトに記述されている<style type="text/css">で始まる CSS のデータを全てコピーし てください。 後はそのコピーしたデータを新しく作成する構成要素に移します。 まず、構成要素のクラスを追加してください。 管理画面の上にある設定メニューから左のコンテンツ、メニューと進んで構成要素のクラスを追加してくだ さい。 名前は任意で構いませんが、例として dropmenu とします。 クラスの追加ができましたら、後はウェブサイトコンテンツから構成要素へと進み、dropmenu にこれから使 用する Drop-Down Menu を追加します。 先程、Menu からコピーしたデータをそのまま移して保存して下さい。 保存する際に付ける名前は任意で構いませんが、例として new_down とします。 これで構成要素のクラス dropmenu に new_down という構成要素ができました。 以上で Drop-Down Menu の新規作成は終了です。
2.
2.
2.
2.使用
使用
使用する
使用
する
する
するテンプレート
テンプレート
テンプレートを
テンプレート
を作成
を
を
作成
作成
作成します
します
します。
します
。
。
。
次に使用するテンプレートを作成します。 ウェブサイトコンテンツからそのままテンプレートを追加して下さい。 例として new_temp という名前のテンプレートを作成します。 new_temp のコンテンツ部分に@@@content@@@<br>@@@dropmenu.content@@@を 記述して保存してください。 @@@dropmenu.content@@@は先程の構成要素で新規作成したクラス名を使います。 任意で名前を付けた場合は dropmenu の部分の任意のクラス名に変えて下さい。 以上でテンプレート作成は終了です。 次の画像のように保存して下さい。 例）テンプレート作成時（これでそのまま保存します）3.
3.
3.
3.使用
使用
使用
使用する
する
する
するコンテンツページ
コンテンツページ
コンテンツページの
コンテンツページ
の作成
の
の
作成
作成
作成をします
をします
をします
をします。
。
。
。
次にDrop-Down Menu に使用するコンテンツページを作成します。 今回、作成するページはトップページ、ページ 1-1、ページ 1-2、ページ 1-3、ページ 2-1、ページ 2-2 の計 6 ページのコンテンツを作成します。 ページ関しては、コンテンツ部分にページ 1-1 です。という簡単な記述だけして保存して下さい。重要な設 定に関しては次で行います。 以上でコンテンツページの作成は終了です。 これで Drop-Down Menu を使用する準備が整いました。 次はこれまで作成したものを使用して Drop-Down Menu を作成していきます。4. Drop
4. Drop
4. Drop
4. Drop-
--
-Down Menu
Down Menu
Down Menu
Down Menu の
の
の
の設定
設定
設定
設定
これから Drop-Down Menu を作成します。これまで新規作成したものを使いますのでご注意下さい。 設定に関しましては次のようになります。 トップページの設定 ⇒ 各ページのテンプレートを new_temp に設定 ⇒ 各ページの関連コンテンツの 設定で Drop-Down Menu が出来ます。 ・トップページの設定 では、まずトップページの設定ですがこれは構成要素の new_down で行います。 構成要素の new_down を開いて下さい。 そこからコンテンツ部分に記述されている、 @@@extension:menu(top=0:first=top:levels=9:id=@@@id@@@:list=ul:item=li:special=MSIE6tables)@@@ を修正します。 特に細かい設定以外ではこの@関数を修正する必要はありませんが、top=0 がトップページの id の指定、 level=9 で階層の数を指定します。 今回はトップページの id は id=1049 とさせていただきます。 @@@extension:menu(top=1049:first=top:levels=9:id=@@@id@@@:list=ul:item=li:special=MSIE6tables)@@@ と修正して下さい。 これでトップページの設定ができました。このトップページを設定必ず先に行ってから後へ続くメニューの 設定をして下さい。 ・テンプレートの設定 次にテンプレートの設定を行います。先程作成した六ページのコンテンツページ全てに new_temp のテンプ
レートを適用して下さい。 各コンテンツページからプレゼンテーションのタブをクリックして先程作成した new_temp を選択してくださ い。 各ページを設定しましたらこれでテンプレートの設定は終了です。 ・ 各ページの関連コンテンツの設定 最後に各コンテンツページの作成ですが、トップページのメニューは一つですが、ページ 1-1 のメニューは
計 3 ページ ページ 2-1 は計 2 ページ となっております。 これらの階層や配置を関連コンテンツから設定します。 まず、Drop-Down Menu を使うのでコンテンツページから追加コンテンツのタブをクリックします。 そこから先程作成した dropmenu が追加コンテンツにありますので、そこから new_down を選択して下さい。 次の画像がその追加コンテンツの設定が行った後になります。 この設定を各コンテンツページ計 6 ページ必ず全てに行って下さい。
これが終わりましたら関連コンテンツでページの設定を行います。 トップページはそのままにしておいて下さい。残りの 5 ページで関連コンテンツの 設定を行う事で全ての Drop-Down Menu の形になります。 まず、ページ 1-1 の関連コンテンツの設定を行います。 コンテンツページから関連コンテンツのタブをクリックしてください。 そこから設定を行いますが、1-1 のページの場合、次のように設定してください。
これでページ 1-1 の設定は終了です。保存してください。
次にページ 1-2 の関連コンテンツの設定を行います。設定は以下になります。
次にページ 1-3 の関連コンテンツの設定を行います。設定は以下になります。
これでページ 1-3 の設定は終了です。保存して下さい。
次にページ 2-1 の関連コンテンツの設定を行います。設定は以下になります。
次にページ 2-2 の設定を行います。設定は以下になります。
これでページ 2-2 の設定は終了です。保存して下さい。
以上で Drop-Down Menu の作成は終了です。最初に紹介した Drop-Down Menu が出来上がっているかプ レビューから確認して下さい。次にメニューをクリックして各ページへとリンクが飛ぶか確認して下さい。テ ンプレートを指定しておりますのでメニューはどのページにも表示されるはずです。関連コンテンツの設定 が並びの通りに設定されていれば順番通りに表示されます。これで問題がないかを確認して下さい。また 並びやレイアウトを 変える際は関連コンテンツの設定を行ってください。 メニューの追加に関してはコンテンツページを追加して各設定を行ってから関連コンテンツの設定を行っ てください。 以 上
