メルマガ登録フォーム

【めちゃ簡単】SIRIUS(シリウス)のYouTube埋め込み動画をスマホで最適化する方法

SIRIUS右クリックメニュー

このエントリーをはてなブックマークに追加

こんばんは!

apa(あぱ)です(^^)

今日は、 『SIRIUS(シリウス)にYouTubeの動画を埋め込む方法』について書いていきます。

サイト作成ツールとして、アフィリエイターの間で愛用され続けているSIRIUS(シリウス)

何回か、このサイトでも、SIRIUS(シリウス)についての記事を投稿してきました。

 

 

今回は、またそんなSIRIUS(シリウス)シリーズです。

僕自身、アフィリエイトサイトは全部SIRIUS(シリウス)で作っているので、やっぱり慣れているんですよね(笑)

でも、先日、ふとした壁にぶつかりました。

 

apa
YouTubeの動画を埋め込むと、スマホで見ると画面からはみ出るぞ・・・?

 

SIRIUS(シリウス)にYouTube動画を埋め込むと画面からはみ出る

初心者a子
apaさん、ちょっと困ったことがあるんですけど、訊いていいですか?

 

apa

はい、なんですか?

 

 

初心者a子

ありがとうございます!

・・・実は、あるYouTubeの動画を自分のアフィリエイトサイト内に埋め込みたくて・・・

試しに、YouTubeの「埋め込みコード」っていうのを、SIRIUS(シリウス)に貼り付けてみたんですけど・・・

 

 

apa
そうしたら?

 

初心者a子

スマホで見たときに、画面からはみ出してしまったんです・・・!

 

 

 

apa

ああ、その問題ですね。

確かに、僕もその問題、ぶつかりました。

 

 

 

初心者a子

本当ですか?

どうしたらいいのかわからなくって、お手上げ状態なんです。

 

 

 

apa

なるほど・・・

ネットで解決策を調べましたか?

 

 

 

初心者a子

もちろん!

apaさんに頼りっきりじゃいけないと思って、ネットで、

『SIRIUS YouTube 埋め込み スマホ』

で検索してみて、出てきた方法を実践してみました。

・・・でも・・・

 

 

 

初心者a子

でも?

上位に出ているサイトの通りにやっても、うまくいかなかったんですよ・・・

 

 

 

apa

なるほど・・・

実は、SIRIUS(シリウス)のサイト内にYouTube動画を貼り付けて、スマホでも最適化させるのはすごく簡単なんですよ。

 

 

初心者a子
え?そうなんですか?

 

このエピソード。

 

冒頭で書いたように、僕自身が直面した問題です。

 

もしかしたら、おわかりかもしれませんけど・・・

 

僕はパソコンがあまり得意ではありません(笑)

 

なので、周りの人たちが、パソコン関連のテクニカルな話をしていても、たいがいついていけません。

 

CSSとか、HTMLとか、実はあまりよくわかっていません。

 

そんな人でも、アフィリエイトをやっているんだから、改めて、アフィリエイトって夢のある仕事ですね。

 

実は、このWordpressもかなりギリギリです(笑)

 

で、話を戻して。

 

そんな状態だから、SIRIUS(シリウス)のサイト内に、YouTubeの動画を貼り付けるのも一苦労でした。

埋め込み失敗例

 

わかりますか?

 

こんな感じで、右半分の画面が、はみ出ちゃうんです。

 

実際の画面で見ると、もっと悲惨なことになっています。

 

SIRIUS(シリウス)のヘビーユーザーで、かつ僕みたいにパソコンがあまり得意でない方は、きっと同じような悩みを抱えているはず・・・(?)

 

ということで、僕が実践した、SIRIUS(シリウス)のサイトにYouTube動画を埋め込んで、なおかつスマホで最適化する(画面からはみ出ない)方法をご紹介します。

 

わかってみると、なんらむずかしいことはなくて・・・

 

apa
なんでこんなにムダなことをしてしまったんだろう・・・

 

と思ってしまいました(笑)

 

まぁ、至ってシンプルだったんです(笑)

 

SIRIUS(シリウス)のYouTube埋め込み動画をスマホで最適化させる方法

 

初心者a子

え?簡単なんですか?

でも、いろいろ試したけど、うまくいきませんでしたよ?

 

 

 

apa

うーん、たぶんなんですけど、Googleの検索結果上位に出てくる情報が、ちょっと古いのが多いんじゃないかな?と思います。

普通にやってみたら、普通にできました(笑)

 

 

 

