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

カスタムのナビゲーションを作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
メニューのウィジェットを使い、ページの自動反映ではなく、カスタムの項目の入ったメニュ0の作成方法を解説します。
講師:
04:44

字幕

このレッスンではナビゲーションメニューの作成とカスタマイズを行います。それでは、このレッスンのファイルを開いてマスターページを開けます。そしたら、ページ内の項目に跳ぶことが出来るナビゲーションのメニューをヘッダーの部分に作りましょう。ではそれを作る時には「ウィジェットライブラリ」ですねこれを開けてやります。そしてその中に「メニュー」という項目があるので「垂直方向」「水平方向」とあるので「水平方向」のメニューをドラッグ&ドロップで持ってきます。そうすると、今ウィジェットのこの見本にでてるようなこうしたメニューが作れるんですが見て頂くとこっちにボタンが1個しかないメニューになってます。これどういうことかというとMuse は基本的にこのプランの画面で作られてるページを基準に自動的にメニューが作られるんですが今回はシングルページ1ページだけの内容で作ります。なので、1ページなのでホームだけという全然これではナビゲーションにならないわけなんですが今回はページを移動するのではなくてページ内にアンカーというのを作ってそこを移動するようにします。なので、それに対応させるためにちょっとカスタマイズする必要があります。 ではそれをやってみましょう。「オプション」をクリックします。そしたら、「メニューの種類」という所これが今「トップレベルページ」となっています。「トップレベルページ」というのがさっきのプランのページに出てくる他のページです。そういうことになるんですけど「トップレベルページ」だと1個だけになってしまうのでこれを「手動」にします。そうすると、どうなるかというとこのメニューこれをダブルクリックして下さい。選ばれてない状態からダブルクリックするとこの様な+のマークが左右と下に出てきます。このボタンを押すとメニューの項目を増やすことができます。では1回 Photoshop 上のデザインを確認してみましょう。メニュー、どんなのになってたかというとここにありましたね。SPEAKERS SESSIONSLOCATIONS RESISTER と4つの項目ですね、それが並んでいます。それではまずメニューのボタンの数を、2個そしてまたこっちをクリックするとこれがでてくるので、3個こっちをクリックして、4個ですね。4個にしておきます。そしたら、ここの名前の項目ダブルクリックした後に、更にダブルクリックを続けることでこのテキストの部分を入力の状態になります。 そうしたら、1個目にSPEAKERS と入れましょう。そしたら今度は2個目ですね。ここには SESSIONS と入れます。そして3個目の所はLOCATIONSそして最後の1個はRESISTER ですね。これで4つの項目ができました。ではこれをドラッグして位置を変えていってこの線に合わせた所に置いておきましょう。そしたら、もしブラウザの幅が変えられた時もこれが動かない様にここの固定のスイッチ、これを入れておきます。そしたら、この状態で1回ホームの方見てみましょう。するとホームにも反映されてこの様なメニューが作成されています。この様にして自動で作ってしまうとこのトップレベルのページが反映されるので1個だけになってしまいますが手動で設定すれば好きなボタンを作ることができます。これ、応用がききますので是非とも覚えておいて下さい。

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

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

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

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

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

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