こちらの記事はワードプレステーマSTREETIST
この記事が参考になる人
通常の場合、記事内にYoutube動画リンクそのままを埋め込んでしまうとサイトスピードの遅延につながってしまいますが、STREETISTは記事作成時に少しの工夫を加えてYoutube動画の埋め込みをします。
STREETISTのYoutube動画埋め込み機能はサイト読み込みスピード向上が図れるのでぜひ使っておきたい機能です！
STREETISTをブログテーマに変更してからSTREETISTの使い方や発見を発信しています！こちらもぜひ参考にしてみてください。
STREETISTについての記事を書いています！
| こんな人に向けての記事ブログテーマをSTREETISTに変更しようと考えています！STREETISTを使い始めたけど、使い方がイマイチ…2021年5月にcocoonからWordPressテーマをSTREETISTに変更してから、レビュー記事や使... 【WPテーマSTREETIST】使用者が伝える使い方とレビューまとめ - less-is-idea.com |
STREETISTのYoutube動画の軽量化
STREETISTの機能の一つ「Youtube動画の軽量化」というものがどういうものかを
まず説明します。
下の実際のYoutube動画をクリック・タップしてみてください。
実際に試してみる
クリックするとすぐに動画が再生されるのではなく、動画が読み込まれるようになったのが分かると思います。
このようにサーバが記事を読み込んだときにはYoutube動画を「画像」として読み取り、
記事を読んでいるユーザが動画をクリック・タップしたときにはじめて「動画」として記事に埋め込まれる仕組みになっています。
こうすることで、記事全体の読み込みに時間を要するが低減され、表示スピードを向上させることができます。
STREETISTのYoutube動画の埋め込みやり方
まずはYoutube動画を埋め込みたい場所にカーソルをあてて、「ショートコード」から「Youtube動画」をクリックします。
そうすると、Youtube動画の埋め込みに必要なショートコードが表示されます。
次に、埋め込みたい動画をYoutube上で表示させます。
表示させたときのURL内、「v=」に続くアルファベットと記号と数字の組み合わせの部分をコピーします。
ポイント
これが、ショートコード内に記載されているの「id」にあたります。こちらのidを使ってSTREETIST側でサムネイルを取得しているという仕組みになります。
コピーした「id」を対象部分にペーストしたらYoutube動画の埋め込みは完了です。
注意点
ショートコードの２つ目の「alt」属性についてですが、任意ですが下の記事を読んでいただけるとしっかり戦略を練って記載する必要があるということがわかります。
「alt」属性の効果を知る！
| Googleの検索で上位を目指してPV数をアップさせたいと思っていますよね。もちろん初心者の僕も思っています。そんな思いを持ちながらある日、Googleのsearchconsoleを確認して「今の自分の記事はどんな検索ワード... 【ブログ】検索上位になるための工夫を「１位」になった後に分析してみた。 - less-is-idea.com |
実際にコピー＆ペーストが完了したら、プレビュー表示をして正しく動画のサムネイルが表示されるか確認してみましょう！
【初心者のための】STREETISTの使い方
このようにSTREETISTに関する使い方やSTREETISTを使うメリットや価格比較の記事をいくつか発信しています。気になる記事があればぜひのぞいていってくださいね。
下の画像をクリック！
【WPテーマSTREETIST】使用者が伝える使い方とレビューまとめ
STREETISTについての関連記事
| 無料のテーマのままでいいのかな…最近WordPress（ワードプレス）のブログテーマの変更で悩んでいて、STREETISTというテーマが気になっている！という人に向けて今回は購入前にSTREETISTで使用できるショートコー... 【全26種類】STREETIST(WPテーマ)のショートコードボックスをすべて公開 - less-is-idea.com |
| 今回はSTREETISTのブログテーマを購入したんだけど、マイパーツの使い方がわからない！といったSTREETISTのマイパーツの使い方がわからないという方にむけてマイパーツの使い方を紹介します。こちらのブログテー... 【初心者のための】STREETIST「マイパーツ」使い方 - less-is-idea.com |
| 今回はSTREETISTの吹き出しの使用と設定の方法を説明します。ブログテーマをSTREETISTにした方やこれから導入する方にとって役に立つ記事になります。たくさんの機能が搭載されているSTREETISTで記事の読みやすさ... 【初心者のための】STREETIST「吹きだし」使い方と設定方法 - less-is-idea.com |