記事の本文の中にGoogleMapの地図を挿入する方法について解説します。
1.GoogleMapの挿入
2.GoogleMapのレスポンシブ対応
GoogleMapの挿入
①「httpss://www.google.co.jp/maps/」
にアクセスします。
②地図上にポイントしたい建物名や具体的な住所を入れて下さい。(例:姫路城)
③検索結果として表示された場所を確認し、画面上部にあるメニューを開き、
「地図を共有または埋め込む」をクリックして下さい。
④「地図を埋め込む」をクリックして下さい。
⑤WordPressで表示できる埋め込み用のコードが表示されます。地図の大きさもカスタマイズできるので
カスタマイズ後、埋め込み用のコードをコピーして下さい。
⑥記事の新規作成画面を開いて下さい。
⑦⑤でコピーした埋め込み用のコードを貼り付け、「更新」ボタンをクリックして編集した内容を反映した後
「投稿を表示」をクリックして下さい。
⑧GoogleMapが表示されます。
GoogleMapのレスポンシブ対応
①管理画面の「外観」メニューの中にある「テーマの編集」メニューをクリックして下さい。
②テンプレートの中からスタイルシート(style.css)を選択し、最後の行に以下のコードを追加する。
追加するコード
③記載した埋め込み用のコード前後に下記のコードを追加する。
④対応前後を比較すると、変化が確認できます。
対応前
対応後