ワードプレスや賢威でYouTube動画を埋め込む際スマホ用にレスポンシブにする方法


ブログの滞在時間を伸ばす方法の1つに、記事内に動画を埋め込む、という方法があります。

ここでは、YouTubeの動画をワードプレスや賢威のブログ記事に埋め込む方法について解説します。

ワードプレスにYouTubeの動画を埋め込む

ワードプレスのブログ記事に動画を埋め込むと、このような感じになります。

スクリーンショット 2014-08-12 4.02.47

 ※これは画像です

 では早速、YouTubeの動画をワードプレスのブログ記事に埋め込む方法について解説します。

YouTubeから埋め込みコードを取得する

まず、YouTubeで記事に埋め込みたい動画を見つけたら、動画の下にある『共有』をクリックします。

スクリーンショット 2014-08-12 3.48.36

『共有』をクリックすると『埋め込みコード』のボタンが表示されるので、

『埋め込みコード』をクリックします。

スクリーンショット 2014-08-12 3.51.17

埋め込みコードをクリック後、動画のサイズの選択、動画再生終了後の関連動画の表示の有無を決めた後、最後に埋め込みコードをコピーします。

コピーが出来たら、ワードプレスの記事投稿画面を開きます。

スクリーンショット 2014-08-12 3.56.08

記事投稿画面では、まずは右上の『テキスト』をクリックします。

そして、埋め込みたい場所に、ユーチューブで取得した埋め込みコードをペーストして下さい。

そして、記事を更新すると、このようになります。

スクリーンショット 2014-08-12 4.01.05

このようになればワードプレスの記事にYouTubeの動画を埋め込むことができます。

賢威でスマホ用にレスポンシブ対応させる方法

サイトのアクセスはパソコンからだけでなく、スマホからのアクセスもあります。

ワードプレスでは、そのようなスマホから見た時のデザインを考慮した、いわゆる「レスポンシブ対応」というのが重要になってきています。

スマホからサイトにアクセスしてみた時に、そのレイアウトが崩れていたら、見づらくて訪問者はすぐに帰ってしまいます。でも整ったデザインであれば、ブログの滞在時間が伸びることは言うまでもありません。

しかし、このYouTubeの動画は、上記のようにただ貼り付けただけではレスポンシブ対応になりません。スマホ(Samsung Galaxy S4での表示)で見た時にはこの様になってしまいます。

スクリーンショット 2014-12-21 13.12.01

せっかくのYouTube動画が一部フレームアウトしてはみ出してしまい、レイアウトが崩れてしまうんですね。

スマホ用にレスポンシブ対応させる方法は、CSSコードを使います。実は賢威には予めこうしたYouTube動画をレスポンシブ対応させるためのCSSコードが指定されていますので、それを使います。

やり方は簡単です。次のコードでYouTubeの埋め込みコードを囲ってやればいいのです。

<div class=”v-wrap”></div>

実際にYouTubeの埋め込みコードを囲うとこの様になります。

<div class=”v-wrap”><iframe width=”560″ height=”315″ src=”//www.youtube.com/embed/l8MAmTb0Z2I” frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></div>

これをテキストエディターに貼り付けることで、YouTubeの動画がはみ出さないようにできます。つまりスマホ用にレスポンシブ対応になるということです。

実際にスマホ(Samsung Galaxy S4での表示)の画面にして見てみましょう。

スクリーンショット 2014-12-21 13.31.11

今度は、はみ出していないですよね。

この「<div class=”v-wrap”></div>」を使えば、スマホは勿論、タブレット端末でも同様にレスポンシブ対応にさせることができますので、是非とも覚えておきましょう。

今回の記事はお役にたてましたでしょうか?

もし、今回の記事を読んで感想や分からない事などありましたら、下のフォームよりお伝え下さい。

些細な事でも構いません。

おそらく、あなたが抱いた疑問は、これからこの記事を読む方も抱く疑問です。

そういった疑問を1つ1つ解決していきます。

コメントして頂ければ気づき次第、すぐに回答いたします。



総合案内

著者情報
著者情報
年収1000万円まで守る2つの事
読者さまの声
読者さまの声
もくじ
もくじ
超初心者講座
超初心者講座
ブログ基礎講座
ブログ基礎講座
トレンドブログ講座
トレンドブログ講座
パワーブログ講座
パワーブログ講座
マインドセット
マインドセット
コピーライティング
コピーライティング
ブログアフィリエイト
ブログアフィリエイト
トレンドアフィリエイト
トレンドアフィリエイト
ネットビジネス
ネットビジネス
SEO
SEO
コラム
Googleアドセンス
Googleアドセンス
与える事に徹する
与える事に徹する
先生の選び方
先生の選び方
Googleアドセンスの始め方
Googleアドセンスの始め方
賢威カスタマイズ
賢威カスタマイズ
このブログについて
このブログについて
女性のブログアフィリエイト
女性のブログアフィリエイト
そもそものステップが違う
そもそものステップが違う
中高年の方はシンプルな方法がお勧め
中高年の方はシンプルな方法がお勧め

このページの先頭へ