redoブログ

redoブログ

現役スピーカー設計者によるお役立ち情報発信ブログ

【ブログカスタマイズ】「はてなブログ」に埋め込む「Youtube動画」を劇的に軽くする方法

f:id:redo5151:20200102231229p:plain

こんにちは管理人のredoです。今日はYoutube動画をブログに埋め込むときに動画のデータを軽くし、サイトの読み込みを早くする方法をご紹介します。

 

最近、私のブログで音楽を扱った記事が急激に増えているので、たくさんのYoutube動画を埋め込む機会が増えてきました。

 

動画が簡単に埋め込めるのは便利なのですが、その反面サイトの読み込み速度が更に遅くなってしまいどうにかいい方法は無いかと探していたところSIROMAGさんのサイトでの動画を軽くする紹介が良かったので参考にさせて頂きました。

 

 

YouTube動画を軽くする利点に関して

f:id:redo5151:20200102231750p:plain

サイトの読み込み速度があまりに遅いことによりブログを見に来た人が見る気を失ってしまうことを防ぐためです。

 

最近は携帯でブログを見る人がほとんどなので、いかにサイトを軽くできるかはSEOの観点からも大切です。

 

特に「無料版のはてなブログ」ははてなブログ自体の広告も入ってくるので、ただでさえ読み込み速度が遅いです。

その他のサイトの読み込みが遅くなる項目

 サイトの読み込み速度遅延原因
・画像データ
・広告
はてなスター機能
・コメント機能
SNSボタン(はてなブックマークの数表示など)

これらの表示はサイトの読み込みの観点からは全て不要な機能です。ですが、消したくない方がほとんどだと思います。

 

そこで少しでも動作を遅くする要因として減らせるものは減らすべきです。

 

Youtubeの埋め込みを軽くする方法は、画像や動画データの圧縮は見た目としてはほとんど変わらないという点から、最も効果的な方法の一つです。

 

ぜひ動画をよく埋め込む方は軽くする方法を導入してみましょう。

 

動画を軽くすると見え方はどう変わるの?

まずはそのままYoutubeを埋め込んだ場合を見てみましょう。

 

画面いっぱいにサムネイルが埋め込まれパソコンで見た場合も大きく表示されて見栄えはいいですね。

 

次にこちらが動画を軽くした場合です。

パソコンやタブレットで見た場合は少し小さく表示されますが、そこまで気になりませんね。これで大幅にサイトを軽くできるなら全く気にならないレベルです。

 

動画データを圧縮してサイトの読み込みを早くするコード

はてなブログの場合のCSSコード

管理画面→デザイン→カスタマイズ→デザインCSSに下記コードを貼り付けましょう。

/*youtube軽くする*/

.youtube {

	display: inline-block;

	position: relative;

	overflow: hidden;

	width: 320px;

	height: 180px;

}

.youtube::before {

	position: absolute;

	content: "Click to Play";

	color: #fff;

	text-align: center;

	font-size: 22px;

	font-weight: bold;

	line-height: 180px;

	background: rgba(0, 0, 0, 0.6);

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	z-index: 10;

	transition: all 0.3s;

}

.youtube:hover::before {

	background: rgba(0, 0, 0, 0.7);

	cursor: pointer;

	transition: all 0.3s;

}

参考にしたサイト:https://www.notitle-weblog.com/entry/2016/05/21/155650

 

※事前にバックアップは必ず取ってくださいね。また、CSSでは自分のテーマデザインの影響でうまく機能しない場合がありますので、その場合は上のコードにそれぞれ<style>~</style>で囲って記述してあげましょう。

 

アレンジ可能な箇所

content: "Click to Play"の部分の表現を変更すれば、任意のメッセージに変更することも可能です。日本語で「クリックして再生」もしくは「再生」「▷」「PLAY」など好きなアイコンや表現言い回しにかえると良いと思います。

 

はてなブログの場合のHTMLコード

最初に「HTML編集」内に下記HTMLコードを貼り付けてください。

 

<div class="youtube" data-video="https://www.youtube.com/embed/動画ID?autoplay=1"><img src="https://img.youtube.com/vi/動画ID/mqdefault.jpg" alt="" width="320" height="180" /></div>

 上のコード内に「動画ID」が2カ所あると思うので、そこの動画IDをYoutube動画のURLへ置き換えます。

 

f:id:redo5151:20200102224955p:plain

 

<div class="youtube" data-video

="https://www.youtube.com/embed/

_4DvuTGx5mw?autoplay=1">

<img src="https://img.youtube.com/vi/

_4DvuTGx5mw/mqdefault.jpg"

alt="" width="320" height="180" />

</div>

 

 

青字で表示されている「_4DvuTGx5mw」のカッコ内にかかれている英数字が個別の動画IDになります。

 

HeadにJQueryを読み込みましょう

管理画面→設定→詳細設定→headに要素を追加で下記コードを追加しましょう。

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>

 

記事下にコードを最後に追加します。

記事下に下記コードを貼り付けましょう。これを貼り付けないと動画が再生しません。

 

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script><script>// <![CDATA[

$('.youtube').click(function(){

video = '<iframe src="'+ $(this).attr('data-video') +'" frameborder=

"0" width="480" height="270"></iframe>

';$(this).replaceWith(video);});// ]]>

</script>

 

 

いかがでしたでしょうか。いちどコツを覚えてしまえば簡単に設定が出来ます。ぜひ動画を圧縮してサイトの読み込みを軽くしてしまいましょう。

 

はてなブログ」のブログカスタマイズ方法も紹介しています

 

【はてなブログ 吹き出し会話作成手順】 BUMPのライブMCを吹き出しで表現!

【SEO対策】はてなブログのお手軽カスタマイズ|サイドバーに「カテゴリー」を追加する方法!

【はてなブログ 】アイコンフォントを使いこなす|グローバルメニューにオススメ


【SEO対策 はてなブログ】Amazon商品の紹介にはAmazletがオススメ|リンクボタン作成方法!


【Font Awesome はてなブログ】アイコンフォントが表示されない?|「はてなブログ」に対応させる方法を紹介!


【SEO対策 トップへ戻るボタン】「はてなブログ」にコードコピペで簡単設定|Font Awesomeでアイコンも自在に変更可能


【SEO対策 はてなブログ】「この記事は〇分で読めます」の簡単コード実装方法を紹介!

【はてなブログ SEO対策】記事の”更新日”をHTML,CSSで自動実装する方法紹介!


【SEO対策 はてなブログデザイン】サイドバーをお洒落にカスタマイズする方法を紹介

 

まとめ

 

 独自ドメイン無しで「無料はてなブログ」でGoogleアドセンスを合格する方法も紹介

redo5151.hatenablog.com

 

Amazonアソシエイト」を最短で合格する対策方法も紹介

redo5151.hatenablog.com