Museで手軽にWebサイト制作

マスターを設定する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
サイトのロゴや背景画像など、全てのページに共通して入る要素を「マスターページ」に一括して設定します。
講師:
04:48

字幕

このレッスンでは マスターページの設定を行います Muse の中のページの設定には 2種類が存在します まず1つが すべてのページに共通して 入ってくる要素を決める「マスター」 そして実際に表示される 各々のページということになります 例えば ページのロゴであったり またメニューの配置 あと背景とかですね そういったすべてのページに 共通するパーツを 1個1個並べてると大変ですが マスターに作成しておけば 全部に共通して配置されるので 作業が非常に楽になるというわけですね それではまず これマスターのページ これを開きます そうするとまだ何にもない状態ですね ではここに まず背景を設定してみましょう このバーの上に 「ブラウザー背景」というところがあります これですね べた塗りの色にしたい時には このカラー設定 これを開くと色にすることもできます 今回は画像を使って ちょっとおしゃれな背景にしてみましょう では「ブラウザー背景」のリンク これをクリックします そうすると その中に「画像」というところがあるので 「画像を追加」 これをクリックします そしたらこのコースの 02_02 の フォルダーですね その中に2つの画像ファイルが入っております bg.jpg と logo.png ですね では背景用の bg.jpg を選択して 「開く」をクリックします そうすると もう後ろが ちょっとザラッとした 紙のような質感になりました こういったつなぎ目なしで 背景にできる素材― 例えば ネットなんかでも 様々なものが配布されています そういったものを使うと読み込むだけで このように背景を設定することができます これ「スクロール」にチェックが入っていれば どこまでスクロールしても折り返して 何回も出てくる ずっと続く模様となります では これで背景ができました 一回この状態で このメインの方の タブに切り替えてみると マスターに合わせて このホームというのも ちょっと色が変わっていますね ホームの中を見てみると このようにマスターで設定した 壁紙が反映されています では このまま「マスター」のタブに また切り替えます では 次はヘッダーの部分に ロゴを配置しておきましょう まずヘッダーの部分なんですが この部分ですね この目盛りをドラッグすることで ヘッダーの部分というのを 転移することができます それでは これをドラッグしてですね ちょうど 100px と表示されるとこ ここにしておきましょう そうするとページの開始点がここです 0のとこなので 100px 分 ヘッダー用に確保されました ではここに画像を読んできます 「ファイル」メニューの「配置」 これをクリックすると このように ファイルの開く画面になるので ここで logo.png ですね これを クリックします 「開く」をクリックすると このように ポインタに 画像のプレビューが付いてくる状態になるので 配置したい場所に 持ってきてクリックします そうすると このように実際のサイズで画像が出てきます そしたらこれを このページの 左上のグリッドに合わせて配置してやると このようにロゴが配置されました このように配置されると 他のページにも まったく同じものが 表示されるようになってます 後ほど 他のページもできたらと ここにはメニューを設置します なのでこれでとりあえず 最初の段階のマスターの設定は完了です このようにマスターページ これを使うことで非常に効率的に 作業を進められるのが Muse の大きな特徴の1つでもあります

Museで手軽にWebサイト制作

MuseはWebデザイナー以外でもスタイリッシュなWebサイトを作ることができる画期的なツールです。このコースでは架空のアーティストのニューアルバムのPRサイトを例に、サイトの構成や素材のレイアウト、動画や音声といったリッチメディアの埋め込み方、TwitterやFacebookなどのSNSとの連携、またモバイル機器への対応などを学ぶことができます。

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

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

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

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