初心者a子

ええ?

どうしたらいいんですか?

 

 

 

apa

わかりました。

手順を解説しますね。

 

 

SIRIUS(シリウス)のYouTube動画を埋め込む手順

以下の通りにやってみてください。

 

YouTubeの「埋め込みコードをコピー」

YouTube画像

 

まずは、貼り付けたいサイト内に表示させたいYouTube動画のページを開きます。

 

そして、その動画のところにカーソルを持っていって、右クリック。

出てきたメニューの

「埋め込みコードをコピー」を左クリックします。

埋め込みコードをコピー

 

SIRIUS(シリウス)のYouTube動画を埋め込みたい箇所で右クリック

埋め込み箇所

 

次に、SIRIUS(シリウス)を開いて、YouTube動画を表示させたい箇所をクリック。

 

そこで、右クリックをします。

メニュー

 

すると、メニューが表示されます。

「パーツ挿入」~「YouTube・Googlemapのタグ」選択

パーツ挿入タグ

 

メニューの中に、「パーツ挿入」という項目があるので、そこにカーソルを持っていきます。

 

すると、何もクリックしないでも、自動的にその右に追加メニューが表示させるので、その中の、

「YouTube・Googlemapのタグ」

をクリックします。

パーツ挿入タグ

 

すると、自動的に、上図のような「パーツ挿入タグ」が生成されます。

 

ちなみに、発行されるタグはこちらです。

 

<div class=”gmap-box”>

</div>

 

生成されたタグの間に「埋め込みコード」を貼り付け

埋め込みコード貼り付け

 

先ほど、発行されたタグの間に、サイト内に表示させたいYouTubeの埋め込みコードを貼り付けます。

 

<div class=”gmap-box”>

<iframe width=”480″ height=”360″ src=”https://www.youtube.com/embed/KXP84ijiLbg” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen>

</iframe>

</div>

 

今回の例で言うと、上記の赤い部分です。

 

アップロード

そのあとは、通常通り、SIRIUSのサイトをアップロードするだけ。

 

サイトが反映されるまでは、少し時間がかかるかもしれませんが、ちゃんと成功すれば、このようになります。

YouTubeの埋め込み

やっぱり、ちゃんと枠内に収まっている方が綺麗に見えますね。

 

埋め込み失敗例

↑これが

 

YouTubeの埋め込み成功例

↑これになりました。

 

ちゃんと、YouTube動画がスマホの画面でも最適化されています!

 

とっても簡単ですよね!

 

SIRIUS(シリウス)のサイト内にYouTube動画を埋め込むメリット

一応、念のために解説しておくと。

SIRIUS(シリウス)のサイト内に、YouTube動画を埋め込むメリットですけど・・・

 

正直、「SEO効果」はそこまで多くはないのかな?

 

と思います。

 

ただ、やっぱり。

 

ユーザー目線に立つと。

 

「その商品に関するYouTube動画があると興味を惹かれる」

 

のは確かだと思います。

 

貼る位置や、何の動画を選ぶか?

 

などの問題もありますが。

 

ユーザーの役に立ちそうだな、と思うYouTube動画は適所に貼っていきましょう。

 

ただし。

 

貼りすぎはサイトが重くなってしまうので、多くてもサイト内に1つだけくらいがいいのかな、と思います。

 

また、全部のサイトに貼る必要はないと思います。

 

「ただYouTube動画を貼るだけ」

 

だとあまり意味がありません。

 

「ユーザーにインパクトを与えられる(良い意味で)動画」

 

があったときだけ、貼るのがいいと思います。

 

まとめ

 

初心者a子

本当だ!とっても簡単なんですね!

 

  • YouTubeの動画で「埋め込みコードをコピー」
  • SIRIUS(シリウス)内で「パーツ挿入」~「YouTube・Googlemapのタグ」を活用
  • ユーザーに良い意味でインパクトを与えられる動画で活用する

 

そういうことなんですね!

 

 

 

apa

そうですね!

とっても簡単なので、必要に応じて使っていきたいですね!

 

 

 

初心者a子

わかりました!

ありがとうございます!

さっそくやってみます!

 

最後まで読んでいただいてありがとうございます。感想、ご質問等がございましたら、お気軽にコメントをどうぞ(^^)

 

もしよければ、こちらから応援をお願いします。

 

よりお役に立てる記事を書けるようがんばれます(^^)

 

コチラ↓↓をクリックしてapaを応援

にほんブログ村 小遣いブログ アフィリエイトへ

このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です