Youtube・Googleマップのレスポンシブ対応

キャプチャ画像

これまではYoutubeGoogleMapをレスポンシブ対応させるには
それ用の設定を別途スタイルシートに記述する必要がありました。

 

しかしSIRIUSがver.1.5にアップデート後は専用の独自タグがシステム内部に実装されたため、
それまでのカスタム設定は必要なくなったんです。

 

といっても実のところは、これまで個々に追加で加えていたスタイル設定が
デフォルトの設定として最初から記載されてるってだけの話です。

 

【テンプレート】→【スタイルシート編集】→『commonstyles.css』→”.gmap-box”で検索するとその設定を確認することができます。

 

ここではその独自タグの使い方をご紹介します。

このページの目次

独自タグの使い方

Youtube

Youtube動画をサイトで表示するには”動画の埋め込み”作業が必要になります。

 

①埋め込みたいYoutube動画のページを開き、右下に『共有』と書かれたボタンがあるので
そこをクリック→出てきた画面の『埋め込む』をクリックします。

 

②下のような画面になるので『コピー』をクリックして、埋め込み用のタグをコピーします。

 

キャプチャ画像

 

このページをご覧になる時期によっては(Youtubeの設定変更などにより)上記の流れやデザインが異なってる場合もあります。

 

③Youtube動画を表示したいSIRIUSの編集画面を開き、埋め込み用のタグをペーストします。

これが”動画の埋め込み”です。

 

④ペーストしたタグを範囲選択後、右クリック→パーツ挿入→Youtube・Googleマップのタグをクリックします。

 

すると下のように”埋め込み”タグが専用のタグで囲まれます。

 

<div class="gmap-box">

<iframe width="560" height="315" src="https://www.youtube.com/embed/df8sAbjkGos?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

</div>

①と③がSIRIUS側で設定しているタグです。

②がYoutubeの埋め込みタグです。

 

⑤これでPCブラウザではもちろん、
iPhone(スマホ)でも画面比率を保ったまま縮小されて再生されます。

 

実際に埋め込んでみた動画がコチラ↓。

(PCでもiPhone・スマホでもブラウザの幅ぴったりに拡大・縮小されてご覧になれてるハズです)

 

※音が出ます。

 

再生終了後の関連動画は非表示

Youtube動画を最後まで見た時、普通は最後に関連動画の紹介画面が表示されます。

 

キャプチャ画像

 

この関連動画、一見とても便利な機能なんですが、
個人のブログならまだしもアフィリエイトサイトでは”余計なお世話!”ってもんです。

 

というのも関連動画をクリックされるとどんどん動画を見始めちゃいますでしょ。

 

そうするとアフィリエイトサイトを訪問した時点での元々の興味が次第に薄れちゃって
気が付いたら訪問者は無意識にページを閉じてたって行動パターンはよくあることです。

 

そこでYoutube動画埋め込み時は”関連動画を表示させない”設定にしておくのが
アフィリエイトサイトとしては”正しい選択”と言えます。

 

やり方は簡単です。

 

Youtube動画埋め込みタグ取得画面で、
埋め込みオプション”動画が終わったら関連動画を表示する”のチェックを外すだけ。

 

キャプチャ画像

 

もしもチェックを忘れた場合はあとから手動でのカスタマイズも可能です。

 

それが埋め込みタグ内動画URLの最後尾に”?rel=0”を付けるというもの。

 

たとえば

src="https://www.youtube.com/embed/df8sAbjkGos"

とあった場合は

src="https://www.youtube.com/embed/df8sAbjkGos?rel=0"

としてやります。

 

先ほどの”動画が終わったら関連動画を表示する”のチェックを外して出力されたタグも実は”?rel=0”が加筆されたもので、中身は全く同じモノになります。

 

Googleマップ

Googleマップも基本的にはYoutubeと同じやり方になります。

 

①Googleマップ画面で目的の場所を地図上で示し、『共有』ボタンをクリックします。

 

②出てきた画面の『地図を埋め込む』をクリック→”HTMLをコピー”をクリックして
埋め込みタグを取得します。

 

キャプチャ画像

 

③あとはYoutube動画と同じく、ペーストしたタグを範囲選択後、
右クリック→パーツ挿入→Youtube・Googleマップのタグをクリックするだけ。

このページをご覧になる時期によっては(Googleマップの設定変更などにより)上記の流れやデザインが異なってる場合もあります。

 

実際に埋め込んだGoogleマップがコチラ↓。

(PCでもiPhone・スマホでもブラウザの幅ぴったりに拡大・縮小されてご覧になれてるハズです)

 

SIRIUSカスタムテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSカスタムテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください

 この記事をシェア 
キャプチャ画像

PC版レイアウトに切替

スマホ版レイアウトに切替