Museで手軽にWebサイト制作

メインページのレイアウト

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ホームのページにアルバムジャケットの画像を配置してキャプションを付け、視聴ページへのリンクを設定します。
講師:
09:06

字幕

このレッスンでは、ホームのページに アルバムの画像を配置します はい、それではですね ホームのページを開きます はい、サイトにアクセスして 一番最初に出てくるこの部分ですね ですね、ここにアルバムの ジャケット写真を置いてみましょう はい、それでは ファイルメニューの配置を クリックします はいそして、この レッスンのですね、0301の フォルダの中にある CDジャケットJPG この素材を開きます はい そうするとこの小さな サムネールになって 配置場所を決められます まずはどこでもいいので クリックして置いてみましょう はい、そうすると このようなアルバムジャケットの 写真が配置されましたが ちょっと大きすぎますね これをですね、 適度な大きさに直して 配置したいと思います はい、大きさを直すときには この選択されてる時出てくる 部分ですね ハンドルというとこですね ここをドラッグするんですが 一点注意点があります 例えばフォトショップや イラストレーターといった 他のアドミにツールに 慣れてる方は、これですね 何もしない状態で このハンドルをドラッグすると 画像の縦横の比率が 変わってしまうっていうことが あると思います 今何も他のキーを 探らずに、画像の端っこですね これドラッグすると ちゃんとですね 縦横の比率を 保ったままで このように 縮小されます はい、フォトショップや イラストレーターで 縦横の比率を保ったまま このように 縮める時には シフトキーを押しながら ドラッグするんですが ミューズは シフトキーを押しながら ドラッグすると、 今度逆にですね 縦横の比率 変わってしまうんですね はい 他のアドミのツールと 逆の動作になってるので 他のソフトに 慣れてる方はですね シフトキーを押しながら ドラッグしてしまいがちなんですが ミューズは何もしないでも ちゃんとですね 割合は保たれたままで 拡大縮小が行われます これ間違いやすいので 気を付けて下さい それでですね ドラッグしてると パーセンテージが出ますね 何パーセントと出るので これ50%しましょう はい この大きさで ページのセンターに 貼っておこうと思います 真ん中に配置する時なんですが これドラッグしていくと あるポイントに来るとですね はい、今出ましたね このように赤い線が この辺に出てくるのがわかるでしょうか 持って来ると ぴちゃっと吸着します はい、この赤い線がですね 真ん中に来たという 印になります 特に他のコマンドを 使わなくても ドラッグしていって ぴたっとですね 赤い線が出てくるところ ここに来れば センターということなので 大変便利ですることが出来ます はい ではこのセンターの位置ですね この状態で 放します はい、ではセンターに アルバムの画像がやって来ました ではこの画像ですね クリックすると リッスン、視聴のページに 飛ぶようにしたいと思います では 画像を選んでおいて はい、上のバーにですね ハイパーリンクというところがあります これが他のページなどに リンクするための こっち側ですね この中でこのメニューを開けると 既に用意してあるページはですね ちゃんと一覧の中に入っています ではここからリッスンを 選んでおきます はいこれで、このですね、 画像に リンクが設定されました 一回ですね、えーちょっと プレビューして見てみましょう ではプレビューの ボタンをクリックします はいそうすると ミューズの中のプレビュー機能で このようにですね 表示されました はい、メニューなんかもですね ちゃんと覚えてますね 今ホームのページにいます では、これでアルバム画像を クリックすると はい、まだ内容が 出来てないですけど、 リッスンですね ここのページに飛ぶという そのような状態になってます はい、それではですね この画像の下のところに アルバムの名前 「ミュージックオブフォレスト」 という名前ですが これ「ナウンオンセルト」 テキストを打ってみましょう ではテキストのツール これを選びます はい、そしたらですね この画像の下の辺り ドラッグすると、 (音声不明)を作れるので はい、適当な大きさで 作っておきましょう はいそしたらここにですね 文字を入力します ではフォントですね 取りあえず ヘルべチカ、 これを選んでおきましょう はい、では ニュー... アルバム... ミュージック オブ フォレスト はい、ナウ オン セルト はい、このように作ってみました はい、そしたらですね これを真ん中揃えに したいと思います 真ん中揃えは このテキストっていうところですね これをクリックすると テキストの詳細が出て来ますので で中央揃えに 直します はい でですね、今まったく 同じフォントで売ってるので 並び良くないとこ、 目立たないですね はい、ここだけですね アルバム名のとこ 目立たさせたいと思うんですが 特定のですね 文字をですね、他の フォントを使ってみたいと思います はい、ウェブページなんですが 基本的ですね このように文字として使える フォントというのは パソコンの中の入ってるものが 依存するので 特定のですね パソコンの中に入っている色んな フォントを使ってしまうと 再現されないっていう 問題があるんですね ところが、それをですね、解消する ウェブフォントというものがあります ウェブフォントは、えーその 使われてる部分だけですね ウェブからダウンロードされてきて 表示されるので どのパソコンでも 同じように見られるという 大変便利なフォントですね はい、ミューズから そのウェブフォントを 簡単に使うことが出来ます では このフォントのところを開けて はい ウェブフォントを追加、これを クリックします するとウェブフォント追加の ウィンドウが出てくるので 開始ですね これをクリックします では今回は このブレーニーというやつですね これを使ってみましょう はい、クリックして 選択された状態になったら オッケーをクリックすることで ミューズのほうに追加されます このパソコンはもう追加されてるので こんな表示になってます 追加されると フォント一覧の中の ウェブフォント というところにありましたね、 ブレーニー ブラック、 これさっきのフォントですね これが用意されます このような緑色の をしたアイコンがついています はい、それではですね ミュージックオブフォレスト この部分を選択してる状態で フォントを ブレーニーブラックにしてみましょう はい変わりましたね そしたらサイズを 24にしましょう はい、そして改行されてしまったので テキストボックスの大きさですね 若干直します はい、そして これもドラッグしてくと ピタッと先端位置が出てくるので はい、こんな感じになりました ではこれで もう一回プレビューしてみると はい、こんな状態になりましたね でちゃんと、こうした かわいいフォントで ミュージックオブフォレスト 書いてありますが よくですね、こういった表示って 画像になってしまうんですけど テキストのままですので ちゃんと選択することが出来ます はい、このようにですね フォントを変えてもちゃんと 表示されるという これは便利な機能ですね デザインの幅が広がってきます はい、ではこれでですね ホームのページの基本部分 アルバム画像と タイトルの表示ですね それと、アルバム画像からの 視聴へのリンク、 これが完成しました

Museで手軽にWebサイト制作

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

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

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

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

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