Honmaru Manual

   

【エディタを使った記事の作成】GoogleMapの挿入

31 8月 15
北川 哲平

No Comments

記事の本文の中にGoogleMapの地図を挿入する方法について解説します。

1.GoogleMapの挿入
2.GoogleMapのレスポンシブ対応

 

GoogleMapの挿入

①「httpss://www.google.co.jp/maps/
にアクセスします。
 
googlemap_1

②地図上にポイントしたい建物名や具体的な住所を入れて下さい。(例:姫路城)
 
googlemap_2

③検索結果として表示された場所を確認し、画面上部にあるメニューを開き、
「地図を共有または埋め込む」をクリックして下さい。
 
googlemap_3

googlemap_4

④「地図を埋め込む」をクリックして下さい。
 
googlemap_5

⑤WordPressで表示できる埋め込み用のコードが表示されます。地図の大きさもカスタマイズできるので
カスタマイズ後、埋め込み用のコードをコピーして下さい。
 
googlemap_6

⑥記事の新規作成画面を開いて下さい。
 
記事の新規作成

⑦⑤でコピーした埋め込み用のコードを貼り付け、「更新」ボタンをクリックして編集した内容を反映した後
「投稿を表示」をクリックして下さい。
 
googlemap_7

⑧GoogleMapが表示されます。
 
googlemap_8
 

 

 

GoogleMapのレスポンシブ対応

①管理画面の「外観」メニューの中にある「テーマの編集」メニューをクリックして下さい。
 
googlemap_responsive_1

②テンプレートの中からスタイルシート(style.css)を選択し、最後の行に以下のコードを追加する。
 
googlemap_responsive_2

追加するコード
 
googlemap_responsive_3

③記載した埋め込み用のコード前後に下記のコードを追加する。
 
googlemap_responsive_4

④対応前後を比較すると、変化が確認できます。
 
対応前
googlemap_responsive_6

対応後
googlemap_responsive_5