WordPressテーマ「CUBEY (tcd023)」
 

【賢威6.1】YoutubeとGoogleマップのレスポンシブウェブ化方法

賢威Youtubeレスポンシブ化

賢威6.1はレスポンシブWeb対応です。画像の大きさは自動で端末幅に調整されますが、YoutubeやGoogleマップをそのまま埋め込むと、幅の自動調整が行われません。

賢威Youtubeレスポンシブ化

Youtubeは「埋め込みコード」をクリックして、表示されたコードをそのままブログやサイトにペーストするだけで動画を埋め込むことができますが、これに独自タグを付加することでレスポンシブ化します。

賢威youtube埋め込みコード

通常のyoutube埋め込みコードはこちら。

これに、以下のタグで埋め込みコードをくくってあげればYoutube動画がレスポンシブ化されます。

<div class="v-wrap al-c m30-b"> 埋め込みコード </div>

賢威youtubeレスポンシブ化完了

これでPCで見た場合は、widthとheight数値の表示になり、スマホで見た場合は大きさが自動調整されます。

賢威Googleマップレスポンシブ化

Googleマップのレスポンシブ化も同じ独自タグでかこえばOKです。

タグの打ち込みを1回1回行うのは面倒なので、プラグインのAddQuickTagへの登録を勧めます。

 

以上、賢威6.1でYoutubeとGoogleマップのレスポンシブウェブ化方法でした。

Pocket

WordPressテーマ「CUBEY (tcd023)」 
 

Sponsored Link

WordPressテーマ「BlogPress (TCD010)」

コメントを残す

このページの先頭へ