HeartCore ドロップダウンメニュー ドロップダウンメニュー作成 メニュー作成マニュアル 作成マニュアル September 2009 Ver1.0 -1株式会社ジゾン 〒141-0031 東京都品川区西五反田２－２５－１－３ 目 次 ADDADD-ON - HORIZONTAL DROPDROP-DOWN MENU の使用手順について 使用手順について ..................................................... ..................................................... - 3 1.構成要素 1.構成要素として 構成要素として DROPDROP-DOWN MENU を新規作成します 新規作成します。 します。 ................................................................ .................................................................... .................................... - 4 2.使用 2.使用する 使用するテンプレート するテンプレートを テンプレートを作成します 作成します。 します。 ................................................................ ................................................................................................ .................................................................. .................................. - 5 3.使用 3.使用する 使用するコンテンツページ するコンテンツページの コンテンツページの作成をします 作成をします。 をします。 ................................................................ ........................................................................................ ........................................................ - 6 4. DROPDROP-DOWN MENU の設定................................ 設定 ................................................................ ................................................................................................ ............................................................................ ............................................ - 7 - -2株式会社ジゾン 〒141-0031 東京都品川区西五反田２－２５－１－３ AddAdd-On - Horizontal DropDrop-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 が続きます。 -3株式会社ジゾン 〒141-0031 東京都品川区西五反田２－２５－１－３ 1.構成要素 1.構成要素として 構成要素として DropDrop-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 の新規作成は終了です。 -4株式会社ジゾン 〒141-0031 東京都品川区西五反田２－２５－１－３ 2.使用 2.使用する 使用するテンプレート するテンプレートを テンプレートを作成します 作成します。 します。 次に使用するテンプレートを作成します。 ウェブサイトコンテンツからそのままテンプレートを追加して下さい。 例として new_temp という名前のテンプレートを作成します。 new_temp のコンテンツ部分に@@@content@@@<br>@@@dropmenu.content@@@を 記述して保存してください。 @@@dropmenu.content@@@は先程の構成要素で新規作成したクラス名を使います。 任意で名前を付けた場合は dropmenu の部分の任意のクラス名に変えて下さい。 以上でテンプレート作成は終了です。 次の画像のように保存して下さい。 例）テンプレート作成時（これでそのまま保存します） -5株式会社ジゾン 〒141-0031 東京都品川区西五反田２－２５－１－３ 3.使用 3.使用する 使用するコンテンツページ するコンテンツページの コンテンツページの作成をします 作成をします。 をします。 次に Drop-Down Menu に使用するコンテンツページを作成します。 今回、作成するページはトップページ、ページ 1-1、ページ 1-2、ページ 1-3、ページ 2-1、ページ 2-2 の計 6 ページのコンテンツを作成します。 ページ関しては、コンテンツ部分にページ 1-1 です。という簡単な記述だけして保存して下さい。重要な設 定に関しては次で行います。 以上でコンテンツページの作成は終了です。 これで Drop-Down Menu を使用する準備が整いました。 次はこれまで作成したものを使用して Drop-Down Menu を作成していきます。 -6株式会社ジゾン 〒141-0031 東京都品川区西五反田２－２５－１－３ 4. DropDrop-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 のテンプ -7株式会社ジゾン 〒141-0031 東京都品川区西五反田２－２５－１－３ レートを適用して下さい。 各コンテンツページからプレゼンテーションのタブをクリックして先程作成した new_temp を選択してくださ い。 各ページを設定しましたらこれでテンプレートの設定は終了です。 ・ 各ページの関連コンテンツの設定 最後に各コンテンツページの作成ですが、トップページのメニューは一つですが、ページ 1-1 のメニューは -8株式会社ジゾン 〒141-0031 東京都品川区西五反田２－２５－１－３ 計 3 ページ ページ 2-1 は計 2 ページ となっております。 これらの階層や配置を関連コンテンツから設定します。 まず、Drop-Down Menu を使うのでコンテンツページから追加コンテンツのタブをクリックします。 そこから先程作成した dropmenu が追加コンテンツにありますので、そこから new_down を選択して下さい。 次の画像がその追加コンテンツの設定が行った後になります。 この設定を各コンテンツページ計 6 ページ必ず全てに行って下さい。 -9株式会社ジゾン 〒141-0031 東京都品川区西五反田２－２５－１－３ これが終わりましたら関連コンテンツでページの設定を行います。 トップページはそのままにしておいて下さい。残りの 5 ページで関連コンテンツの 設定を行う事で全ての Drop-Down Menu の形になります。 まず、ページ 1-1 の関連コンテンツの設定を行います。 コンテンツページから関連コンテンツのタブをクリックしてください。 そこから設定を行いますが、1-1 のページの場合、次のように設定してください。 - 10 株式会社ジゾン 〒141-0031 東京都品川区西五反田２－２５－１－３ これでページ 1-1 の設定は終了です。保存してください。 次にページ 1-2 の関連コンテンツの設定を行います。設定は以下になります。 これでページ 1-2 の設定は終了です。保存してください。 - 11 株式会社ジゾン 〒141-0031 東京都品川区西五反田２－２５－１－３ 次にページ 1-3 の関連コンテンツの設定を行います。設定は以下になります。 これでページ 1-3 の設定は終了です。保存して下さい。 次にページ 2-1 の関連コンテンツの設定を行います。設定は以下になります。 これでページ 2-1 の設定は終了です。保存してください。 - 12 株式会社ジゾン 〒141-0031 東京都品川区西五反田２－２５－１－３ 次にページ 2-2 の設定を行います。設定は以下になります。 これでページ 2-2 の設定は終了です。保存して下さい。 以上で Drop-Down Menu の作成は終了です。最初に紹介した Drop-Down Menu が出来上がっているかプ レビューから確認して下さい。次にメニューをクリックして各ページへとリンクが飛ぶか確認して下さい。テ ンプレートを指定しておりますのでメニューはどのページにも表示されるはずです。関連コンテンツの設定 が並びの通りに設定されていれば順番通りに表示されます。これで問題がないかを確認して下さい。また 並びやレイアウトを 変える際は関連コンテンツの設定を行ってください。 メニューの追加に関してはコンテンツページを追加して各設定を行ってから関連コンテンツの設定を行っ てください。 以 上 - 13 株式会社ジゾン 〒141-0031 東京都品川区西五反田２－２５－１－３
© Copyright 2024 Paperzz
