WordPressブログの記事に地図を埋め込みたい、と思ったことはありませんか？
今回はブログの中にGoogleマップを貼り付ける方法を説明します。
私もラーメン屋とか食堂を紹介する際にGoogleマップを記事の中に埋め込んでいます。
Googleマップはブログの中に簡単に挿入が可能です。
Googleマップで貼り付けたい地図を探す
まずはGoogleマップで貼り付けたい地図を探します。
地図は、Googleで目的のお店などを検索して「地図」を選択すると見つかります。
Googleマップの「共有」をクリック
Googleマップには「共有」というボタンがあります。
「共有」をクリックして「地図を埋め込む」を選択します。
埋め込む地図の大きさを選ぶ
ここで貼り付ける地図の大きさを選択します。
地図の大きさは「小」「中」「大」「カスタムサイズ」の4つがあります。
私はブログの記事に入れる場合は「中」を選択することが多いですが、
「小」「中」「大」は実際に選んでみて、どれくらいの大きさなのか一度確認してみるといいでしょう。
「カスタムサイズ」は、地図を任意の大きさに調整できます。
Googleマップを記事に埋め込む
地図の大きさを選んだら「HTMLをコピー」を押します。
そしてWordPressの「テキストエディタ」を選択して、コピーしたHTMLを記事の中に貼り付けます。
「ビジュアルエディタ」で確認すると、記事の中にGoogleマップが埋め込まれています。
Googleマップを記事の真ん中に表示させる方法
埋め込んだGoogleマップは左側に寄っています。
地図を記事の真ん中に配置させるには、GoogleマップのHTMLを<center>と</center>で挟みます。
<p align=”center”>と</p>でHTMLを挟んでも、同じように真ん中に表示させることができます。
Googleマップの上下余白を調整する方法
Googleマップの上下余白を調整するには、<p style=”margin: 3em 0 5em;”>と</p>などのコードでGoogleマップのHTMLを挟みます。
※このコードの場合、地図の上に3文字分、地図の下に5文字分の余白ができます。
数字を変えることによって余白の大きさは変わるので、任意の値にしてください。
たとえば「2.5em」と書けば「2.5文字分」になります。
なおコードの文字は、スペースを含めてすべて半角文字を使用してください。
全角文字を1つでも使うとコードが効かなくなります。
地図をセンターに配置して、上下に余白を設けるには次のコードを使います。
<p style=”margin: 3em 0 5em;” align=”center”></p>
ということで今回は、地図（Googleマップ）をブログの記事に埋め込む方法でした。
コメント