GoogleのBloggerのヘッダー部分にyoutubeを貼り付けてみよう

以前の記事にプチ・マガジンタイプのSafeTyというbloggerのテンプレートを紹介しましたが、

ヘッダー部分は記事の紹介と記事内の写真で目を引くように作られていてyoutubeを貼り付けることは出来ないんですけどcssにコードを貼るだけで簡単に貼れてしまうんです。bloggerは記事内にyoutubeを貼るのは仕様になっているので簡単に出来るのですが、ヘッダーやサイドバーなんかに貼るのはちょっとだけ手を加えると簡単に出来るので良いと思います。

１）bloggerのダッシュボードを開く→その他のオプションからテンプレートを開く→カスタマイズを開いて→上級者向けをクリック→一番下のCSSを追加で

.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

上のコードをコピーペーストします。

２）bloggerのダッシュボードを開く→その他のオプションからレイアウトを開く→youtubeを貼りたいガジェットを追加を選択→

ガジェットを開いたらテキストを選択する→HTMLの編集（コンテンツ）に下記のコードをコピーペーストします

<div class=“youtubeの埋め込みコード">

<iframe width="560" height="315" src="https://www.youtube.com/embed/U9nmGLZUGR4?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

</div>

３）ここで一番分かりづらいのが上の赤字のyoutubeの埋め込みコードなんですけど

youtubeを開いて下の写真のところに共有っていうところをクリックすると共有と埋め込みコードとメールが出てきます。埋め込みコードをクリックしてコードをコピーします。

この埋め込みコードを上の赤字のyoutubeの埋め込みコードを消してペーストします。最後に保存して終了です。

 

　　

 

下の写真が記事ページの写真とyoutubeを貼ってヘッダーを見やすく（？）した私のサイトです。

このSafeTyというbloggerのテンプレートはちょっとだけHTMLで入力するので面倒な部分もあるのですが、

おかげで勉強になりました。欠点は表示スピードが私の持っているテンプレートの中で一番遅いです。

１００記事以内の軽いサイトだと大丈夫かな？って思っていますが、、、まだ１０記事なので渾身の記事を書いて少なめのサイトにしようと思ってます。

（下の写真をクリックで１０記事サイトが見れます）