Museで手軽にWebサイト制作

プロフィールページのレイアウト

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
プロフィールページに、テキストエディタとPhotoshopからのコピー&ペーストで素材を配置し、回り込みを設定したレイアウトを行います。
講師:
07:04

字幕

このレッスンでは、 プロフィールページの 作成を行います はい、それでは プロフィールのページを 開きます はいではここにですね、 プロフィールの文章と 写真を載せて プロフィールの ページを作成します その素材なんですが まずですね、 素材に入ってる プロフィールテキスト これはプロフィールの文章ですね テキストファイルになっています はいそしてもうひとつ フォトショップのほうで開いてますが PSD、ソーニャPSDという フォトショップのファイルですね これプロフィール写真です ここ見てみると フォトショップのレイヤーでですね 色の調節やなんかが行ってあります これらをミューズに配置して ページの作成を行います ではですね、まず プロフィールの文章 これを流し込んでみましょう そのやり方なんですが 非常に簡単な方法があります コピーペーストすることが可能です ではテキストファイルですね テキストを全部選んでおきます はい マックの方はコマンド ウィンドウズの方は コントロールしながら Aを押すと、 大体のテキストデータで 全体が選べますね はいそしたら、コマンドもしくは コントロール"C"を 押すと、コピーされます はい、そしたら 次にこれですね ページのほうに来て、ここでコマンド もしくはコントロール、 "V"を押します はいそうするとこのように リストがですね、ブロックとして 貼り付けられます はい、でこれサイズをですね 替えてやると、このテキストを 置く範囲を 調整することが出来ます はいではですね、 次写真を配置しましょう この調整した写真 改めてJPEGかなんかに 書き出しても いいんですが、 実はフォトショップから 簡単に持って来る 方法があります。はい、 ではフォトショップでも コマンドもしくは コントロール、Aを押して 全体を選びます これでですね 普通にコピーしてしまうと、 今選んでる レイヤーしかコピーされないので 例えばここで言うと このベターのですね この周りの ちょっと暗くしてる部分 ここしかコピーされないんですが はい、これがですね 編集メニューの 結合部分をコピー これを実行すると 今見えてる絵ですね そのものがコピーされます はい、これでミューズに持って来て ペーストすることが可能です はい、普通にペーストしても いいんですが 今回ですね、 テキストと組み合わせた形で ペーストしてみましょう では、はいテキストのですね これ入力状態します。 ダブルクリックすると カーソルが出て来て 入力可能な状態になりますね そしたら、この名前の 次の行ですね はい、プロフィールの始まる部分 ここにカーソルを持って来ます はい、この状態で コントロール、 もしくはコマンドVを押すと はい 画像がペーストされましたが ちょっと見て下さい ここですね、名前があって 画像があって そしてその下の方にですね、 文章があると 画像が差し込まれた 状態となりました はい、ではこの画像ですね ちょっと小さくしてってみると はい、こんな形でテキストもですね 連動するようなってます では、この状態でですね 回り込みというのが 有効になってるので これクリックします はい、そしたら回り込みで この画像左側の配置ですね これをクリックすると はい 画像がですね テキストの左側に 回り込むようになるので このボックス全体の サイズですね これを ちょっと横に伸ばしてくると はい、こんな感じで 画像の横の部分にですね テキストを配置して 回り込ませること 可能となります はい、ではですね、今 これ画像とテキスト ぴったりくっついてしまってるので これをですね 回り込みのオプションで オフセットというところですね これクリックすると はい、このように 画像の上下左右ですね ここにオフセットを 設けることが出来ます 今回15度にしときましょう はい、そしたら このテキスト全体もですね 今ボックスのはじっこに ぴったりくっついているので テキストのオプションですね はい、これ左右の スペースの設定があるので ここにも10を 設定しておきます 左右のマージンを 自由に設定することで この画像と同じ幅だけですね 外側からも 開けることが出来ます はい この状態になるとですね このボックスの サイズを調整するだけで それにぴったり合った形ですね このように レイアウトが可能となります はい、ではですね、この ボックスに色を付けてみましょう では、この塗りの部分ですね はい、ここを選んで では、白を選んで下さい そうすると テキストの部分が白く塗られました はい、それではここでですね コーカをクリックして はい、これですね、シャドー これを実行しましょう するとこのようにボックスに シャドーが適用された 状態となりました さあそしてこの名前の 部分ですね、 これちょっと小さいので テキストのサイズ 24にしておきましょう はい、そして 中央に配置して 後はですね サイズを 丁度テキストが入るところまで 調整してあります はい、ではこれで プレビューしてみると はい このような形で プロフィールのレイアウトが 出来ました はい、ミューズですね このテキストや画像といった素材 コピーペーストで簡単に 持って来ることが出来ます しかもこのようなですね、 回り込みも 簡単に設定出来るので ワープロなんかで 文章を作ってるような 感覚でまさにウェブページを 作ることが出来るんですね これ便利ですので 是非とも使ってみて下さい

Museで手軽にWebサイト制作

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

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

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

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

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