こんにちは、どろますたです。
当記事はブロガー用の記事なんで興味あるかたは限られます。
今回ご紹介するのは、食べログをブログに貼り付けたときの「地図がはみ出る」、「店名が下に落ちる」という問題の解決方法。
これはwpで、食レポに行く人がよくぶち当たる問題なんです。多分この問題は直面する人の方が多いんじゃないかなあ・・・・。
さあそれでは、解決方法についてさっそくご紹介しましょう。
①マップのスマホ表示がはみ出てしまう問題の解決方法。
▲このように、グーグルマップが画面からはみでて、下にスクロールするときにグラグラしちゃうことがあります。
というか、多分テーマのデフォルトだとこうなるものが多いのでは、と思います。
こういう場合は、wpのテーマ編集画面にあるstyle.cssに、次のような修正を追加しましょう。
iframe{max-width:100%}
修正後は・・・
▲これで、すっきり解決できますね。
②PC版だと、マップの上に来るはずの店名がマップ下にずれ込んでしまう問題の解決方法
（▲店名がマップの左下にきちゃってる。）
さて、①のように修正すると、今度はPC版の画面で「店名がマップの下にずれこむ」という問題が発生する場合があります。
これを解決するためには、worpressの投稿画面の「テキストタブ」をクリックし、食べログの埋め込みコードの中にある店名横・</strong>~<script src…..>間に<br>というコードを埋め込みましょう。<br>は「brタグ」といい、改行を意味します。
▲上の画像がデフォルト、下の画像がbrタグ追加後。brタグ以外の変更点は無視して構いません。
▲これですっかり解決できましたね！！
上記2つのちょっとした修正があるかないかでエラい違いになるので、食レポにいくwpユーザーは必ずやっておきましょう。
おわりに まずは子テーマを導入しましょう。
問題は上記のやり方で問題なく解決できるかと思います。
しかし、ただstyle.cssを修正すると、将来的に新たなトラブルが発生しちゃうんですよ。
それは、「使用しているwpテーマが変更されると、レイアウトが初期状態に戻る」という問題です。
なので、まずはそれを防ぐために「子テーマ」を導入しておくのがおすすめ。詳細は以下のサイトページにて詳しく記載されてるのでご参考に。
