レスポンシブWebデザインにGoogleマップを最適に表示する方法。
このブログ『Hills Life BLOG』のWordPressテーマは、TCDのレスポンシブWebデザインに対応したBlogPress(TCD013)を使っています。
レスポンシブWebデザインは、スマホ用サイトでもスマホ上で見やすいように最適化しつつ、PCから見るのと変わらないデザインなので、『WPTouch』のようなWordPressアドインでスマホ用サイトを実現するのと比較すると、スマホ用とPC用でデザインの統一性が取れることや、個性的なサイト作りが出来るのが特徴です。
（WPTouchを使ったサイトは多いので、スマホから見るとどれも似たり寄ったりのデザインになってしまうのが嫌だったんで、でもWPtouchは軽いし表示が崩れにくいしいいところはいっぱいあるので一長一短なんですよね）
まぁもちろん肝心のブログ記事の内容が伴わないことには、仏作って魂入れずになってしまうので…そこはさておいてと…(^^;
そんな感じで、昨年末からこのBlogPressを採用しておおむね満足はしているのですが、記事に『Googleマップ』を埋め込んだ時にスマホから見ると、下のようなおかしな表示の仕方になってしまうので困ってました。
以前から気にはなっていたのですが、ちょっと後手に回ってしまい…
とは言え、このままでは肝心の記事が見づらいことこの上にないですし、かと言って行った店とか観光地の記事も書いたりする機会も多くなってきて、Googleマップを貼り付けないというわけにもいかないですから、ちょっと調べて直すことにしました。
修正方法は実に簡単。
『Google Map レスポンシブ』でググれば、対応方法がゴロゴロ出てきます。
下のリストの上の部分がGoogleマップより取得した埋め込みHTMLの内容です。
取得した時の「Width」（フレームの横幅）の値が「400」になっていますが、これを上のリストの下の部分のように「100%」に変えるだけでOK。
下が修正後に表示した記事の状態。このように画面に合わせて最適な状態で表示してくれます。
と、あえて記事にするほどの内容でもないですが、自分メモ用として残しておきます(^^;
