WordPressの話-06　Google Mapを挿入してみた - ペントスのほぼ日ブログ

WordPressの話の続きです。

前回、「WordPressの話-06」で、「Simple Map(プラグイン)の使い方がわからない」という話がありました。このプラグインは Google Map を挿入するためのプラグインなので、プラグインが使えることより「通常の操作で Google Map を挿入する方法を確認する」という話でした。

調べてみたところ、 Google Map を挿入する方法を見つけましたので、まとめておきます。

WordPressサイトにGoogleMapを埋め込む！レスポンシブ対応やプラグインの使用方法

というページを参考させて頂きました。

このページはすごく詳しいので、このページでわかると思います。

ですが、指定のアイコンが表示される場合と非表示の場合があるので、同じ内容ですが、一応、こちらでも解説しておきます。

操作は以下の通りです。　

Google Map の表示

↓

表示したい場所の入力　※今回は「大阪駅」

f:id:pen-toss:20170928142222j:plain

↓　表示したい場所のタグをクリック　

f:id:pen-toss:20170928142605j:plain

↓　表示された「共有」アイコンをクリック　

f:id:pen-toss:20170928143112j:plain

「共有」アイコンをクリックすると画面がグレーバックして地図の中央に小さな地図が表示される。小さな地図の上にタグが2個あり「リンクを共有」と「地図を埋め込む」が選べるので、「地図を埋め込む」を選択する。

「地図を埋め込む」を選択すると地図の大きさが選べるので「▼」を押して「小」、「中」、「大」、「カスタム」の4種類から希望の地図の大きさを選ぶ

↓　　

f:id:pen-toss:20170928145813j:plain

↓

赤い枠のところに表示されたコードを選択してコピーする　
※「Ctrl」＋「C」または、右クリック「コピー」

f:id:pen-toss:20170928150011j:plain

はてなブログの場合は、「見たまま」モードから「HTML編集」モードに切り替えて、</p>の後ろにコードを貼り付ける　
※一応、</p>の後ろに合わせているだけです。記事のど真ん中でなければ、好きなところに貼り付けてOKです。

↓

f:id:pen-toss:20170928150843j:plain

↓　貼り付けるとこうなります　

僕は地図のサイズを「中」にしました。パソコンの場合、「中」を選択すると地図上に「＋」、「ー」が表示されます。モニターのサイズにもよりますが「大」にするとスクロールしないと「＋」、「ー」が地図上に表示されないので僕は「中」を選択しました。このあたりは好みです。

ということで、Google Map をブログの記事の中に挿入する操作は以上です。

残りのプラグインについては以下のような感じです。