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