Museで手軽にWebサイト制作

スマートフォン向けにマスターを調整

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スマートフォン向けのレイアウトを作成し、マスターページの要素を移植する手順について解説します。
講師:
05:22

字幕

このレッスンでは スマートフォン向けの表示を作成します それではですね 今一応一通り揃っているこのサイトですが これに対して スマートフォン向けの 表示を加えてみましょう ではですね まずこの上の部分 今「デスクトップ」というところが 有効になってますが これがですね 基本となるパソコン向けの表示ですね じゃ これにスマートフォンでアクセスした 場合の表示を加えてみましょう この「スマートフォン」 のボタンをクリックします そうすると「スマートフォンレイアウトを 追加」というですね 表示が出てきます では「コピー元」として 「デスクトップ」今この状態ですね このページ構成をそのまま引き継ぎたいので 「サイトプランをコピー」そして 「ページ属性をコピ−」と このようなかたちで チェックを入れておきます ではこれで「OK」をクリックすると 元々こちらの「デスクトップ」の方で 作られていた同じページが スマートフォン向けの表示にもですね 受け継がれて作られました 一回作った後はこのボタンで デスクトップの表示と スマートフォンの表示ですね これを切り替えることができます ではですね 内容を改めて作っていくわけなんですが こちら側の素材ですね それを コピーペーストすることで作っていきましょう では基本となる マスターの部分ですね それを作ってみましょう まず「デスクトップ」の 「マスターページ」を開けて そしてその中にある メニューとロゴと 後 SNS ボタン こういった素材ですね これらを全て選びます では Mac の方は Command Windows の方は Control を 押しながら A を押します そして全部選ばれましたね そしたら Mac の方は Command Windows の方は Control を 押しながら C を押してコピーします そしたら今度はですね 表示をスマートフォンに切り替えて スマートフォンのマスターページにいきます それでは ここに対してペーストを行います では Mac の方は Command Windows の方は Control を 押しながら V を押します そうすると このよう にですね 素材が貼り付けられました ではですね このように 元々デスクトップのサイズで作られた素材だと レイアウトしづらいですね なので サイズなんかを変更しながら 最適化していきましょう まず このヘッダーの部分ですね 今 ヘッダーここまでなんですけど このロゴもメニューも はみ出してしまっています じゃヘッダーをちょっと広げておきましょう この部分をドラッグして 広げておきます では このまずメニューですね 例えばこれを縮小してあげて これに入る幅に入れてもいいんですが ちょっとこの横並びのレイアウトだと この狭い幅で 使いにくいですね こうした場合にはですね プロパティ表示して オプションの中から 今方向が「水平方向」になってますけど これを「垂直方向」にしてあげたりします そうすると このように縦に重なったですね かたちとなりました これでサイズを適当なとこに調整してやると レイアウトしやすそうなですね かたちとなりましたね ではこれで この辺においてあげて で ロゴもちょっと大きすぎるので 少し縮めましょう そして中央で合わせて このようなヘッダーになりました エリアも調整して だいぶ見やすい感じですね じゃ同じような感じでフッターもですね この SNS のボタン 横に ズラっと並んでると表示できないので フッターのエリアを一回広げて ではですね 左側で合わせてあげて 縦に並ぶようなですね レイアウトにしてみましょう そしてこれをちょっと下の方に持っていって フッターのエリアも揃えます こうしてやると マスターが変わるとですね 全体に適用されて 基本的なレイアウトができました この容量で各ページの素材をですね コピーペーストして 調整していくことになります

Museで手軽にWebサイト制作

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

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

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

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

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