Muse (2015) 基本講座

カスタムメニューの追加

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
メニュー内容を「手動」に設定し、任意の数だけボタンを増やして個々にリンクを設定し、カスタム仕様のメニューを作成します。
講師:
05:04

字幕

このレッスンではカスタムメニューの作成について解説します。それではサイト内の自動設定されるメニューだけじゃなく他のサイト等にもリンクしているカスタムのメニューを作ってみましょう。では「ウィジェットライブラリ」から「メニュー」>「水平方向」これをドラッグ&ドロップで持ってきます。そうすると、最初の状態ではこっちと一緒ですね。自動設定される、このサイト内の各ページが出ているメニューとなりました。こういったサイト内ではなく例えば Facebook ページとTwitter アカウントと Instagram と youtube といった具合に関連する SNS なんかそういった所に跳ぶメニューをフッターに作りたいなんていう場合そんな時にはこんな操作を行います。ではまず、このメニューを選んだ状態で「オプション」を開けます。「オプション」で「メニューの種類」を「トップレベルページ」から「手動」に切り替えます。そうするとこんな感じで単に Name とだけ書いてある状態が一個だけになります。ではこれだと今ボタンが1個だけの状態になってます。ボタンを増やしてみましょう。このメニューオブジェクトの真ん中辺りこの線で囲まれてるあたりですね。 ここをダブルクリックします。そうすると、この様に+マークが左右と下に表示されます。じゃ右を1 回クリックしてみるとこんな感じで1個ボタンが増えましたね。更にもう1回押すとまた増えました。もう1回押すと4個になりました。じゃあどこかクリックして選択解除しましょう。こんな感じでメニューはこのダブルクリックで個々のボタンのエディット状態に入るとこの+ボタンを使って左右、もしくは下だとサブメニューですね。それを増やすことができます。この要領でやっていけば、好きな数だけボタンを増やしたメニューが作れます。では改めてこの1個1個のボタンにリンク先を設定してみましょう。まず1個目のボタンこの真ん中の辺りをダブルクリックするとここに「ハイパーリンク」という項目がありますね。「リンクを追加またはフィルター」とあってこんな感じでサイト内も出ていますがここにアドレスを直に入れればそちらのサイトにリンクすることもできます。では例えばhttp.// のfacebook.com とかですね。こんな感じで追加していきます。2個目ですね。ここはtwitter.comとかですね。3つ目、ここはinstagram とかですね。 4つ目はyoutube といった具合にこの様にリンク先をそれぞれ変えることができます。そして更にダブルクリックした状態から更にダブルクリックするとテキストを打ち変えられる状態になるので最初の所はFacebook と入れておきましょう。では次ですね。こちらは Twitter1回このテキストの入力状態になっていると、隣はクリックしただけで1発で入力状態に入れます。こちらは Instagramそして最後に Youtube とこういった具合に、この様にリンク先の名前を変えることができます。そしたらこれをフッターの方に持ってきて上と同じ所に揃えてやればヘッダーの所にあるのはサイト内のナビゲーションそしてフッターの所にあるのは関連するサイトへのリンクといったように使い分けることができます。こうしたカスタムのメニューは様々な用途に使えるので是非とも覚えておいて下さい。

Muse (2015) 基本講座

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

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

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

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

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