Muse (2015) 基本講座

メニューの追加

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ウィジェットライブラリから「メニュー>垂直方向」を追加し、オプションの項目を確認した上で、マスターページのヘッダーに追加します。
講師:
04:24

字幕

このレッスンではメニューの追加を行います。それでは全ページ共通のメニューの追加を行うのでマスターページを開けます。マスターページを開けたらこちらにメニューを追加したいと思います。では「ウィジェットライブラリ」を開けます。そしてその中の「メニュー」ここを開けます。そうすると「メニュー」>「垂直方向」「水平方向」とあるので「水平方向」をドラッグ&ドロップで持ってきます。そうすると、この様なメニューが追加されます。ご覧のとおり Home、About Us、Services、Portfolio、Contact Us とちゃんと現在作ってあるこの兄弟ページこれが全部入っています。Muse のメニューは基本的にこの様に作られてるページが自動的に入って反映されるダイナミックな構造のメニューとなっています。そしてメニューは選択されてる状態だとここにこの青い丸が出てくるのでこれをクリックするとオプションの項目を出すことができます。上から見ていきましょう。まずメニューの種類ですが「トップレベルページ」となっています。「トップレベルページ」というのは所謂兄弟ページのことですね。子ページは表示されない状態ですがこれをすべてのページを表示させることもできます。 また手動で任意のページだけを出すというそんなこともできます。「方向」ですが、今これ「水平方向」ですが垂直に切り替えることもできます。そして編集をすべてのメニューのアイテムに適用するかどうかのチェックがここですね。そして「アイテムのサイズ」ここですが「間隔を揃える」にするとボタンのサイズはバラバラになります。ボタンのサイズは、この文字から端っこまでの間隔によって決まるという形になっています。対してサイズを揃えるのと決まった形の大きさのボタンの中に文字が並ぶとこの様な違いがあります。その下「パーツ」という所ですが「左アイコンを表示」とやると常にこちらにこの様なアイコンが表示されます。「ラベルを表示」はラベルというのはこのページ名のことですね。これもオン・オフが可能です。「右アイコン表示」これは標準状態だとサブメニューのみ、つまり子ページがある時にこっち側にアイコンが表示されるとそんな状態になっています。オンにすると、こんな表示になりますね。通常はサブメニューがある所だけ今の右のアイコンが表示されます。そして「パーツの配置」これは文字がどこに揃えられるかですね。この様な違いとなります。では、このメニューをヘッダーの部分にとりあえず置いておきましょう。 そうすると、ほかのページもすべてこの様にヘッダーに置かれた状態となっています。では Home を開いて1回プレビューで見てみましょう。この様にメニューが装着された状態となっています。今 Home にいますけどちゃんと現在いるページがこの様にハイライトして表示されてますね。そしてマウスを重ねるとこの様に色が変わって例えば About Us でクリックするとこの様に移動して、移動した先のページが今度はハイライトされる。この様な基本的な動作ですが何も設定しなくともそういった所はきちんと動作するようになっています。この様に Muse のメニューは作っただけで既に最低限の機能がきちんと装備されているという大変便利な構造となっています。まず基本的に、このマスターページの方にヘッダーに入れてやってすべて共通で使うとこの仕組みですね。まずは覚えておいて下さい。

Muse (2015) 基本講座

WebデザインソフトMuseを使うと、HTMLのコードを使わずにデザイン性に溢れるWebページを簡単に作ることが可能です。このコースではマスターページの作成やコンテンツの追加、テキストの追加や色の設定、ウィジェットや拡張機能の活用、レスポンシブなレイアウトの設定やデータをアップロードしてウェブ上に公開する手順などMuseの操作をひと通り学ぶことができます。

4時間01分 (39 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2016年07月02日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。