まよいのちはれ

まよいのちはれ

コンサル × 乃木ヲタ 雑記ブログ

MENU

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

皆様、こんばんは~~

 

一日一れの。NaaaOです。

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

 

さて!

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

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

 

 

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

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

 

 

はてなブログYoutubeをはる

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

 

こんな感じ

f:id:NaaaO-nogi:20190130194412p:plain

 

これじゃあ

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

 

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

 

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

 

①デザイン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>

 

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

f:id:NaaaO-nogi:20190130203510p:plain 

 

 

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

 

 

ついでに

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

 

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

 

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

 

f:id:NaaaO-nogi:20190130233455p:plain

 

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

 

f:id:NaaaO-nogi:20190130234608j:plain

 

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

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

 

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

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

 

こんな感じ

 

 

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

(* ̄▽ ̄)フフフッ♪

 

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

pea-nut.hatenablog.com

 

maistylecreate.com

 

 

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

 

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

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

 

 

 

 

 

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

 

 

 

 

ではでは。