Museで作るカラフルなスクロールページ

ナビゲーションの仕上げ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ヘッダーにあるナビゲーションのデザインを修正した上で、ページ中のどこでもトップに戻れる常駐ボタンを設置します。
講師:
06:50

字幕

このレッスンではナビゲーションの仕上げを行います。それではマスターのページを開けて今デフォルトのままのナビゲーションのデザインこれを変えてみましょう。ではまずクリックして選択します。そしたらもう1回クリックして1個だけ選んでみます。そしたら、まずはこの塗りの部分これをなしにします。そしてフォントのカラーこれは黒にします。そしてフォントはLato > Mediumこれに設定してテキストの詳細これで「字送り」を3ぐらいにしておきましょう。そうすると、こんなデザインになります。では、この「メニュー項目」という所「通常」というのをクリックするとそれぞれ色んな状態がでてきます。では「ロールオーバー」に移動します。そしたら「ロールオーバー」も背景はなし。更に「マウスダウン」も塗りがなしですね。更に「アクティブ」ですね、これもなしにします。こうしてやることで他も含めて全部塗りは、なしになりました。では塗りじゃない方法でどこに選んであるかの表示にしましょう。ではまた1個だけボタンを選んでステート、「ロールオーバー」にします。そしたら、「線」をこの色で付けてやってそして「線」のオプションを開けます。そしたら、このリンクを外してこの下だけ残して他、0にします。 そして下の線を増やしてやるとこの様に下線が引かれた状態になります。そしたら「アクティブ」の状態を同じように色をこれにしてそして「線」の状態をこれにしてやると全部こんな感じに設定が行われます。ではそれぞれのボタンアンカーにリンクを貼りましょう。まず SPEAKERS を選んでここからspeakers ですね。次に SESSIONSsettionsLOCATIONlocationREGISTERregister とこれで全部に設定ができました。では、これで頭からページ内の各所に跳べるので逆にページ内のどこにいても、すぐにトップに戻れるものを作ってみましょう。ではテキストをこんな感じで作ります。そしたら中身に Back to Top と書いておきましょう。そしたらこれの塗りを黒にします。そしてテキストの色は 白にします。そしたらフォントですね、フォントはArial の Boldこれを選ぶとこんな感じになります。そしたらテキストの揃えは真ん中にしておいて更にちょっと真ん中よりにしておきます。そしたら角丸の設定この左側の2つの角だけ丸にしておきましょう。そしたらこれを次はステートの設定で他の状態の時には塗りをこの青にしておきましょう。 こんな感じになりました。ではこれなんですけどリンクをトップに貼っておきます。これをクリックすれば戻れるというわけですね。そしたら、これなんですけどフッターに入れないでこの辺に置いておいてその状態で「変形」をクリックして「ブラウザーに固定」の右下こんな状態にします。ではこれでプレビューしてみましょう。ホームに行って「プレビュー」します。そうすると、どうなるかというとこんな感じでスクロールしてもいつでもトップに戻れるボタンが表示されているとこんな状態になりました。上のメニュー、マウスをあてた所に下線がひかれてそれぞれ設定したアンカーにこんな風に跳べるようになりました。Back to Top を押せばすぐに帰れます。こんな風にナビゲーション系のものもちょっとした工夫で面白い雰囲気になります。こういったものも是非とも応用して下さい。

Museで作るカラフルなスクロールページ

WebデザインソフトMuseを使うと、デザイン性にあふれたWebページを簡単に作ることができます。このコースではページ全体の設計、画面のスクロールに合わせた動きやエフェクトの追加、ページ内のナビゲーション作成やウィジェットの活用、そしてできあがったファイルをアップロードしてWebサイトを公開するまでのひと通りの手順を学んでいきます。

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

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

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

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