Bloom

TCDのブログテーマでスマホでもGoogleMapがはみ出ないようにする方法

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。デバイスの幅サイズに合わせた地図が表示されるはずです。

地図をきれいに表示させる

細かいことなんだけど、地図がはみ出ているとなんだかカッコ悪いというか、直したくなってしまう人も多いと思います。

ブログの属性にもよりますが、多くのブログはスマホでアクセスする人が多いと思うので、きれいな地図を表示させてユーザーにわかりやすいブログを作ってあげましょう。

アフィリエイト向けの機能が多くて使いやすい
▶︎WordPressテーマ「AFFINGER(アフィンガー)」

デザインがおしゃれでテンション上がる
▶︎WordPressテーマ「Bloom」

見やすくてブロガーに最適!
▶︎WordPressテーマ「ストーク」

  • この記事を書いた人

moni

メインの「急がば回れ!moniとスペイン」にスペインのこと綴り中。その他、推し活ブログ、語学学習ブログなど4つのブログを運営。こちらのブログでは、ブログ運営に関する内容(テーマやCSSなど)を記録しています。
こんなのも書いてます

-Bloom

Copyright© 急がば回れの裏側 , 2022 All Rights Reserved Powered by AFFINGER5.