はてブ私のブログでは音楽を扱った記事が多いので、大量にYouTubeを埋め込むことが多々あります。あまりにたくさんのYouTube動画を埋め込むと、ページの読み込みに時間がかかってしまいます。そんな悩みを抱えていたある日、下のような記事を発見しました。追記:元ネタのブログが消えてしまいました。おお!これこそ、私が探し求めていた記事だ!この記事で紹介されているコードを参考に、もっと利用しやすいコードに修正してみました。以上の3点を実装できるように、コードを改良しました。ブログ主の錠前さんの許可はいただいております。YouTubeを大量に貼っても重くならないコード[はてなブログでの利用方法]まずはこちらのCSSをデザイン→カスタマイズ→デザインCSSに入れて下さい。styleタグで囲って記事の一番上に貼り付けてください。記事内に入れる場合は、こちらのコード。CSSに入れた方が本当は良いですが、カスタマイズに慣れてない人は記事内に入れた方がスマホにも対応するので簡単だと思います。これが、画像及び動画を埋め込むためのHTMLです。HTML編集など、みたままモード以外の編集方法で貼り付けてください。動画IDというのは、貼り付けたいYouTube動画のURLのwatch?v=の後にある文字列です。https://www.youtube.com/watch?v=ru0K8uYEZWwこういうURLだったら、動画IDは「ru0K8uYEZWw」ですね。記事の一番下にこのコードをコピペして下さい。みたままモードで貼り付けるとうまくいかないのでHTML編集に切り替えて、一番下に貼り付けてください。上記のコードの以下の部分はjQueryを読み込むコードで、ヘッダーかフッターですでに読み込んでいたら削除して大丈夫です。src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>シェアボタンのカスタマイズなどしている人は、すでにこのコードが記述されていると思います。実際に貼ってみたのがこんな感じ。クリックすると画像より大きめのYouTube動画が埋め込まれます。なんで画像が小さいのかと言うと、スマホ対応するのが面倒だからwwwテスト用のブログで試しに大量のYouTube動画を埋め込んでみました。brooklyn.hatenablog.jpどうでしょう。YouTubeをたくさん貼ってる割にはかなり読み込みが速いと思います。実際にブログで使用する際は、PCとスマホで動作確認して下さいね。あと、ご利用は自己責任でお願いします。不具合等あっても、責任は負いかねます。他にもこんな記事書いてます。ブログで副業やお小遣い稼ぎする方法大公開。AMコトリさん大丈夫だと思います。AMはじめまして、こちらの記事を拝見させて頂きすごいっ!!と思いました。そこでWordPressにおいて応用可能かなぁ。思ってちょっとやってみたところできたので記事にさせて頂きました。書き方など訂正等が必要でしたら訂正等致しますのでよろしければご確認お願い申し上げます。PMid:guniverseはじめまして。スマホでも動作しているので、特に問題はなさそうですね。WordPressでは試していないので、私もやってみます。お忙しいとこすみません。シロマティさんが先日公開したCSSコードを改変して、タイトルを表示できるようにしました。Play”が表示されます。AMシロマティさん、お久しぶりですm(__)m。Play」は表示されるものの背景にYouTube動画のサムネイル画像すら表示されなくなってしまいました。「http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js」にて設定してあります。「//ajax.aspnetcdn.com/」に変更しても、ajaxの記載内容は同じなのに、なんでうまく動作しなくなってしまうのでしょう...。お忙しい中、恐縮ですが...。ご教授お願い申し上げます。AMシロマティさん、お返事ありがとうございます。