【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レイアウト画面右上にある「配置を保存」を押す。
ブログホームのサイドバーに表示する場合も同じようにします。同じ作品でよければコピペします。





Bloggerホーム
ブログのホーム

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

アイテムページ サイドバー 下
小さくしたウインドウで表示した場合

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

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

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

スマホ タイトル 不透明

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

スマホ タイトル 透明

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

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

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

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

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

😃さようなら

スポンサーリンク

コメント