ワードプレスや賢威で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>」を使えば、スマホは勿論、タブレット端末でも同様にレスポンシブ対応にさせることができますので、是非とも覚えておきましょう。

次ページ

12次

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

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

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

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

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

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

このブログは、

・アフィリエイト開始初月から9万円のネット収入が得られた秘密

アフィリエイト開始2ヶ月目で以前勤めていた会社からの給料と
 同額
のネット収入を確保した方法

・5ヶ月目で月収120万円を達成した最先端テクニック

・これから流行り始めるブログマネタイズの新しい思考法

などを書いています。

只今、ブログの内容をより体系的にまとめたビジネス教科書を
無料でプレゼントしています。

以下のフォームに教科書を受け取るメールアドレスと、
あなたの苗字を記入してプレゼントをお受け取り下さい。





記事一覧


著者:ヒデアキ
現在は、毎月100万円の収入を得ているブログアフィリエイトの知識を活かして「新たな収入源を手に入れ大切な人を守りたい」と真剣に考えている方を全力でサポートしています。
更に詳しいプロフィールはこちら


このページの先頭へ