Muse CC 2015のアップデート

ビデオ系ウィジェットのレスポンシブ対応

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または

従来はレスポンシブな幅と高さを設定できなかったYouTube及びVimeoウィジェットの変更点を解説します。

講師:
03:52

字幕

このレッスンではビデオ系ウィジェットのレスポンシブ対応について解説します。それでは今こちらには真っ新なページが立ち上がっています。では「ウィジェットライブラリ」を開けてその中の「ソーシャル」ですね。その中には下の方にVimeo と Youtube2つのビデオ系のウィジェットが入っています。これは以前から入っているものです。それでは、Youtube をドラッグ&ドロップで持ってきます。そしたら、ページの中央に配置します。では、一度これを「ファイル」メニューの「ブラウザーでページをプレビュー」こちらでプレビューしてみましょう。そうすると、書き出しが終わってこちらが実際のブラウザーです。今配置した Youtube のウィジェットが入ってますね。再生すると(動画の再生音)この様な形で動画が再生されます。ではページの横幅をちょっと変えてみましょう。そうするとこの様にレスポンシブにサイズが変わって小さくなったら(動画の再生音)ちゃんと小さくなったサイズで再生されています。一見何気ない機能のようですが実はこれ新しく装備された機能を使っています。Youtube のウィジェット選択して「変形」、ここを開けてみて「サイズ変更」の中身を見てみましょう。 今設定が「レスポンシブな幅と高さ」となっています。動作をもう1回見てみるとページ幅が変わると、そのままウィジェットの幅と高さも変わっています。実は、以前の Muse ではこの Youtube と Vimeoビデオ系のウィジェットに関してはここが「レスポンシブな幅と高さ」に設定できませんでした。以前はここがなくて「レスポンシブな幅」かそれとも横幅いっぱいの「ブラウザー幅に合わせて拡大・縮小」どちらかだけになってました。試しに「レスポンシブな幅」にしてもう一度ブラウザーでプレビューしてみましょう。そうすると十分幅が足りてる場合には良いのですが幅が狭くなっていくとこの様にプレイヤーの幅だけが変わってしまっていました。そして再生すると(動画の再生音)一応動画自体はちゃんと全体が表示されるので問題はないですがただ、やはりこのウィンドウ自体が動画のサイズにあってないというのは気持ちが良いものではないですね。その点、新しい「レスポンシブな幅と高さ」マッチしてるとこの様にエリア内のサイズに動画のサイズがピッタリ合った気持ちいい状態となります。現在、既に Muse を使われていてYoutube や Vimeo の動画を埋め込んでいるという方も多いと思いますが現在、もしこの部分が「レスポンシブな幅」になっていたら改めて「レスポンシブな幅と高さ」こちらに再設定することをお薦めします。 是非既存の Muse 製の Web サイトも再チェックして下さい。

Muse CC 2015のアップデート

Webデザイナー以外でもスタイリッシュなWebサイトを簡単に作れるMuse CCに、2015年6月のアップデートでさまざな新機能や機能強化が加わりました。このコースではいろいろなWebフォントが使えるType Kitへのアクセス、コンタクトフォームなどのウィジェットの進化、レイヤーパネルの強化や自動ライトボックスなどを紹介します。

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

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

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

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