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

スピーカーセクションの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スピーカー(講演の出演者)の一覧部分を、整列やコピーなどの機能を活用して効率よく仕上げる手順を解説します。
講師:
08:47

字幕

このレッスンではスピーカーセクションのエディットを行います。それではフォームを開けて、この部分出演者、スピーカーの部分ですね。ここをエディットしていきましょう。では、今かなりこの並びが適当になってるのでまず写真を揃えましょう。では、まずこの写真を左側にスナップします。そして右側の写真は右側のこのラインにスナップします。この状態で、まず1個クリックしてShift キーを押しながら1個ずつクリックして全部この列、選んでおきます。そしたら「整列」を開けてそして整列ですね。「選択範囲に揃える」これを選んだ上で「水平方向中央を基準に分布」とやってあげると均一に揃えました。そしたら中央揃えをやっておくと完全に揃います。上がそろってしまえば下の列は別途クリックしてこの上の写真に合わせる形でドラッグしていけば揃います。上下は横の同じ行に並んでる所で揃えてあげます。そしたら、この上からの位置をもう少し下まで持ってきたいんですけど基準を決めましょう。では、またこちらを Shift キーを押しながら順番にクリックして行ってそして、ドラッグしてこのエリアの一番上にスナップさせます。そしたら決まった量だけ動かしましょう。 では Shift キーを押しながらカーソルキーの下を8回押してみて下さい。やってみます。Shift を押しながら1 2 3 4 5 6 7 8 とそうすると、これだけの量動きます。これが Shift キーを押してないともっと少なくなってしまうので気をつけて下さい。そしたら、この下の方ももっと持ってきたいのですけどエリアが足りなくなってるので1回これを 50% ぐらいにします。そしたら、このスピーカーエリアの下それを纏めてドラッグして選びます。纏めて選んだ状態でこれを下にドラッグします。ドラッグする時 Shift キーを押してると横にずれなくてすみます。1回思いきってグリッドを下げてしまいましょう。そうすると、フッターも下がって全部がずれてくれます。そしたらこのグレーの部分クリックしてハンドルを表示させてドラッグしてエリアを拡げておきます。そしたらこのアンカーも邪魔なので、これも下の方に持ってきておきます。ではこれらの写真、 Shift キーを押しながら順番にクリックして選んでぴたっと上の写真にスナップしている所ここから Shift キーを押しながら1 2 3 4 5 6 7 8 と押してやると同じだけ上がります。 ではアンカーをまたこれぐらい持って行ってこの四角形、上下の空いてる所、同じぐらいにしましょう。こんな感じですね。そしたら下のこれらのエリアを再び全部選びます。そして、ピッタリとこちらに付けてやると丁度いいサイズになりました。では、ここにタイトルを付けます。1回作ったこちらのタイトルがあるのでMac の方は Option キーWindows の方は Alt キーを押しながらこれをドラッグしてきます。すると、こんな感じで入れることができます。では、ここの部分にテキストSPEAKERS と書いておきます。そしてここの部分フォントサイズちょっと小さくでは、数値入力で28 としておきましょう。そしたら、これを後から使いたいのでウィンドウのメニューから「段落スタイル」これを出していきます。そして「段落スタイル」の所「新規作成」をクリックして保存しておきます。では、これダブルクリックして名前をsection heading とでもしておきましょう。これで、これ以降、同じもの作る時に簡単に適用することができます。そしたら次にそれぞれのスピーカーの名前を入力したいので100% に戻しましょう。そしたら、ここの所テキスト作ります。 テキストボックスをこんな感じで作ってあげてそしたら文字を設定するので仮でなにか文字を入れて色を白にしましょう。そしてフォントがArial ですね、Arial の Regularそして 18 ポイントにしてそして中央揃えにしておきましょう。こんな感じですね。そしたらこれを全員の所にコピーします。Mac の方は Option キーWindows の方は Alt キーを押しながらドラッグするとこんな形で複製してそれぞれの所に持っていくことができます。では、名前を入力していきます。これらの所に1人1人の名前を入れていきます。こういうのは事前にテキストなどに入力しておいてコピー&ペーストすると楽です。こちらもペーストします。あと一人ですね。もし2行になってしまったら微妙に広げてやったりして調整してあげます。そしたらこの様な形になったのであと、アンカーをちょっともう少し左の方に寄せておきましょう。そうすると、いろいろ作業するのに邪魔になりにくくなります。ではこんな感じでプレビューしてみるとこんな形でセクションができました。こうした同じものの繰り返しの所特にコピーとか活用すると効率よく作業が行えるので是非とも覚えて下さい。

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

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

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

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

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

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