【YouTube】動画をブログのサイドバーに貼り付ける方法（Blogger）

こんにちは、SAKURAです🌸

前回に引き続き、サイドバーに登録する方法をご説明します。

テーマはEmporio

サイドバーに配置するなら、Emporio が一番向いていると思います。なぜなら、ホームのサイドバーとアイテムページ（つづきを読むで表示される記事本体）のサイドバーがそれぞれ独立しているからです。

スマホ表示の場合、ホームのサイドバーはハンバーガーボタン（三みたいなやつ）を押さないと表示されません。普通押しませんよね。なんとかスクロールで表示させたい。そこで Emporioです。（全種類のテーマを確認していないので他にもあるかも）目的の記事を読んだ後に表示させることが可能です。

YouTube再生リストの埋め込みコードを取得する

今回は動画を再生リストで説明します。開き方から。

1. クリエターツール（従来）から「動画の管理」の「再生リスト」を押す。
2. 一覧から、組み込みたい再生リストの右にある編集を押す。
3. 再生リストの自分の名前の左にある「編集」を押す。
4. 編集リストタイトルの下にある「共有」を押す。
5. ポップアップウインドウの「埋め込みコード」を押して、さらに「もっと見る」を押す。
6. 動画大きさを選ぶ。一覧に適当なのがない場合はカスタムを選ぶ。カスタムは、縦横どちらかの数字をいれると自動で計算してくれる。
7. 埋め込みオプションを選ぶ。
8. 上のコードを選択しコピーする。
9. Bloggerにもどり、レイアウトを押す。
10. Sidebar（ItemPage)の「ガジェットを追加」を押す。
11. ポップアップした一覧からHTML/JavaScript を選ぶ。
12. 「HTML/JavaScript」の コンテンツに先ほどコピーしたコードを貼りつける。
13. width＝"100%"に書き換える。
14. 各種パラメータを追加する。（前回の投稿を参照のこと）
15. タイトルにおすすめ動画とか、適当に入力する。なしでも可。
16. 保存を押す。
17. Bloggerレイアウト画面右上にある「配置を保存」を押す。

ブログホームのサイドバーに表示する場合も同じようにします。同じ作品でよければコピペします。

ブログのホーム

アイテムページをPC画面いっぱいで表示した場合

小さくしたウインドウで表示した場合

ただし、ホームのサイドバーは調整できますが、アイテムページのサイドバーは現状調整できません。また、PCは画面がほとんど横長ですが、スマホは、縦と横で見る場合があり、横幅は自動調整としても、縦の高さは固定です。ある程度妥協が必要です。（PCの場合でも、ウインドウを小さくすると、サイドバーが記事の下へ移動し画面の大きさが変化します）

スマホの横表示だと、一つ問題がありまして・・・・

ご覧の通りスライドしてくるタイトルのせいで、YouTubeの動画が全部表示されません。（Emporioの場合。その他は未検証ですが、多分同じでしょう）

これをなんとかしたいと考えた・・・・・💡！
タイトルを透明にすればいい

ので、手順を紹介します。

タイトルを透明にする方法

1. 「テーマ」の「カスタマイズ」を押す。
2. 「Bloggerテーマデザイナー」の「上級者向け」をクリック。
3. 「ブログタイトル」をクリックし、「ヘッダーバーの色」の▼を押す。
4. 透明をクリックして、画面右上のブログに適用を押す。

透明にすることで、透けて見える事はもちろん、以外にもスワイプを邪魔しません。文字はどうしても見えますので、目立たない白がいいと思います。

※注意、この画面は更に下の最適化を済ませた画面です。ちなみに、Windows10のNuAns NEOです。（その他スマホでうまくいかない場合はお買い求めください）

😃さようなら