このエントリーをはてなブックマークに追加
はてなブックマーク - Youtubeの動画をSIRIUSのスマホサイトできちっと表示させるには?
[`evernote` not found]
Facebook にシェア
LINEで送る

この記事の所要時間: 152

 

こんにちは、ゆーすけです。

今日はスマホサイトにYoutubeの動画を貼った時に、
うまく収まらないのを何とかしようというTIPS
です。

 

SIRIUSにそのままYoutubeから取得したタグを貼り付けると
PC上ではうまくみえるのですが、スマホサイトだとうまく行きません。

 

例えば、下のサイトはPC用のサイトであれば、すごく
見栄えもよくYoutubeが収まっていますね。

image

これをもしスマホサイトで表示すると
こんなかんじになります。

image

 

はみ出しちゃってるよ!!!

動画を再生させるには横にスワイプしていかないと
再生ができません。

これを・・・・ちょいと工夫すると
こんな感じでちゃんとスマホサイト内に収まるわけです。

image

 

スマホサイトにピッタリYOUTUBE動画を収める方法

やり方はすごく簡単です。

  1. Youtubeからタグを取得する
  2. PC用のタグとスマホ用のタグを使い分ける
  3. スマホ用タグの幅をいじる

 

まずタグを取得します。

今回の動画だったら、こんなタグです。

1 Youtubeの埋め込みタグは<iframe>というタグ

<iframe width=”800″ height=”480″ src=”http://www.youtube-nocookie.com/embed/SJ7wGY8P2a8?rel=0″ frameborder=”0″ allowfullscreen></iframe>

 

「インラインフレーム」といい、src で指定したコンテンツを画面中にインラインで表示するタグです。
HTMLの中に別のHTMLを表示させる枠だと思えばいいでしょう。

 

2 SIRIUSに貼るときにタグの使い分けをする

SIRIUSでは右クリックのメニューで
PC用/スマホ用/携帯用それぞれに表示させたいコンテンツを変えることが
できます。

手順は次の通り

  1. 振り分けたいタグを選択する
  2. 右クリック
  3. タグ挿入[図の1]⇒どの表示にしたいかを選択[図の2]

image

 

image

  • PPC・・・パソコンのみ表示
  • ipc・・・iPhone(スマホサイト)のみ表示

 

というSIRIUS用のタグになります。

 

3 iPhone用のタグのwidth=”800”をいじる

さて、最後に
<ipc>内の<iframe width=”800”と書いてある部分を
width=”100%”という風に直してあげます

 

800というのは横幅800px(ピクセル)という固定幅ですが、
100%というのは横幅がサイトの表示領域の枠めいいっぱいに表示する
という命令になります。

 

つまりスマホ用のサイトは基本縦表示で「320px」横表示で「480px」で
作成されるはずなんです(ウル覚えでスミマセン)。

 

ということは100%に指定しておくと、スマホをたてで持っていれば、
Youtubeの動画も自動的に320pxに、横で持てば480pxになるというわけです。

 

ちなみに、height=”480”じゃ大きいなと思ったら、スマホ用のタグには
height=”100”ぐらいにしておくとこじんまりしてていいですよ。
ボタンを押してみれば、ちゃんと全画面表示になるんで。

 

何もアフィリエイトサイトを作るだけがSIRIUSの専売特許ではないので
こういう知識を知っておくとサイト作りが楽しくなりますよ^^

 

確実に使いこなせる「SIRIUSの教科書」付きSIRIUSレビューサイトはこちらから

このエントリーをはてなブックマークに追加
はてなブックマーク - Youtubeの動画をSIRIUSのスマホサイトできちっと表示させるには?
[`evernote` not found]
Facebook にシェア
LINEで送る