Museで手軽にWebサイト制作

SoundCloudのリンクを埋め込む

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
SoundCloudのサイト上で埋め込み用のソースコードを取得し、それをMuse上に配置して埋め込む手順を解説します。
講師:
06:47

字幕

このレッスンでは ページの上に SoundCloud の音声を 埋め込む手順を解説します それではですね この Listen のページの上に SoundCloud の 音声ですね を持ってきて YouTube 動画と同じように 埋め込んでみようと思います YouTube の場合には 「ウイジェットライブラリ」の中ですね その中の「ソーシャル」から YouTube これを選んで持ってきました なんですが 今のところですね Muse の「ソーシャル」の中には SoundCloud のウィジェットというのは 用意されてないんですね では 用意されてないから できないかというと 実は こういった 用意されてないものに関しても こういった 埋め込みが出来るようになっています では実際にやってみましょう では ブラウザーの方に移動します 今ブラウザーに移動して 今回埋め込みたいですね 曲が表示されています ♪ (癒し系の音楽) ♪ このようなものですね ではですね まず この曲の埋め込みの コードというものを取得します では 埋め込みたい曲を探した上で この中の Share というボタンですね これをクリックします そうすると 共有に関するですね 項目が出てきます こうした Twitter や Facebook など SNS に対するものであれば ここから直にいけますが それ以外の自分のウェブサイトなんかに 埋め込む場合には この Embed というところを クリックします そうするとですね このように 埋め込みコードというものが表示されます 埋め込まれると このようなかたちに なるよというサンプルですね ではですね このコードが出てるとこ これを一回クリックします そうすると このように全体が 選択されたかたちとなるので Mac の方は Command Windows の方は Ctrl キーを押しながら C を押します これでこのですね コードがコピーされました では Muse の方に移動します そしたらですね 今コードをコピーしたもの YouTube の場合には ウィジェットの中に ID を貼り付けましたが SoundCloud の場合 ああいった何もないものの場合ですね 実はウィジェットなどなしでも 貼り付けることができます では ページの上の何もないところですね これ一回クリックしましょう この状態で Mac の方は Command Windows の方は Ctrl を押しながら V を押してください すると.. このような貼り付けが行われ ちょっと大きさがおかしいですが このようにですね さっきの Embed のコードを ウェブサイト上に貼り付けた時の表示ですね それが再現されます このようにコピペでいけてしまうんですね ではまだ位置も形もおかしいので これをですね調整していきましょう まず位置をドラッグして 下の方に持っていきます そしてですね 大きさがちょっと おかしくなってしまってるので これ 横に広げてみましょう ある程度の大きさにして放してやると 再計算されて 本来のですね 埋め込みのコードが 持っている大きさになります さっきの SoundCloud のものと 比べてみると この大きさですね 同じものがサイトの方にも埋め込まれました ただちょっとサイズが 大きすぎる感がありますね アルバムのジャケットが丸々出てて これはこれでいいんですが ちょっと もう少し狭くしたいななんて時には 調整することができます これなんですが 例えばただ単にですね これドラッグしてしまうと このように元々の持っている大きさに 戻ってしまいます なので 中のですね コードをちょっと 変える必要があります ではこのように コードの貼り付けで 埋め込まれたものですね これの場合には 右クリックすると 「HTML を編集」というのがあります これを開けてみましょう そうするとこの「HTML コード」の 編集にやってきます Muse はですね 基本的にこの HTML コード 扱わないというのが基本なんですが このようにどうしてもですね ウィジェットで対応してない サイトのサービスの埋め込みなんかですね そういった場合には 簡単な HTML このように貼り付けて使うこともできます これですが 一部分だけですね この高さの設定があります それが今 「450」 ピクセルとなってます 幅はですね 設定された 「100%」になるようになってます ではこの高さ 450 になってる部分を 今回は 「200」 にしてみましょう そして OK します そうすると再計算されて このように プレーヤーのですね 高さがちょうどいい感じになりましたね では このオブジェクトの高さとしてはですね 余白が出てしまってるので これを このように一回リサイズして そして最適な形ですね ぴったりの形にまとめます これでですね 動画と音声 両方ですね 見ることのできる リッチなですね 視聴のページができました 一回プレビューで見てみましょう プレビューの方にも SoundCloud の プレーヤーのリンクが貼られました ではこれ プレーボタン 押すと .♪ (癒し系の音楽) ♪ .♪ (癒し系の音楽) ♪ このようにですね 再生して プレビューすることができます 同様にですね このように 読み込みコードを 取得できるサービスというのは色々あります そういった場合 ウィジェットがないという場合でも HTML ですね 直に貼り付けて このように埋め込みを行うことができます 方法ですね やってみると簡単ですので 是非ともチャレンジしてみてください

Museで手軽にWebサイト制作

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

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

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

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

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