TCDのWordPressテーマ「Bloom」を使っています。
TCDのブログテーマでGoogleMAPの共有を行う時、つまりHTMLコードを貼り付けた時にスマホでも地図がはみ出ないようにする方法をご紹介します。簡単です。
GoogleMAPの地図共有機能
GoogleMAPには地図を共有する機能があって、ワードプレスの投稿画面に埋め込みができるようになっています。
こういうやつね↓
上記はGoogleMAPノ埋め込み用HTMLをコピーしてそのまま貼り付けたものですが、TCDのブログテーマはそのままだとスマホ最適化をしてくれないようなんですね。
なので、スマホで見た時にGoogleMAPの地図がビヨーンとはみ出てしまう。
大問題なわけではないけどかっこ悪くなります。
ちなみにアフィンガーは、HTMLコードを貼り付ければ自動でデバイスに応じた最適化が行われるようで、スマホでもはみ出ず表示されます。
TCDのブログテーマでGoogleMAPの地図をはみ出ないようにする方法
TCDのブログテーマでGoogleMAPの地図をスマートに表示させるには、デフォルトで設定されているYouTube動画用のコードを使います。
デフォルトのHTMLコード一覧の中に「YouTube動画」というものがあると思いますが、これはYouTube動画だけでなくGoogleMAPにも使えます。
このコードは画面幅に合わせて挿入したアイテム（YouTube動画やGoogleMAPの地図）を調節してくれるコードです。
＜div class="ytube"＞ここにYoutubeのコードを入力してください＜/div＞「ここにYoutubeのコードを入力してください」の部分に、GoogleMAPのHTMLコードを入力すればOK。デバイスの幅サイズに合わせた地図が表示されるはずです。
地図をきれいに表示させる
細かいことなんだけど、地図がはみ出ているとなんだかカッコ悪いというか、直したくなってしまう人も多いと思います。
ブログの属性にもよりますが、多くのブログはスマホでアクセスする人が多いと思うので、きれいな地図を表示させてユーザーにわかりやすいブログを作ってあげましょう。
