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

ロケーションセクションの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ロケーションのセクションを、既に出来上がっている他のセクションのコピーを多用して効率よく仕上げる手順を解説します。
講師:
08:56

字幕

このレッスンでは Location セクションの作り込みを行います。それではこのレッスンのファイルを開いてフォームを見ます。そうするとSessions の所全部内容がこちらのテキストにあるもの反映されて繰り返しコピーされた状態となっています。ではここにタイトルがまだないのでこの SPEAKERS のこの項目をコピーして持ってきましょう。では Mac の方は Option キーWindows の方は Alt キーを押しながらこれをドラッグしてきます。こうやって置くことができます。では上の所からの距離を一緒にしたいのでこの SPEAKERS は1回上に付けてではカーソルキーの下をこれで 10 回です。20 回押したところです、ここに揃えましょう。では SPEAKERS もスナップした所から20 回ですね。同じだけ動かしました。そしたらここを中身をSESSIONS と変えておきましょう。そしたら次はこちらですねLOCATION の area になります。本文がちょっと邪魔なので下の方にずらしておいてそして、またこちらからOption または Alt を押しながらドラッグしてきます。そしたら、ここにぴたっと付く所に持ってきて20 回、これで統一できました。 そしたらここの内容を打ち変えてLOCATION としておきましょう。そしたらここにI LOVE NYC の文字を入れます。元テキストは、このI_heart_nyc.docx というWord のファイルに入っています。ではこの項目を選んでMac の方は CommandWindows の方は Ctrl キーを押しながらC を押してコピーします。そしたらテキストのエリアを作成してこれを Command もしくはCtrl+V で貼り付けます。そしたら、これを調整していきましょう。ではフォントサイズを160 大きくしましょう。そうすると、はみ出してしまうので大きさを調整します。横に伸ばしてこんな感じで収まるようにしておきます。そしたら、この文字のフォントそれはArial の中の Bold にしておきましょう。そうすると、こんな見た目になります。ではこれ「テキスト」の項目で真ん中揃えにしてそして「整列」で「コンテンツエリアに揃える」で中央にします。もう少し下の方に移動しておきます。そしたらこの文字の色を変更します。個別に I の部分は白そしてこのハートの部分ですけど、ここはPhotoshop からライブラリ経由で持ってきた緑にします。 そして NYC も白です。こんな感じにします。そしたら次はこの本文こちらを整えていきます。ではこの文章なんですけどこっちの頭の所と同じにしたいのでこちらを選んだ上で「段落スタイル」、これを開けて新規で作ります。そしたら、これbody と入れておきましょう。これで記録されたので下に移動してこちらのテキスト全部選んだ上で「段落スタイル」を body にします。そうすると、こんな感じに同じ字体となりました。そしたら一部分だけこの3行目の前半ここだけ選んでやってそしてフォント設定を開けて今 Lato の Regular なのでこれを Bold にしてあげましょう。そうすると、こんな強調した感じになりました。ではもう1個この下にボタンを持ってきたいのでこちらのステートボタンこれをコピーして来ましょう。Mac の方は OptionWindows の方は Alt を押しながらドラッグして持ってきます。そうすると、こっちに持ってこれるのですがスペースがちょっと足りない感じがしますので全体を 50% 表示にしてそしてこの部分少し下に持ってきます。紫色のブロックを下にずらして持ってきます。こちらを拡大したいですがこれは実は2個重なってできています。 なのでまず最初にクリックして選ばれる所、ここですね。これをちょっとだけ上にしておきます。そうすると、下地のピンクは出てくるのでピンクをグイッと伸ばしてやってそして改めて写真の方これを伸ばしていきます。大体これぐらいでいいかなと思います。そしたらピンクも合わせましょう。そしてこの紫、これも上に持って行って合わせます。そしたらこの位置に改めてステートボタンこれを中央に配置します。そしたら表示を、また 100% にしてそしてこちらの拡大でずれたアンカーの位置をドラッグして直しておきます。そしたら今 LEARN MORE となってるこのテキスト、ここをBOOK NOW としておきましょう。予約して下さい、という所ですね。このボタン、リンクの設定を行います。これは本当であればクリックすると予約のページに行くんですが今回は予約のページがないのでリンクの所ダミーとしてシャープを入れておきましょう。ではこの状態でプレビューしてみます。そうすると、下の方に行ってSESSIONS もタイトルができました。そして LOCATION もできてI ♡ NYC と出てきてBOOK NOW のボタン動作は上と一緒になってます。 これぐらい出来てくると要素が多くてもほとんどコピー&ペーストでちょっと変えるだけでできてきます。この様にコピーを多用すると効率よくサイトの構築が行えます。

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

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

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

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

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

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