新規受付を再開しました!(サービス新規提供終了の可能性があるため検討中の方はお早めにご連絡ください)

【目的別】WordPressにGoogleマップを埋め込む方法

きょういち!で作られた教会ホームページ(WordPress)にGoogleマップを埋め込む方法を解説します。

教会ホームページに地図を載せる方法はいくつかありますが、きょういち!では、現在一般的なGoogleマップを埋め込む方法を使っています。

手描きの地図イラストを載せる、といった教会もありますが、利便性の面から言うとGoogleマップを埋め込んだ方がよいかと思われます。

 

【どのバージョンも共通の3STEP】WordPressにGoogleマップを埋め込む

「とある教会01」「とある教会02」「とある教会03」いずれをお使いの方も共通の3ステップです。作業時間は5分ほどかと思います。

GoogleマップでHTMLをコピーする
ホームページに載せる場所を確認して、HTMLを差し替える
サイズを調整して、実際の表示を確認する

 

きょういち!テンプレートごとの具体的な方法を紹介していきます。

【架空教会01(とある教会01)】でGoogleマップを埋め込む

この動画は1:07より再生されます
目次

0:00 イントロダクション
0:33 手順 3STEPの概要
1:07 ①Googleマップに行って埋め込みたい場所のコードを取得
 1:42 埋め込みコードはここからコピー
2:15 ②WordPressの編集画面に行って貼り付けます
3:14 ③サイズ変更&確認

埋め込みたい教会や住所を入力して、場所を指定します。

なかほどにある「共有」ボタンをクリックします。

Googleマップの埋め込み方法その①埋め込みたい教会や住所を入力して、そのページに飛びます。そこから「共有」ボタンをクリックします。

 

「地図を埋め込む」をクリックします。

Googleマップの埋め込み方法その②

 

デフォルトのサイズは「中」になっています。

そのまま「HTMLをコピー」をクリックします。(クリックするだけでコピーされています)

Googleマップの埋め込み方法その③

 

架空教会01では、ホーム(トップページ)をスクロールしていくと、下のほうに「アクセス」と書いてあるところがあります。

 

架空教会01の管理画面からログイン→固定ページ→ホーム

 

下にスクロールしていくと、「アクセス」という項目があります。

ここの、「カスタムHTMLコード(アルファベットがたくさん並んでいる)ブロック)」を選択します。

 

「ブロック内のコード(たくさんアルファベットが並んでいるところ)」を適当にクリック→Ctrl+Aでブロック内のコードを全て選択してください。

 

 

→Ctrl+Vで貼り付け(ペースト)ができます。

Step1でコピーした「Googleマップの埋め込みHTMLコード」を張り付けて、マップ情報を差し替えてください。

→最後に、コード内のサイズを変更します

width=”600″→width=”800“(「中」を選択した場合、600→800に)
height=”450″→height=”450″(「中」を選択していた場合は変更ナシ)

更新ボタンを押して、実際の表示を確認してみてください!

 

【架空教会02(とある教会02)】でGoogleマップを埋め込む

1:03~より再生します
目次

0:00 イントロダクション
0:30 手順 3STEPの概要
 1:03 ①Googleマップに行って埋め込みたい場所のコードを取得
 1:38 埋め込みコードはここからコピー
 2:15 ②WordPressの編集画面に行って貼り付けます
 3:00 ③サイズ変更&確認

埋め込みたい教会や住所を入力して、場所を指定します。

なかほどにある「共有」ボタンをクリックします。

Googleマップの埋め込み方法その①埋め込みたい教会や住所を入力して、そのページに飛びます。そこから「共有」ボタンをクリックします。

 

「地図を埋め込む」をクリックします。

Googleマップの埋め込み方法その②

デフォルトのサイズは「中」になっています。

そのまま「HTMLをコピー」をクリックします。(クリックだけでコピー済み)

Googleマップの埋め込み方法その③

 

架空教会02では、「アクセス」のページにあります。

 

架空教会02の管理画面からログイン→固定ページ→アクセス

 

アクセス>カスタムHTMLブロック(たくさんアルファベットが並んでいるブロック)を選択

 

コード内を適当にクリックしてカーソルを置く→Ctrl+A(全選択)→Ctrl+V(Googleマップの埋め込みコードをペースト)

Step1でコピーした「Googleマップの埋め込みHTMLコード」を張り付けて、マップ情報を差し替えてください。

完成です!更新ボタンを押して、実際の表示を確認してみてください!

→最後に、コード内のサイズを変更します

width=”600″→width=”800“(「中」を選択した場合、600→800に)
height=”450″→height=”450″(「中」を選択していた場合は変更ナシ)

更新ボタンを押して、実際の表示を確認してみてください!

【架空教会03】でGoogleマップを埋め込む

…動画準備中です…

目次

動画ができたらここにタイムスタンプを掲載します

埋め込みたい教会や住所を入力して、場所を指定します。

なかほどにある「共有」ボタンをクリックします。

Googleマップの埋め込み方法その①埋め込みたい教会や住所を入力して、そのページに飛びます。そこから「共有」ボタンをクリックします。

 

「地図を埋め込む」をクリックします。

Googleマップの埋め込み方法その②

 

デフォルトのサイズは「中」になっています。

そのまま「HTMLをコピー」をクリックします。(クリックだけでコピー済み)

Googleマップの埋め込み方法その③

 

架空教会03では、地図を3か所に入れています。

  1. ホームの下のほう
  2. 「アクセス」のページ
  3. 「フッター」

の3か所になります。

 

①ホームの下のほう

 

③フッター

 

【①ホームの下の方にあるGoogleマップの埋め込み方法】と【②「アクセス」のページにあるGoogleマップの埋め込み方法】は、「架空教会01」の埋め込み方と同じですので、そちらをご確認ください。

 

③「フッター」へのGoogleマップ埋め込み方法

まず、管理画面の外観の中にあるウィジェットをクリック。

右のほうにあるフッターを探してください。

 

フッターの中の、カスタムHTML:アクセスをクリック

 

既に入っているHTMLを選択し→Ctrl+A(全選択)→Ctrl+V(Googleマップの埋め込みコードを貼り付け)。

Step1でコピーした「Googleマップの埋め込みHTMLコード」を張り付けて、マップ情報を差し替えてください。

 

コード内のサイズを変更して、保存ボタンを押してください。

黄と緑のマーカーあたりを変更

width=”600″→width=”800
height=”450″→height=”350″

実際の表示も再読み込みをして、どのように表示されているかを確認してみてください!

完成です!!

 

 

【応用編】地図の見え方を調整したい・地図に最寄り駅を入れたい…など

調整できます。動画制作中です!

船橋栄光教会では、Googleマップの道案内を埋め込んでいます。

船橋栄光教会のサイトはこちら

「こんなマップの埋め込みがあったよ!」という例やアイデアがありましたらぜひ教えてください!

 

ここに入れるか未定

ここに入れるか未定