オリジナルのナビゲーションメニュー(ライブラリ)をMuseにインストールする方法、Webサイトに組み込む方法、カスタマイズする方法など解説します。Introductionは講義です。
※パソコンを使ったレッスンはありません。
視聴する
オリジナルのナビゲーションメニューは、Museに搭載されているウィジェットライブラリを組み合わせて作成します。Museのウィジェットライブラリは、まず「コンテナ」と呼ばれる部品があり、その中に「ターゲット」部品、さらにその中にメニューなどの部品を置くという階層構造になっています。この階層構造は、レイヤーパネルで簡単に操作することができますので、難しい作業ではありません。
※Step-00は講義です、パソコンを使ったレッスンはありません。
Step-01からStep-10までは実習です。ダウンロードした素材データをデスクトップに置いておきましょう。まず、オリジナルナビゲーションメニューを作業するため基本ページを作成します。プランの画面で「新着情報」「サービス」「お問い合わせ」の3つのページを作成しておきます。各ページには、ページタイトルのみ追加します。
完成データ:Step-01.muse
マスターページにウィジェットライブラリの「垂直方向メニュー」を配置します。垂直方向メニューには、「新着情報」「サービス」「お問い合わせ」の3つのリンクボタン(メニュー項目)が自動的に作成されています。メニュー項目のフォント設定を変更します。
完成データ:Step-02.muse
マスターページにウィジェットライブラリの「コンポジション」→「ライトボックス表示」を配置します。ライトボックスの不必要なパーツを非表示、もしくは削除していきます。このライトボックスの中に、「垂直方向メニュー」を組み込みますので、ライトボックスの大きさを(メニューのサイズにあわせて)変更します。
完成データ:Step-03.muse
垂直方向メニューをライトボックスの中にドラッグして組み込みます。ドラッグすると青い枠線が表示され、自動的に中央に配置されます。続けて、マスターページの最上部にメニューバー(ナビゲーションバー)を配置します。長方形ツールを使って矩形を描き、ドラッグ配置するだけの簡単な作業です。このメニューバーの右端にライトボックスを配置します。
完成データ:Step-04.muse
ライトボックスに組み込んだ「垂直方向メニュー」のアクション「通常」「ロールオーバー」「マウスダウン」「アクティブ」を設定します。ロールオーバーはマウスカーソルが重なったときの表示、マウスダウンはクリックしたときの表示です。アクティブでは文字色の彩度が下げます。例えば、新着情報のページが表示されているときは、メニュー項目の「新着情報」の文字色は暗くなっています。
完成データ:Step-05.muse
ライトボックスの「トリガー」(クリックしてメニューを表示・非表示する部分)内に、ハンバーガーアイコンを配置します。また、メニューを展開したときに表示されるクローズアイコンも配置します。この2つのアイコンは解像度に依存しないSVG形式のファイルになっています。
完成データ:Step-06.muse
ページをスクロールしても、ナビゲーションバーが常に最上部に表示されるように固定します。アプリケーションバーの「固定」から位置を選択するだけの作業です。
完成データ:Step-07.muse
メニュー項目にマウスカーソルが重なったときに実行される0.5秒程度のフェード効果を設定します。メニュー項目にマウスカーソルをあわせると、スッとオーバーラップするように色が変わります。
完成データ:Step-08.muse
プラン画面でトップページ以外のHTMLファイル名を変更します。トップページはデフォルトで「index.html」になっていますが、他のページはタイトル(日本語)がページ名になっていますので、半角英数字の名前に変更します。
※Museからパブリッシュする場合は必要のない作業ですが、Museから「HTMLを書き出してFTP」する際、トラブルになることがありますので念のために変更しておきます。本来は不必要な作業です。
完成データ:Step-09.muse
作成したナビゲーションメニューをMuseライブラリに変換、書き出します。Museライブラリは「.mulib」という拡張子がつきます。このMuseライブラリは自由に配布することができます。受け取った人は、Museライブラリのアイコンをダブルクリックするだけで、Museに組み込むことができます。
Step-10では、ライブラリを組み込んだ後のカスタマイズまで学習します。
完成データ:Step-10.muse
この学習コンテンツは、動画12本・64分で構成されており、スモールステップで詳細に解説しています。また、一人出版社では、動画コンテンツに最大400%まで拡大表示する「エクストリームズーム」を採用していますので、スマートフォンでもメニュー項目や小さな文字などを読むことができます。
本商品は、PayPal(クレジットカード含む)で購入することができます。
※銀行振込をご希望の方は[ebookcast@gmail.com]までお知らせください。
こちらでは購入者の個人情報を取得しませんので、IDやパスワードが記載されているページのリンクは、PayPalの決済完了ページに表示されます(IDパスワードをお知らせするメールは届きません)。
購入ページに詳しく書かれています。
※このコンテンツは「Muse導入ガイド[中級編]コンプリート版」の中に含まれています。
総再生時間:64分
学習形式:講座ビデオ
付属(ダウンロード提供):レッスンデータ/完成データ
価格:600円(税込)
購入方法:PayPal(クレジットカード含む)/銀行振込にも対応可
リリース日:2017年2月19日
購入終了しました
Muse導入ガイド・コンプリート版へ
ホームに戻る