わがままに自由に自分らしく人生を描こう
会社のお給料に振り回されて、人間関係で疲れ果て・・そんな人生はもう終わり。【ブロトレ】をキッカケに”わたしらしく自由に思い描けるライフスタイル”を手に入れよう!
動画・画像挿入方法

YouTube動画をレスポンシブで埋め込みする方法【WordPress】

こんにちはkana(旧HN/nako)です!

 

ブログを運営していると、記事内にYouTube動画を埋め込みすることがあります。

そのYouTube動画がスマホでちょうどいいサイズで表示されずに、とてもみずらくなってしまうことってあるんですよね

 

どーやったら上手に表示できるのか・・・

試行錯誤してみた結果、解決したので情報として残しておきたいと思います。

『レスポンシブ』とは?

れすぽんしぶ・・・って何?

初心者の頃はこんな感じだったのですが、サイトを運営していくとよく聞くワードになります。

レスポンシブを簡単に言うとPC、タブレット、スマートフォンなどの異なる画面サイズに合わせて最適に、見やすく表示させるデザインの事のようです。

 

PCのみの表示にしか対応していないwebサイトを見る場合、スマートフォンだとPC表示されしまうので拡大しないとみずらかったりしますよね(^^;

YouTube動画も、スマホやPC、タブレット、どのデバイスで見ても最適なサイズに表示してくれる「レスポンシブ設定」をすることができるんですね。

 

テンプレートによっては自動でレスポンシブ設定になるテンプレートもあるようです。

WordPressテンプレートの『simplicity』に関しては自動でレスポンシブ設定になるようなのでコチラはやる必要はないと思います。

YouTube動画をレスポンシブで埋め込みする方法【動画】

 

YouTube動画をレスポンシブで埋め込みする設定

 

①YouTubeの埋め込みコードを取得する

 

②CSSにコードを挿入する

↓コチラをコピペしてCSSに貼り付けをしてください↓

 

③AddQuickTagにタグを設定する

※AddQuickTagインストールされていない方は

インストールしてから作業をしてください。

インストール方法がわからない場合はコチラの動画を参考に導入してください。

簡単にタグを挿入できる便利プラグイン!AddQuickTag導入方法こんにちはkana(旧HN/nako)です! 今回はワードプレスプラグイン『AddQuickTag』の導入方法について動画...

 

AddQuickTagをインストールしたら

↓コチラをコピペしてAddQuickTagに貼り付けをしてください↓

<div class=“youtube”>YouTube埋め込みコード</div>

 

いかがでしたか?

コチラの設定さえできてれば、あとは記事編集の画面で毎回タグを入力することもなくYouTube動画を貼り付けすることができます^^

 

是非参考にしてみてください♪


blog trainer:kana(旧HN/nako)

◆わがままに・自由に・自分らしく◆

HSPで人間関係に疲れて副業からPC1台で自由になった女


1983年6月生まれ

[マイブーム]
・映画をひたすら鑑賞する事
・シュールな動画や画像を集める事
・ショールームの前田さん
・お金を数える事(←)

[Activity content]
●ブログコンサル
●webマーケター
●マインドメンタリング
●人材育成研修トレーナー

2020年1月より日本最大級webビジネスコミュニティAugustaAcademyZEROのSEOコンサルタント就任。

M.ダックスのそら君11歳と、自宅を職場に時間や場所や人に束縛されないストレスフリーなライフスタイルを描き中♪

[history]
なくなんとなくの10代、MLMで大失敗して自己破産をした20代。
仕事では人間関係に病み、30代では理不尽な理由でクビ宣告。

何もかも疲れ切って追い込まれ
「もう人や会社に依存する生き方から抜け出して人生を変えたい」
と思った時に出会ったのがインターネットビジネスでPC1台で稼ぐという世界でした。

副業から飛び込んで5か月目にはPC1台の収入で生きられるようになり、今では誰に振り回されることもなく時間や場所にとらわれず、クレジットカードも復活できてPC1台で約30万円程度稼ぎながら自由きままな生活をしています。

『わがままに・自由に・自分らしく生きる』をテーマにただいま絶賛奔走中!

過去の私と同じようなジレンマを抱えて悩んでいる方へむけて、ブログで自立した生き方ができるという事を広める為にコンテンツ配信を開始。
私が今まで失敗や成功を繰り返して身に付けてきたノウハウを詰め込んだ、無料メール講座と教科書を発行しています。

もしあなたが、PC1台でライフスタイルを変えていきたいけどどうしていいかわからないという場合は、無料ですので【ブログが勝手に収益を生んでくれる仕組みを作る為の月収+10万円の秘訣】を下記バナーよりを入手してみてくださいね。