1. 11月29日~お得なクーポン配信予定!お得なクーポン配信予定!2. 期間限定セール800点以上がラインナップ!注目の目玉アイテムはこちら!20%OFF > ふっくら綿混あったか裏起毛長袖パジャマ20%OFF > ふわふわトイレマット・フタカバー(単品・セット) 【選べる7色×11タイプ】20%OFF > 使いはじめからしゃりふわの今治タオル[日本製]30%OFF > ダウンとボアのあったかルームブーツ対象商品をすべて見る3. ホットコット((あったかインナー))のまとめ買いで最大20%OFF 3~4点 5%OFF 5~9点 10%OFF 10点以上 20%OFFホ...
東京ガス株式会社が展開する新電力「東京ガスの電気」では、 基本プラン(従量電灯B・Cから切り替えの方) ずっとも電気3(低圧電力から切り替えの方) を新規で契約をおこなうと、電気代の基本料金が3か月無
エヌ・ティ・ティ・コミュニケーションズ株式会社(本社:〒100-8019 東京都千代田区大手町2-3-1 大手町プレイスウエストタワー)が展開する、格安SIM・格安スマホの 「 OCN モバイル ON

ワードプレス「Googleマップ」がはみ出てしまう場合の対処方法

入会金・年会費無料!ミッキーマウス / トイ・ストーリ デザイン イオンカード

Googleマップの埋め込み方法

プラグインを使わないGoogleマップの表示方法です。カスタマイズをおこなう場合は、あくまで自己責任でお願いいたします。

googleマップで埋め込みたい地図を表示させる。

左側の共有をクリックする。

20161103-01

「地図を埋め込む」をクリックすると「html」が表示される。

埋め込む地図の大きさ「小」「中」「大」「カスタム」を選択する。

「html」を埋め込みたい地図にコピーする。

20161103-02

「Xeory Extension」スマートフォンでははみ出てしまう場合の対処方法

テーマによってCSSを記載する場所が違いますので、変更する場合は確認してくださいね。

「Xeory Extension」の場合

「外観」

「テーマの編集」

「スタイルシート style.css」

から

@media screen and (max-width: 767px) {
/* phone */

の場所に

.post-content div.map {
position: relative;
width: 100%;
padding: 75% 0 0 0;
}

.post-content div.map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

を記載します。

貼り付けたgoogleマップを

<div class="map">  </div>

で囲むとスマートフォンでも画面に収まります。

この方法で、スマートフォンにgoogleマップを表示させた場合、表示までにかなり時間がかかります…

そのままリンクを張り付けた方が良いかもしれません…

誕生日特典の情報と共に思い出のバースデーフォトを募集しています。

誕生日特典の情報や楽しい誕生日の思い出をサイトで紹介しませんか?

サイトでご紹介させていただいた方には、アマゾンギフト券 1,000円分(Eメールタイプ)をプレゼント!いたします。

皆さんの楽しい思い出のバースデーフォトや誕生日特典の情報をお待ちしております。

本日の注目記事はこちら



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です