THE THORのyoutube埋め込み方法!

  • 2020年7月25日
  • 2020年8月14日
  • THE THOR
  • 9view

こんにちは!ブログを書いて1年で月収60万円突破したみのりんです。

Youtube動画を記事に配置しているブログをよく見かけます。検索の表示結果にも出てくる場合があるのでご自身のYoutube動画があればぜひ乗っけてみてください。

THE THORでは、動画をトップページのヘッダー部分にも配置することが可能です。

THE THORの動画を埋め込む方法をお伝えしていきます。

THE THORでYoutube埋め込みができる部分は?

まず、THE THORでYoutube動画が配置できる部分を確認しておきましょう。

  1. トップページのヘッダー部分
  2. 記事中
  3. サイドバー
  4. トップページ上部
  5. トップページ下部
  6. 投稿ページテキスト上
  7. 投稿ページテキスト下

THE THORのYoutube動画埋め込みは以上の部分に配置できるようになっています。

Youtube動画には著作権がありますので、使う際には使えるものかどうか注意が必要です。

THE THORにYoutubeを埋め込みする方法【準備】 「動画のURLをコピー」

今回、Youtube動画を設置するにあたって必要なものは、動画のURLです。Youtube動画にもブログと同じようにURLがあります。

あなたが、埋め込みたい動画を開きます。

動画の上部に出てきたものがURLですので控えておいてください。

 

拡大すると以下のような文字列となります。

 

THE THORにYoutubeを埋め込みする方法 1. 「トップページのヘッダー部分」

トップページのヘッダー部分に配置できるテーマは、THE THORとDiverとAFFINGER5です。動画があることでユーザーの目線をひきつけることもできますし、どれだけきれいな画像よりも目立ちます。

トップページは、ブログの中で一番重要な場所ですので、きれいな動画を埋め込みましょう。

外観 ⇒ TOPページ設定[THE] ⇒ メインビジュアル設定
カスタマイズ部分は2工程です。
「メインビジュアルの表示モード設定」では3種類の画像選択ができます。
  • 静止画
  • スライダー
  • Youtube動画

 

表示モードを設定する

ここで、Youtube背景動画にチェックを入れます。

Youtube動画を設定する。

次に、動画のURLを設置しますが、トップページの背景動画の場合にはURLを少し変更しないといけません。

 

上の画像は、ブログが開かれたときに見える画像を設定します。

下にはYoutube動画の動画IDを入力します。

https://www.youtube.com/watch?v=●●● というURLになるのですが、この「●●●」だけを上部の枠に入れます。

Youtube画像の調整

動画が設定できれば、画像を明るくしたりカラーを重ねたりさらに誘導ボタンも設置できます。

YoutbeIDを追加した画面の下に入力箇所がありますので自分ですきなイメージにしてみてください。

 

上の画像は、以下の部分を追加しています。

  • タイトル
  • サブタイトル
  • 動画のマスク⇒ブラックメッシュ
  • ボタンテキスト
  • ボタンURL

THE THORにYoutubeを埋め込みする方法 2.  「記事中」

更新している各記事にYoutube動画を貼り付けるのは簡単です。

エディター「ビジュアル」でも「テキスト」でもどちらでも良いので、コピーしておいたURLをYoutube動画を配置したい場所にそのまま貼り付けてください。

すぐに反映をします。

Youtube動画の大きさを調整したい時

最初のURLコードを貼り付けるとそのまま反映はしますが、たとえばそのYoutube画像を小さくしたい場合などは少し違う埋め込みコードを取りこんで配置をして調整します。

Youtubeの埋め込みコードをコピーする。

画像の右下の部分にある「共有」をクリックします。

次に、「埋め込む」という部分をクリックします。(ここで表示される下のコードではありません)

 

するとYoutubeの埋め込みコードがでてきます。

 

このコードを記事の中に貼り付けるとYoutube画像が表示されるようになります。

基本の大きさは横560px、縦315pxとなっています。

サイズは、HTMLの部分を手動で変更することになります。

コード内のwidth=”○○〇“とheight=”〇○○“の部分を手書きで変更すればサイズが変わります。

