ダウンロード

このサイトはMagic3のWiki機能を主に使用して作成しています。

チュートリアル/メニュー作成

チュートリアル

概要

メニュー作成を理解する、がこのチュートリアルの目標です。

準備

Magic3が正常にインストールされて使用可能であること。
「ブログサンプル」データを使用します。既にインストール時にインストールしている場合は、そのままの状態でも再度インストールし直してもどちらでもかまいません。

作業内容

  • サンプルデータインストール
  • メニューウィジェットの配置
  • メニューの定義

スタート

サンプルデータのインストール

前項のチュートリアル/基本操作と同様の操作でサンプルデータをインストールします。

「blog_demo1」データを選択しインストールします。

datainstall2.jpg
 
 

メニュー

メニューを作成するにはメニュー型ウィジェットを使用します。主に「デフォルトメニュー」ウィジェットを使用します。「デフォルトメニュー」ウィジェットは他のウィジェットと同じようにどの配置ブロックにでも配置できますが、メインメニューとして使用するメニューは「user3」ブロックに配置します。

グローバルメニューとローカルメニュー

メニューの表示をすべてのページで常に表示されるグローバルメニューとして表示したり、特定のページでローカルメニューと表示したりする方法は、メニュー以外のウィジェットの場合と同じです。(「チュートリアル/基本操作-グローバル属性」を参照。)
グローバルメニューとしてメニューを表示する場合は、ウィジェットの「グローバル属性」をオンにします。ローカルメニューを表示する場合は、「グローバル属性」をオフにします。

メニューウィジェットの配置

メニュー定義

Magic3のメニュー用データは、1つのメニュー項目がタイトルリンク先のURLのセットで出来た単純な構成です。
そのメニュー項目をフラットな1階層で並べるかツリー型の多階層で並べてメニューを作成します。
ページ上にメニューは複数配置することができます。メニューに名前を付けてそれぞれを管理します。

メニュー定義を編集する管理画面は2種類あります。フラットな1階層のみのメニュー編集に特化した単一階層編集画面とツリー型の多階層を編集できる多階層編集画面です。メニュー定義データは共通なので、途中で定義編集画面を切り替えることもできます。

メニュー定義画面の変更

多階層編集画面に切り替えを行います。
「管理画面カスタムウィザード」を使用して設定を変更します。

管理画面トップのダッシュボード画面に遷移し、「ESC」キーを押すと以下の画面が開きます。
「管理画面カスタムウィザード」をクリックします。

initwizard1.jpg
 

「管理画面カスタムウィザード」に遷移しました。
「管理画面カスタムウィザード」の上部の「メニュー」部分をクリックします。

initwizard4.jpg
 
 

「階層化あり」項目にチェックを入れて右方向矢印アイコンをクリックします。
次の画面が表示されたところで作業は完了し、一旦管理画面トップに戻ります。

initwizard5.jpg
 
 

メインメニューの「メニュー管理」から起動されるメニュー定義画面が変更されました。
「メニュー管理」をクリックして、階層化メニュー編集画面へ遷移します。

dashboard_menu2.jpg
 
 

多階層定義画面

menudef2.jpg

2017-05-25 (木) 16:40:08 (177d)