こちらの記事はワードプレステーマSTREETIST
でYoutube動画を記事内で表示させる方法を順を追って紹介する記事になります。
この記事が参考になる人
通常の場合、記事内にYoutube動画リンクそのままを埋め込んでしまうとサイトスピードの遅延につながってしまいますが、STREETISTは記事作成時に少しの工夫を加えてYoutube動画の埋め込みをします。
STREETISTのYoutube動画埋め込み機能はサイト読み込みスピード向上が図れるのでぜひ使っておきたい機能です！
STREETISTをブログテーマに変更してからSTREETISTの使い方や発見を発信しています！こちらもぜひ参考にしてみてください。
STREETISTについての記事を書いています！
STREETISTのYoutube動画の軽量化
STREETISTの機能の一つ「Youtube動画の軽量化」というものがどういうものかを
まず説明します。
下の実際のYoutube動画をクリック・タップしてみてください。
実際に試してみる
クリックするとすぐに動画が再生されるのではなく、動画が読み込まれるようになったのが分かると思います。
このようにサーバが記事を読み込んだときにはYoutube動画を「画像」として読み取り、
記事を読んでいるユーザが動画をクリック・タップしたときにはじめて「動画」として記事に埋め込まれる仕組みになっています。
こうすることで、記事全体の読み込みに時間を要するが低減され、表示スピードを向上させることができます。
STREETISTのYoutube動画の埋め込みやり方
まずはYoutube動画を埋め込みたい場所にカーソルをあてて、「ショートコード」から「Youtube動画」をクリックします。
そうすると、Youtube動画の埋め込みに必要なショートコードが表示されます。
次に、埋め込みたい動画をYoutube上で表示させます。
表示させたときのURL内、「v=」に続くアルファベットと記号と数字の組み合わせの部分をコピーします。
ポイント
これが、ショートコード内に記載されているの「id」にあたります。こちらのidを使ってSTREETIST側でサムネイルを取得しているという仕組みになります。
コピーした「id」を対象部分にペーストしたらYoutube動画の埋め込みは完了です。
注意点
ショートコードの２つ目の「alt」属性についてですが、任意ですが下の記事を読んでいただけるとしっかり戦略を練って記載する必要があるということがわかります。
「alt」属性の効果を知る！
実際にコピー＆ペーストが完了したら、プレビュー表示をして正しく動画のサムネイルが表示されるか確認してみましょう！
【初心者のための】STREETISTの使い方
このようにSTREETISTに関する使い方やSTREETISTを使うメリットや価格比較の記事をいくつか発信しています。気になる記事があればぜひのぞいていってくださいね。
下の画像をクリック！
【WPテーマSTREETIST】使用者が伝える使い方とレビューまとめ
STREETISTについての関連記事
