わいのりLABO

わいのりLABO

☆漫画・アニメ・ゲームなどについてつぶやきます☆

わいのりLABO

【カスタマイズ】YouTubeを貼っても重くならない方法

f:id:wainori2199:20180422064516j:plain

 

追記

動作を試す場合、記事を公開する必要はありませんよ。

プレビューで動作確認できます。

テスト記事を作成して、下書き保存するといいと思います。

 

こんばんは。

やはりワイヤレスキーボードが使いにくくて、買ったばかりですが違うのに買い替えようと考えている、わいのり研究所です。

 

もし、PCが原因だったら意味ないですけどね・・・

むしろPCの不具合かもしれないと思い始めてきました・・・

 

さて今回は、カスタマイズシリーズ第1弾です。

YouTubeを貼ってもブログが重くならない方法」をお伝えします。

 

 

今回のサイト様紹介

今回お世話になったサイト様を紹介します。

 

gamestart.hateblo.jp

 

www.notitle-weblog.com

 

私の記事の前に、こちらのサイト様を読んでみてください。

この両サイト様を読んでいただければ、だいたい分かっていただけると思います。

 

でも私はかなりつまづいたので、それもお伝えしていきたいと思います。

 

今回のカスタマイズを行なう理由

私はアニメ紹介を行なうので、PVなどのYouTube動画を貼り付けることが多いです。

 

動画自体を貼り付けるわけではありませんが、ブログにアクセスする際、そのYouTube動画も読み込むので、それがブログを重くしてしまいます。

 

「ブログが重くなる」というのは「ブログを表示する速度が遅くなる」という意味です。

 

表示速度が遅いと読者が不快になり、読んでくれないかもしれないですね。

一方、表示速度が早ければ読者に不快な思いをさせることなく、記事に集中してもらえると思います。

 

これが今回のカスタマイズを行なう理由です。

一生懸命書いた記事だから、ぜひ読んでほしいですよね?

 

カスタマイズをしてみよう!

私のようにつまづかなければ簡単です。

 

1.CSSにコピペ(事前準備)

これは「デザインCSS」にまるまるコピペしてください。

コピペする場所:デザイン→カスタマイズ→デザインCSS

 

「Click to Play」の文字はお好きなように編集してください。

私は「クリックすると再生」というふうにしました。

 

YouTubeCSS

 

2.記事の一番下にHTMLをコピペ

次に、YouTubeを貼り付けたい記事の一番下に下記のHTMLをコピペします。

このHTMLは、見たまま編集ではなく「HTML編集」で貼り付けてください。

記事の一番下に貼り付けます。

 

YouTubeJava

 

既に「jQuery」を読み込んでいる人は、この1行目の「jQuery」の1行は不要です。削除してください。

私は「詳細設定」→「headに要素を追加」の部分で既に「jQuery」を読み込んでいるので削除しています。

 

jQuery

 

3.貼りたいところにHTMLを記述

最後に、記事中でYouTubeを貼りたい箇所に以下のHTMLを記述します。

ここは結構ややこしいのでよく読んでくださいね。

重要なポイントがあるので注意してください。

 

YouTube

 

動画IDの説明をします。

例えば、このYouTube動画を貼りたいとします。

この動画URLは以下の通りです。アドレスバーのURLではないですよ。

アドレスバーのURLにも書いてありますが、動画URLの方が分かりやすいと思います。

(引用:『三森すずこ 8th Single「エガオノキミヘ」試聴ver.』)

 


https://youtu.be/JHNyKJdZATQ?list=PLM_a11cGdTkbsnmwck4TqTiI4qZuQmkBf

 

!ポイント!

 

この場合、動画IDは「https://youtu.be/」の後ろから「?list=」の前までになります。

 

JHNyKJdZATQ」がこの場合の動画IDです。

 

他の動画も調べました。11桁の文字列が動画IDのようです。

 

 

例えば、HTMLの記述はこんな感じになります。

 

f:id:wainori2199:20180422211556p:plain

 

通常の貼り方との比較

では、通常の貼り方と比較してみましょう。

 

こちらが通常の貼り方です。コピペですね。

 

www.youtube.com

(引用:『三森すずこ 8th Single「エガオノキミヘ」試聴ver.』)

 

こちらが、今回の貼り方です。見た目と挙動が若干違います。

 

(引用:『三森すずこ 8th Single「エガオノキミヘ」試聴ver.』)

 

全然問題ナッシングですよね!?

これで軽くなるならオールオッケーです!!

 

他にも試してみた!

念のため、他の動画も試してみました。

 

(引用:『アニメ『ヴァイオレット・エヴァーガーデン』PV第4弾』)

 

(引用:『TRUE「Sincerely」 MV Full Size 『ヴァイオレット・エヴァーガーデン』OP主題歌/"violet-evergarden" Opning Theme「Sincerely」』)

 

(引用:『配信・劇場アニメ「planetarian」 30秒TVCM』)

 

ブログの速度測定サイト

まだ比較できてませんが、Googleの速度測定サイトを紹介します。

ご自身のブログのURLを入力して「分析」を押してください。

 

速度測定サイト:PageSpeed Insights

 

最後に

今までは普通にコピペしていましたが、これで軽くなるならいいですね!

これまでのYouTube動画を貼り直さなきゃ・・・(/ω\)

 

またまた勉強になりました。みなさんもお試しください。

では、今回もお付き合いいただきまして、ありがとうございました。