読者です 読者をやめる 読者になる 読者になる

え、僕ですか?

感じたことをそのまま

え、僕ですか?

{Youtube}動画埋め込み 軽くする方法 端的にお伝えします!

ブログ運営 ブログ運営-役立つ情報

はじめに

この記事を書くきっかけになったのがこれ、

         

gogo5.hatenablog.jp

 YouTubeの動画を13個貼り付けることになりました。ここで問題なのが、ブログ自体が重くなることです。何とか軽くなる方法はないものかとGoogleで検索。そこで参考にさせてもらったのが下の記事。

 

         

shiromatakumi.hatenablog.com

 この方のブログには、いつもお世話になっています。

ホントのこと言うと、NO TITLEさんの記事を読めば9割の方が理解できますしかし、世の中には僕みたいな1割の部類に入ってしまう人もいるようです。(パソコン苦手)

 

そのため、この記事を参考にした端的な設定方法(理解しなくてもできる)と僕が直面した苦悩を下に載せます。ぜひ、どうしても理解できない人に読んでもらいたいです。あとパソコンが弱ってる人も。

 

デザイン➡カスタマイズ➡デザインCSSにコピペ

これを見出しの通りに貼り付けてください。[はてなブログ用]

YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった - NO TITLEから

 

デザイン➡カスタマイズ➡記事➡記事下にコピペ

これを見出しの通りに貼り付けてください。

YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった - NO TITLEから

※特定の記事にのみ適応されたい方は、この部分を記事の編集時に、HTML編集の一番下に貼り付けてください。

記事を書く➡HTML編集にコピペ

第一難関がここです。動画IDなどの意味が全く分からなかった。そのため次のサイトを利用します。

ようつべタグぽん このサイトで埋め込みたいYouTubeの動画URLを貼り付け。

 f:id:go12345:20161128120411p:image

動画URLを貼り付けた後、タグを生成する。

なお、追加を押すことでいっぺんに動画URLを貼り付けることができます。

f:id:go12345:20161128120737p:image

右下のコピーをクリックし、それを記事を書くときに、埋め込みたい場所へ貼り付けします。(HTML編集でだぞ!)

 

 簡単にやり方まとめる

    1. 一番上のコードをデザインCSSにコピペ
    2. 二番目のコードを記事下にコピペ
    3. ようつべタグぽんにてタグを生成後、HTML編集に貼り付け

下からが僕の苦悩の始まりです。

Let`s go

  ☟

苦悩1

プレビューして確認してみたら動画がなんかへん。黒い部分が多い。

 f:id:go12345:20161128163034p:image

この状態に陥りました。ただバカなだけなんですが、サムネイルで表示画像の大きさを変えることができます。(サムネルの意味が分かっていない僕泣)

 

初期設定 120×90 default.jpg

オススメ 320×180  mqdefault.jpg

僕はオススメで、13個の動画すべて綺麗に作ることができました。

 

ここで額の汗をひとまず拭う。

苦悩2

ここから先はお使いのパソコンが、ボロボロな人向け

 「よっしゃー、動画全部の貼り付け終わったぞ。」

「とりあえず、下書き更新だ。」ポチっ

お使いの、パソコンから不正なアクセスがみつかりました。

「なんだこれ、とりま前もどろ。」

「おい、更新前の記事に戻ってやがる。クソっ。」

なぜだか理由が分かりません。分かる方に教えていただきたいです。

自分のパソコンで変なサイトって言ったら、アダルトサイトに2回アクセスしたぐらいです。

原因不明 チーーーーン

苦悩3

ようつべタグぽんでプレビューしても

 f:id:go12345:20161128163049j:image

なぜかこうなります。何回試そうがこれ。パソコン消そうが、パソコンぶん投げようが、パソコントイレの中沈めようが、永遠これ。

結局どうしたかって言うと、スマホでタグを生成してパソコンにメールで送り、送られてきたメールからHTMLに貼り付けを行いました。

はっきり言うと、超絶ウルトラスーパーめんどい。(何回もやり直しを喰らっていたのでイライラしてました。)

※本日確認しましたが、無事治ってました。

お使いのパソコンがこのような状態になったら、電源を落として待ってみたらいいかもしれません。

 

まとめ

既にご利用の方がほとんだと思います。なので、本記事では端的に物事が進むよう解説しました。とりあえず、HTMLだとかCSSとか全く理解しなくて結構です。(自分も理解できていない。)動画沢山はりたいな~って思ったら、一度試して見てください。

あと、パソコン得意な方、どうか僕の苦悩を解決してほしいです。

広告を非表示にする
人気記事