こんにちは！ブログを書いて1年で月収60万円突破したみのりんです。
Youtube動画を記事に配置しているブログをよく見かけます。検索の表示結果にも出てくる場合があるのでご自身のYoutube動画があればぜひ乗っけてみてください。
THE THORでは、動画をトップページのヘッダー部分にも配置することが可能です。
THE THORの動画を埋め込む方法をお伝えしていきます。
- 1 THE THORでYoutube埋め込みができる部分は？
- 2 THE THORにYoutubeを埋め込みする方法【準備】 「動画のURLをコピー」
- 3 THE THORにYoutubeを埋め込みする方法 1. 「トップページのヘッダー部分」
- 4 THE THORにYoutubeを埋め込みする方法 2. 「記事中」
- 5 THE THORにYoutubeを埋め込みする方法 3. 「サイドバー」
- 6 THE THORにYoutubeを埋め込みする方法 4. 「トップページ上部」
- 7 THE THORにYoutubeを埋め込みする方法 5. 「トップページ下部」
- 8 THE THORにYoutubeを埋め込みする方法 6. 「投稿ページテキスト上」
- 9 THE THORにYoutubeを埋め込みする方法 7. 「投稿ページテキスト下」
- 10 ウィジェットでYoutube動画を配置（まとめ）
THE THORでYoutube埋め込みができる部分は？
まず、THE THORでYoutube動画が配置できる部分を確認しておきましょう。
- トップページのヘッダー部分
- 記事中
- サイドバー
- トップページ上部
- トップページ下部
- 投稿ページテキスト上
- 投稿ページテキスト下
THE THORのYoutube動画埋め込みは以上の部分に配置できるようになっています。
THE THORにYoutubeを埋め込みする方法【準備】 「動画のURLをコピー」
今回、Youtube動画を設置するにあたって必要なものは、動画のURLです。Youtube動画にもブログと同じようにURLがあります。
あなたが、埋め込みたい動画を開きます。
動画の上部に出てきたものがURLですので控えておいてください。
拡大すると以下のような文字列となります。
THE THORにYoutubeを埋め込みする方法 1. 「トップページのヘッダー部分」
トップページのヘッダー部分に配置できるテーマは、THE THORとDiverとAFFINGER5です。動画があることでユーザーの目線をひきつけることもできますし、どれだけきれいな画像よりも目立ちます。
トップページは、ブログの中で一番重要な場所ですので、きれいな動画を埋め込みましょう。
- 静止画
- スライダー
- 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画像が表示されるようになります。
サイズは、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 THORにYoutubeを埋め込みする方法 4. 「トップページ上部」
こちらもウィジェットを使って設置します。やり方はサイドバーと同じでスタイルテキストをトップページ上部に持っていきます。
ドラッグ＆ドロップもしくは、開いてトップページ上部をクリックする。
Youtube動画のIDコードを入力して「完了」をクリックします。
THE THORにYoutubeを埋め込みする方法 5. 「トップページ下部」
こちらもウィジェットを使って設置します。同じくスタイルテキストをトップページ下部に持っていきます。
THE THORにYoutubeを埋め込みする方法 6. 「投稿ページテキスト上」
こちらもウィジェットを使って設置します。こちらも、[THE]スタイルテキストを投稿ページ上部エリアにドラッグ＆ドロップもしくは開いて指定をしあす。
本文にYoutube動画のIDを入力し「完了」をクリックします。
THE THORにYoutubeを埋め込みする方法 7. 「投稿ページテキスト下」
こちらもウィジェットを使って設置します。
ウィジェットでYoutube動画を配置（まとめ）
Youtube動画をウィジェットで配置するといろんな場所に設置できます。やり方は同じなので初心者の方でも簡単です。
- サイドバー
- トップページ上部
- トップページ下部
- 投稿ページ上部
- 投稿ページ下部
それぞれブログの構成によって上にも下にも配置できますので、それぞれ調整しながら配置をしてみてください。THE THORでは背景でも動画が使えるので工夫次第でオリジナル性の高いブログにできるのでおすすめです。
