トピックス

レスポンシブテーマでGoogleマップ、YouTubeを貼る方法

  • このエントリーをはてなブックマークに追加
レスポンシブ,グーグルマップ,GoogleMaps

こんにちは、代表の石原です。
最近はワードプレスもレスポンシブテーマのホームページが増えてきました。
以前はパソコン用、携帯用と分かれていましたが、パソコンまたはスマフォどちらかで更新すると、両方に繁栄されるとっても便利なワードプレスになってきました。

そこで、GoogleMapsやYoutubeを貼り付ける際、縦や横幅を固定してしまうとレスポンシブテーマだと固定されて、スマフォでは見づらくなります。

いろいろ調べてみたら、GoogleMapsやYouTubeのホームページ貼り付けコードをコピーするだけで、レスポンシブ対応のコードを生成してくれます。Instagramもできます。
弊社のメモ代わりに記載いたします。

Embed Responsively

レスポンシブ対応GoogleMaps

GoogleMapsで地図埋め込みコードを取得し、コードをコピー。
レスポンシブ,グーグルマップ,GoogleMaps

このようにコピーしたものを貼り付けし、「Embedボタン」を押す。
そうすると下に、地図と貼り付け用コードがでてきます。
レスポンシブ,グーグルマップ,GoogleMaps

こちらのコードをコピーしてホームページに貼り付けます▼
レスポンシブ,グーグルマップ,GoogleMaps

レスポンシブ対応YouTube

GoogleMapsと同様に、YouTubeの貼り付けコードを取得し、
レスポンシブ,ユーチューブ,YouTube

このように貼り付けして「Embedボタン」を押すと
レスポンシブ,ユーチューブ,YouTube
Youtubeの画像の下にコードが発行されるので、コピーしてホームページに貼り付けます。

是非、試してみてください。
今後のホームページ制作に役に立ちました。

関連記事

最新記事

  1. QRコード
    こんにちは。ご覧いただき、ありがとうございます。
  2. Facebook-Twitter連携
    こんにちは。ホームページを作る際、今やSNSとの連携は必須なのはご存じですよね。
  3. Facebookページのプロフィール写真やカバー写真のサイズ
    ホームページ作成の依頼を受ける際、併せて依頼されるのは、Facebook、Twitter、Googl...

メルマガはこちらからどうぞ

お読みになった記事はお役に立ちましたか?もっと気軽にもっと役立つ、もっと最新の情報をメルマガでもお届けしてます。登録お待ちしてます。

合同会社ビックス

横浜フォトプロムナード

鎌倉ポジティブ会

横浜モーニングビズ