ブログでは、Googleマップを挿入する方法です。 ここで説明する方法は、Googleマップのサイトの 「マップを埋め込む」ページを参照しています。 この方法は、GoogleマップのAPIを登録せずに、Googleマップのサイトから地図を作成してマップを共有するコードを追加する方法です。
Googleマップをブログに追加すると、GoogleのSEOに有利に作用することができるとね。 グルメの紹介文を作成するときに、Googleマップを挿入してください。
カカオマップを挿入したい場合は、次の記事を参照してください。
[この記事はずっと前に書かれていましたが、最新のインターフェースに合わせて完全に修正して再発行しました。 ]
ブログでは、Googleマップを追加する方法
1 まず、 グーグルマップ サイトに移動して、目的の地域を検索します。 次に、共有アイコンをクリックします。
2 共有ウィンドウが表示されたら 地図埋め込み （①）をクリックして、 HTMLのコピー （②）をクリックして、共有リンクをコピーします。 その後、iframe形式で地図がコピーされます。
次に、コードをウェブサイトまたはブログの任意の場所にHTMLコードとして貼り付けます。
反応型で、Googleマップを挿入する
画面の解像度に合わせて適切なサイズで地図が表示されるように反応型で、Googleマップを挿入するには、iframeの外部に別のclassをめぐる次のCSSで調整してくれればされます。
<div class="map-responsive"> <iframe src="https://www.google.com/maps/embed?...</iframe> </div>
次のCSSを使用します。
.map-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
/* Source: ostraining
上記のように適用すると、Googleマップが携帯でも正しく表示されます。
WordPressこの方法を応用して、Googleマップを追加する方法を以下に記載されています。 同様の方法で寀ーブログに適用して反応型でGoogleマップを挿入することができます。
WordPressにGoogleマップを追加する
WordPressでは、Googleマッププラグインを使用して、簡単に地図を置くことができます。 プラグインの使用を希望しない場合は、上記のCSSコードを活用することができます。
WordPress 管理者ページ » デザイン » カスタマイズ » 追加のCSSに上記のCSSコードを追加します。一部 WordPress バージョンでは、「デザイン」が「ルックス」などに翻訳されている可能性があります。 （参考までに日本語と中国の場合、「外観」という単語に翻訳されました。
その後、グーグルマップサイトのアドレスを検索してマップを共有するコードをコピーし、HTMLコードに追加します。 ブロックエディタでHTMLコードを追加するには、カスタムHTMLのブロックを選択します。
エレメンを使用している場合は、HTMLウィジェットを選択してください。
カスタムHTMLブロックに次のような形式でマップを共有するコードを追加します。
<div class="map-responsive">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3165.1062622773675!2d127.00489301541758!3d37.50541183538383!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca17ca5bcbcc5%3A0xe21243e195c38f39!2z7ISc7Jq46rOg7IaN67KE7Iqk7YSw66-464SQ!5e0!3m2!1sko!2skr!4v1592817756049!5m2!1sko!2skr" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>今地図が反応型で正しく表示されます。
CSSコードを追加作業は一度だけとなり、Googleマップを入れるとき、上記のようなHTMLコードの形式で追加するようにします。
参考までに、いくつかの WordPress 最適化プラグインでは、サイトの速度を向上させるために子供のフレームのGoogleマップの機能を無効にするオプションを提供することができます。 地図が表示されない場合はiframeのGoogleマップの機能が無効になっていないことをチェックしてみてください。
例：
他の方法で WordPress用Googleマッププラグインを使用することも可能ですが、簡単に挿入できるのであえてプラグインを使用する必要はないようです。プラグインを使用すると、より簡単に追加できますが、後でそのプラグインが更新されなかったり、他のプラグインと競合したりするなど、問題を引き起こして使用できない状況が発生する可能性があります。
パターン（再利用可能ブロック）を作成して活用する
WordPress サイトからGoogleマップを頻繁に挿入する場合は、Googleマップを埋め込むHTMLブロックを作成してから、パターンとして保存して再利用できます。
HTMLブロックを作成したら、ブロックのオプションアイコン（3点のアイコン）をクリックして パターン生成を選択します。
パターン作成ポップアップが表示されたら、パターン名（マップやGoogleマップなど）を入力し、 同期 オプションをオフにします。
これからは /パターン_名前を入力してすばやくGoogleマップを挿入できます。たとえば、パターン名を「マップ」に設定した場合、新しい段落ブロックで /マップと入力すると、下図のように地図パターンを選択できるように表示されます。 （/マップを入力してもパターンが表示されない場合は、最後にポイントを追加すると表示されることがあります。 /マップ。)
Googleマップを挿入するHTMLブロックがロードされると...のマップ埋め込みコード部分を、新しく挿入するマップの埋め込みコードで置き換えるようにします。
ブロックエディタのキーボードショートカットを習得すれば、すばやく書き込みが可能で、マウスの使用を最小限に抑えて手首にかかる負担を軽減できます。
良い文章ありがとうございます！ すっきりうまく動作しますね
役に立ちましたことを願って。活気のある一週間過ごす。
ありがとうございハプニダン役立つ多くなりました
新しいGoogleのマップAPIの標準プランに基づいて2016年6月22日以降に作成されたすべての新規アプリケーションでは、Google Maps APIキーが必要です。 https://www.thewordcracker.com/basic/%EA%B5%AC%EA%B8%80-%EB%A7%B5-%EC%B6%94%EA%B0%80-%EC%8B%9C-%EC%98%A4%EB%A5%98%EA%B0%80-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-%EA%B2%BD%EC%9A%B0/ 文を参考にしてください。
グーグルマップを挿入するときの言語を指定する場合は、次の記事を参照してみてください：
https://www.thewordcracker.com/miscellaneous/%EB%B8%94%EB%A1%9C%EA%B7%B8%EC%97%90-%EA%B5%AC%EA%B8%80%EB%A7%B5%EC%9D%84-%EC%82%BD%EC%9E%85%ED%95%A0-%EB%95%8C-%EC%96%B8%EC%96%B4-%EC%A7%80%EC%A0%95%ED%95%98%EA%B8%B0/
場合でも、応じて、次のようなエラーが発生する可能性があります。
この場合、 https://www.thewordcracker.com/basic/%EA%B5%AC%EA%B8%80-%EB%A7%B5-%EC%B6%94%EA%B0%80-%EC%8B%9C-%EC%98%A4%EB%A5%98%EA%B0%80-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-%EA%B2%BD%EC%9A%B0/ 文を参照して、問題の解決を試してみてください。