Muse (2015) 基本講座

メニューウィジェットのスタイリング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
メニューボタンのサイズを変更したり、カラーを通常時やステートごとに分けて変更し、オリジナルのデザインを作成します。
講師:
09:29

字幕

このレッスンではメニューの外観のカスタマイズを行います。それではこのレッスンのファイルを開いてマスターページを開けます。そうするとメニューがヘッダーとフッターの方に配置されています。これら現在はデフォルトのグレーのデザインのままですがこれでは味気ないのでデザインをちょっと修正してみましょう。ではまず、この上のボタンですが幅をちょっと合わせましょう。このヘッダーの幅に合わせてみます。1回クリックすると選択状態になるのでこのハンドルをドラッグしてまず上をヘッダーの上の幅に合わせます。下も区入り線の所に合わせます。じゃあ1回これでプレビューしてみるとこんな感じになります。悪くはないですがちょっと上の余白が空いてしまってるのが若干気になるのでこういった場合には一番上までボタンだけこうはみ出させて伸ばしてしましょう。こういうことをやってもちゃんと動作するので大丈夫です。ではデザインの方修正していきましょう。まず今このボタンですけどグレーになってますね。これを通常時は、このヘッダーと同じく白い状態にしときたいと思います。試しに1回クリックして選択されてる状態で特定の1個のボタンをもう1回クリックします。 そうすると、特定のボタンだけが選択されます。メニューの「オプション」で「編集をすべてに適用」これが、オンになっていれば1個のボタンだけを編集した状態で全部が一遍に変わります。なので楽に編集が行えます。ではここに対して白にしたいので、試しに塗りを白にしてみましょう。そうすると文字が見えなくなってしまうので文字も直します。文字の部分直す時にはこの真ん中の部分ですね。テキストボックスですけどここダブルクリックすると選ばれます。そしたらテキストのカラーはこっちですね、テキストの方から選んでやります。そうするとちゃんと見えるようになりました。ではこのフォントなんかも下の文章の方と合わせましょう。「段落スタイル」を開けて「main body」という奴を選ぶとこんな感じにフォントとか変更されました。ただちょっとこれ大きすぎてしまうのでこれらもテキストの項目で例えば 14 ポイントぐらいにしてそして真ん中揃えにするとやってあげるとデザインがそろいます。じゃあまずこれでプレビューしてみましょう。そうすると白地になりました。フォントも変わってるんですがこのヘッダーの区入り線がこのボタンの白い所で浸食されてしまっています。 なので、ちょっと考え方を変えて下地と同じ色にするという時にはわざわざ色を付けなくとも透明にするという手もあるんですね。透明にしてみましょう。プレビューすると、ちゃんと線も見えていて、それでいてちゃんとボタンも機能しています。この様に、ちょっとした発想の転換でデザインの見え方を変えることもできます。ではこれで第一段階、完了です。今、この状態マウスオーバーするとグレーで選ばれるんですがここを、このサイトのキーカラーの1つであるイエローでハイライトされるようにしたいなと思います。ではまた改めてボタン1個だけ選びます。そして、この「メニュー項目」という所みて下さい。今ずっと作業中「通常」となってました。こうクリックすると、「ロールオーバー」「マウスダウン」「アクティブ」とそれぞれ操作中の状態がでてるんですね。これロールオーバーにしましょう。そうするとロールオーバー中の塗りに変わるのでここをカラーの中からこの赤の下のイエローですね、これにしましょう。そしたら同じくマウスダウンの時も同じでいいですね。イエローにしてそして「アクティブ」の時も全部まとめてイエローにしてしまいましょう。これでプレビューすると、操作時の色も変わりしたね。 これで上のヘッダーのメニューこれは出来上がりました。ただもう1点しいて調整するとすればこの黄色でフラッシュされてる時は文字が黒よりも、白抜きになるとより目立つかと思うのでそうした場合には今度は真ん中をダブルクリックして文字だけ選びます。すると文字の部分は、この「ラベル」という名前で、独立してこの状態による変化があります。そしたら、これ「ロールオーバー」に切り替えます。そしたら「ロールオーバー」の時はテキストカラーが白になるようにします。同じく「マウスダウン」これは白のままですね。「アクティブ」の時、これも白にします。こんな風にちょっと大詰めの調整をしてやるとより文字が反転されて選んでるという感じがでてきました。ではこの感じで下も調整してみましょう。下のボタン、上のボタンをナビゲーションなので大きな変化が必要でしたが下は外部へのリンクなのでマウスがオーバーした時に軽い変化があるだけで、いいかなと思います。なので、まずボタンの色、これはこのフッターの色と、同じにしてしまいます。真っ黒ですね。そして状態にかかわらず ここはずっと黒にしておきましょう。「マウスダウン」も黒でそして「アクティブ」も黒です。 ここは背景の変化させなくします。そうした上で、ではダブルクリックした上でもう1回文字をダブルクリックしてラベルだけですね、ここだけ変えましょう。まず通常時ですね、通常時はテキストのカラーをグレーにしておきます。そして、ほかの時はこれを白にします。「マウスダウン」の時もこれ白ですね。「アクティブの時」ここも白にしておきます。こうするとどうなるかプレビューしてみましょう。そうすると通常は目立たないグレーの文字なんですけどマウスを重ねるとその時だけ文字だけ白くハイライトされるというこれならリンクだな、とわかりやすいですね。下のボタンはあまり目立ちすぎなくてもいいのでこんな感じにしておきましょう。この様に標準の見た目だとかなり地味な感じのグレーのボタンなんですがちょっと色を変えるだけでこの様にデザインに溶け込んだ仕様にすることができます。是非、それぞれの選択の状態まずは全体の選択中にもう1回ダブルクリックするとボタンが選べて、真ん中の文字の部分ダブルクリックすると文字、ラベルだけが選べるとその状態が重要になってくるのでその部分を是非覚えておいて下さい。

Muse (2015) 基本講座

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

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

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

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

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