トピックス

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

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

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

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

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

Embed Responsively

レスポンシブ対応GoogleMaps

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

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

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

レスポンシブ対応YouTube

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

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

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

関連記事

最新記事

  1. しばらく更新をしていませんでしたが、現在弊社では動画に力を入れ、色々と勉強中です。
  2. QRコード
    こんにちは。ご覧いただき、ありがとうございます。
  3. Facebook-Twitter連携
    こんにちは。ホームページを作る際、今やSNSとの連携は必須なのはご存じですよね。

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

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

合同会社ビックス

横浜フォトプロムナード

鎌倉ポジティブ会

横浜モーニングビズ