サイズの対比

画像比率のサイズは、16:9(ワイド) か 4:3(スタンダード)がしっくりくるサイズだと思います。

  • 16:9・・・テレビ・ブルーレイ・DVD・Youtubeのサイズ
  • 4:3・・・VHS・アナログのテレビ
16:9 4:3
480 270 480 360
600 338 600 450
800 450 800 600

 

 

埋め込みコードのラインの部分に適切な数字を入れるとサイズの変更が可能です。

 

THE THORにYoutubeを埋め込みする方法 3.  「サイドバー」

サイドバーの上部は、ユーザー目線が集まりやすいのでよく広告を設置しているブログもあります。その場所に動画を置くことでさらにユーザーにもアピールできるようになります。

ここではウィジェットを使います。

外観 ⇒ ウィジェット
[THE]スタイルテキストをサイドバーエリアにドラッグ&ドロップするか開いてサイドバーをクリックします。
このスペースにYoutube動画のコードを入力し「保存」をクリックします。

THE THORにYoutubeを埋め込みする方法 4. 「トップページ上部」

こちらもウィジェットを使って設置します。やり方はサイドバーと同じでスタイルテキストをトップページ上部に持っていきます。

ドラッグ&ドロップもしくは、開いてトップページ上部をクリックする。

Youtube動画のIDコードを入力して「完了」をクリックします。

 

THE THORにYoutubeを埋め込みする方法 5. 「トップページ下部」

こちらもウィジェットを使って設置します。同じくスタイルテキストをトップページ下部に持っていきます。

[THE]スタイルテキストにYoutube動画のIDを入力して「完了」をクリックします。

 

THE THORにYoutubeを埋め込みする方法 6. 「投稿ページテキスト上」

こちらもウィジェットを使って設置します。こちらも、[THE]スタイルテキストを投稿ページ上部エリアにドラッグ&ドロップもしくは開いて指定をしあす。

本文にYoutube動画のIDを入力し「完了」をクリックします。

 

THE THORにYoutubeを埋め込みする方法 7. 「投稿ページテキスト下」

こちらもウィジェットを使って設置します。

[THE]スタイルテキストを開いて投稿ページ下部エリアを選ぶか、ドラッグ&ドロップで配置します。その枠の中にYoutube動画のIDを入力すればOKです。

ウィジェットでYoutube動画を配置(まとめ)

Youtube動画をウィジェットで配置するといろんな場所に設置できます。やり方は同じなので初心者の方でも簡単です。

  • サイドバー
  • トップページ上部
  • トップページ下部
  • 投稿ページ上部
  • 投稿ページ下部

それぞれブログの構成によって上にも下にも配置できますので、それぞれ調整しながら配置をしてみてください。THE THORでは背景でも動画が使えるので工夫次第でオリジナル性の高いブログにできるのでおすすめです。

今使っているテーマで満足していますか?

カスタマイズに苦労している・・・

イメージ通りのデザインにならない・・・

思ったほど稼げてない・・・

こんな悩みを抱えておられる方も多いと思います。

ブログで稼ごうと思えば、記事の質と見た目の良さなども大事な要素です。ユーザーの目を引くデザインの工夫や次の記事へのスムーズな誘導などうまく目立たせてくれるテーマでは滞在率も高くなり、Googleの評価も上がってきます。

「初期投資」は稼ぐブログをつくるための第一歩。

WordPressの有料テーマの5つの利点

  1. 検索上位を目指せる
  2. 見た目の高級感と居心地の良さ
  3. 多くの機能
  4. マニュアル&会員フォーラムなどのサポートが受けれる
  5. 多くのブロガーが使っている

有料Wordpressテーマ「THE THOR」はあなたを稼げるブロガーに導きます!

 

THE THOR はコチラから

最新情報をチェックしよう!
>最強のWordPressテーマ「THE THOR」

最強のWordPressテーマ「THE THOR」

ブログを作る上でカッコいいデザインとSEO対策は必須です。THE THORは誰でも好感がもてるデザインと、最新のSEO対策で大人気のテーマです。

CTR IMG