ブログにyoutubeを貼り付ける(埋め込み)方法は?スマホサイズへの対応も

 

どうもナガサイです。

 

ワードプレスでブログを書いていくときにyoutubeの動画を埋め込みたい時はないですか?

 

ブログにyoutubeの動画を埋め込むだけで滞在時間も増えるしメリットが大きいです。

 

更にスマホサイズで動画を埋め込む方法も紹介しますね。

ワードプレスブログにyoutube動画を貼り付ける方法

 

 

まずはブログに貼り付けたい動画をyoutubeから探します。

 

記事中に埋め込みたい動画が見つかったら動画の下にある共有ボタンをクリック!

 

 

共有をクリックしたら「埋め込みコード」をクリックします。

 

そうすると動画の埋め込み用コードが出てきますのでコピーします。

 

 

コードをコピーしたら記事を開いて貼り付けます。

 

 

ワードプレスで記事を書く場合、ほとんどの人がビジュアルモードで書くと思いますが、この状態で動画の埋め込みコードを貼り付けると下の画像の様になります。

 

 

ビジュアルモードのまま貼り付けると動画が表示されないんですよね。

 

なのでコードを貼り付ける時だけテキストモードに切り替えます。

 

 

テキストモードに切り替えると「ビジュアルモード」の時に空白の行だった場所が と表示されます。

 

これは消さない様に注意してください。

 

消してしまうと空白の行がなくなってしまいます。

 

ではプレビューを確認します。

 

 

この様にテキストモードで貼り付けると動画が表示される様になります。

 

パソコンではこの様にちゃんと表示されますがスマホではどうでしょうか?

 

スマホでも動画を綺麗に表示したい時の方法

先ほど動画を埋め込んだ記事をスマホで表示してみましょう。

 

こんな感じです。

 

 

スマホのスクリーンショットで撮ってみたんですが、youtubeの動画が半分切れています。

 

スマホ対応になっていない状態ですね。

 

ここ最近ではスマホからのユーザーが多いのでここは直しておきましょう。

 

まず動画の埋め込みコードを貼る位置に下のコードを貼ります。

 

<div class=”v-wrap al-c m30-b”></div>

 

コードの使い方はこんな感じです。

 

 

この状態でスマホを確認してみましょう!

 

スマホの画面内にyoutubeが収まりました。

 

これでばっちりですね。

 

ではまた。

 

関連記事

  1. 商用可能な写真やイラストのフリー素材はある?おすすめサイトは?

  2. ffftpの使い方と設定!初心者が悩むアップロード出来ないエラーがでる…

  3. ワードプレスのスマホ表示で見やすい(読みやすい)記事の書き方とは? 

  4. アドセンスのクリック単価を上げる方法は?高いジャンルと平均についても

  5. パーマリンク(wordpress)の設定とおすすめは?途中で変更しない…

  6. アドセンスでの規約違反NGワードって何?

  7. エックスサーバーの申し込み方法!ワードプレスって複数管理できるの?

  8. ブログ名が決まらない?名前の決め方付け方を紹介!

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。