はてなブログのサイドバーにYoutubeをレスポンシブで貼りたい！！

皆様、こんばんは～～

一日一れの。NaaaOです。

（推しの中村麗乃さんのことをいっています）

さて！

今回はそんなれのさんのかわいい！！

をまとめたYoutubeをはてなブログのサイドバーに貼っていこうと思います！！

しかも、ただ貼るだけではなく「レスポンシブ」で

誰にでも見やすいように貼っていきたいと思います！！

はてなブログにYoutubeをはる

普通、Youtubeで作る埋め込みコードはあらかじめサイズが決まっているらしいため、すっきりした感じにならないみたいです。

こんな感じ

これじゃあ

れのちゃんの魅力が伝わらないじゃないかっ！！

レスポンシブで貼ってみる

調べてみたところ、必要な手順は２つのみ！

①デザインCSSにこのコードを貼る

➁動画埋め込みタグ(frame)をdivで囲む

①デザインCSS(デザイン→カスタマイズ→）にこのコードを貼る

.movie-wrap {
     position: relative; /*本来の位置から相対的に要素の位置を動かす*/
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0; /*高さ 0*/
     overflow: hidden; /*要素のボックスからはみ出た部分を隠す*/
}
 
.movie-wrap iframe {
     position: absolute; /*本来の位置から絶対的に位置を固定*/
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

➁動画埋め込みタグ(frame)をdivで囲む

<div class="movie-wrap">
<iframe ○○（動画埋め込みコード）></iframe>
</div>

 以上でレスポンシブ完了ですっ！！！！

 

これでれのちゃんがより綺麗に見える～～！

ついでに

Youtubeチャンネル登録のボタンもサイドバーにセットしたのでそちらの方法も載せときます！！！

Youtubeのチャンネル登録ボタンを設置する

こちらからYoutubeにログインした状態でボタン登録画面に遷移します

この画面のIDの部分をクリック

この画面のチャンネルIDをコピーし、

さきほどの画面のIDにペーストします。

あとは、自分の好みのレイアウト・テーマ等をカスタマイズし、

好きな場所に貼り付けるだけです！！！

こんな感じ

 

これでいつでも自分の好きなタイミングで宣伝できますね！！

(*￣▽￣)ﾌﾌﾌｯ♪

今回、参考にさせていただいた記事はこちらです！

pea-nut.hatenablog.com

maistylecreate.com

これで中村麗乃さんの画像がいっぱい貼れますねぇ

自分で作った動画もいくつかあるので

ぜひご覧いただければと思います！！

 

かわいいでしょ？？( ' ∀ ')

ではでは。