動作を試す場合、記事を公開する必要はありませんよ。
プレビューで動作確認できます。
テスト記事を作成して、下書き保存するといいと思います。
こんばんは。
やはりワイヤレスキーボードが使いにくくて、買ったばかりですが違うのに買い替えようと考えている、わいのり研究所です。
もし、PCが原因だったら意味ないですけどね・・・
むしろPCの不具合かもしれないと思い始めてきました・・・
さて今回は、カスタマイズシリーズ第1弾です。
「YouTubeを貼ってもブログが重くならない方法」をお伝えします。
今回のサイト様紹介
今回お世話になったサイト様を紹介します。
私の記事の前に、こちらのサイト様を読んでみてください。
この両サイト様を読んでいただければ、だいたい分かっていただけると思います。
でも私はかなりつまづいたので、それもお伝えしていきたいと思います。
今回のカスタマイズを行なう理由
私はアニメ紹介を行なうので、PVなどのYouTube動画を貼り付けることが多いです。
動画自体を貼り付けるわけではありませんが、ブログにアクセスする際、そのYouTube動画も読み込むので、それがブログを重くしてしまいます。
「ブログが重くなる」というのは「ブログを表示する速度が遅くなる」という意味です。
表示速度が遅いと読者が不快になり、読んでくれないかもしれないですね。
一方、表示速度が早ければ読者に不快な思いをさせることなく、記事に集中してもらえると思います。
これが今回のカスタマイズを行なう理由です。
一生懸命書いた記事だから、ぜひ読んでほしいですよね？
カスタマイズをしてみよう！
私のようにつまづかなければ簡単です。
１．CSSにコピペ（事前準備）
これは「デザインCSS」にまるまるコピペしてください。
コピペする場所：デザイン→カスタマイズ→デザインCSS
「Click to Play」の文字はお好きなように編集してください。
私は「クリックすると再生」というふうにしました。
| .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; | |
| } |
２．記事の一番下にHTMLをコピペ
次に、YouTubeを貼り付けたい記事の一番下に下記のHTMLをコピペします。
このHTMLは、見たまま編集ではなく「HTML編集」で貼り付けてください。
記事の一番下に貼り付けます。
| <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> |
既に「jQuery」を読み込んでいる人は、この1行目の「jQuery」の1行は不要です。削除してください。
私は「詳細設定」→「headに要素を追加」の部分で既に「jQuery」を読み込んでいるので削除しています。
| <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script> |
３．貼りたいところにHTMLを記述
最後に、記事中でYouTubeを貼りたい箇所に以下の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の説明をします。
例えば、この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の記述はこんな感じになります。
通常の貼り方との比較
では、通常の貼り方と比較してみましょう。
こちらが通常の貼り方です。コピペですね。
（引用：『三森すずこ 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動画を貼り直さなきゃ・・・(/ω＼)
またまた勉強になりました。みなさんもお試しください。
では、今回もお付き合いいただきまして、ありがとうございました。
