Museを使ったWebサイト制作ワークフロー

段落スタイルを使用

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ブロックの見出し部分でフォントとサイズ、色などを選択して段落スタイルに登録し、見出しの体裁を整えます。
講師:
00:06:25

字幕

このレッスンでは見出し部分の作り込みを行います。それではこのそれぞれのブロックの見出しを作り込んでいくんですがまず下準備をしておきましょう。まずそれぞれのブロック今写真の配置のために半透明になってるのでこれを全部 100% 表示にしてしまって最終的な色がわかるようにしておきましょう。そしたらレイヤーのパネルを開けてもうかなりブロックも配置してあるのでこのプロトタイプの画像一時的に見えなくしておきましょう。これでも、もう作業できますね。この状態を元に作業していきます。では見出しの所のテキストブロック今は仮で置いてあるだけなのでこの下のブロックの所に合わせてあげましょう。ちょっと拡大して表示します。そして、それぞれのテキストのブロックがこっちとあってるかですね。こんな感じにずれていたら微調整して位置を合わせてあげます。次に行きましょう。こちらもちゃんと下のブロックと合うようにします。サイズ自体は同じものを使ってるので位置さえ合わせてやればピッタリと合ってきます。ではこれでそれぞれの位置が合いました。そしたらテキストの見た目をちゃんと合わせていきましょう。まずテキストですが、これですね。使用するフォントを決めます。 今回使うのは「Open Sans」「メニュー」の作成に使ったのと同じフォントですね。Open Sans の、大きさは22 ポイントに設定しておきます。そして色は白ですね。そうすると、この様な見た目になりました。これをすべてに持っていくわけなんですが1個1個同じことをやると面倒なのでこれを記録しておきましょう。このテキスト、これをこの段落スタイル出ていない場合には「ウィンドウ」メニューから「段落スタイル」ですね。これを開けてやります。そうして、この新規作成のアイコンをクリックすると新たに「段落スタイル」というのが登録されました。これダブルクリックするとこの様に詳細設定が出てくるのでじゃあ「スタイル名」という所ですね。この様に名前を付けておきます。そうすると、他のテキストを選んでる時にこれをクリックするだけでこの様に同じ段落の色んな書式これを適用することができます。こちらもこの様に同じになってきます。そうしたら今ちょっと端っこにくっつきすぎてるので「ウィンドウ」>「スペース」ですね。これを実行します。そしてこの「パディング」これを設定することでこの様に端っこからのスペースを空けることができます。 これをそれぞれの文字の所で12 に設定しておきましょう。そうすると、この適度にスペースをとった形となります。そしたら今このテキストのブロックは下地がそのまま出ている状態ですがここにブロックを選んでる状態で「塗り」をクリックしてそして「画像を追加」これで diag_pattern という所ですね。これを開きます。そうすると、この様に後ろに斜線が入ってきます。これはまだ1回貼ってあるだけなので「サイズ調整」という所で「並べて表示」とやってやるとこの様に全体が満たされた表示になります。それではこちらも同じように画像を追加してそして並べて表示します。これらも1個全部この背景パターンまで作ってからコピーしても OK ですね。そしたら下の方にあるものも同じく画像を追加して並べて表示します。これで見出しの部分の装飾ができました。特にこの段落の中のフォントであるとかサイズこれらは段落スタイルに入れてやればすぐに再現できるので是非ともこうしたワンタッチで再現できる手法、試してみて下さい。

Museを使ったWebサイト制作ワークフロー

HTMLを意識せずにデザイン性に富んだサイトを制作することができるMuseを使えば、ワークフローを整理することでより効率的な作業を行えるようになります。このコースではPhotoshopやInDesignを使ったプロトタイプの作成やTypeKitフォントの使用、グラフィックの配置や書式の設定、サイトのエクスポートに関するテクニックなどを学びます。

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

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

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

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