きょういち!で作られた教会ホームページ(WordPress)にGoogleマップを埋め込む方法を解説します。
教会ホームページに地図を載せる方法はいくつかありますが、きょういち!では、現在一般的なGoogleマップを埋め込む方法を使っています。
手描きの地図イラストを載せる、といった教会もありますが、利便性の面から言うとGoogleマップを埋め込んだ方がよいかと思われます。
もくじ
【どのバージョンも共通の3STEP】WordPressにGoogleマップを埋め込む
「とある教会01」「とある教会02」「とある教会03」いずれをお使いの方も共通の3ステップです。作業時間は5分ほどかと思います。
きょういち!テンプレートごとの具体的な方法を紹介していきます。
【架空教会01(とある教会01)】でGoogleマップを埋め込む
0:00 イントロダクション
0:33 手順 3STEPの概要
1:07 ①Googleマップに行って埋め込みたい場所のコードを取得
1:42 埋め込みコードはここからコピー
2:15 ②WordPressの編集画面に行って貼り付けます
3:14 ③サイズ変更&確認
埋め込みたい教会や住所を入力して、場所を指定します。
なかほどにある「共有」ボタンをクリックします。

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

デフォルトのサイズは「中」になっています。
そのまま「HTMLをコピー」をクリックします。(クリックするだけでコピーされています)

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

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

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

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


→Ctrl+Vで貼り付け(ペースト)ができます。
Step1でコピーした「Googleマップの埋め込みHTMLコード」を張り付けて、マップ情報を差し替えてください。
→最後に、コード内のサイズを変更します

width=”600″→width=”800“(「中」を選択した場合、600→800に)
height=”450″→height=”450″(「中」を選択していた場合は変更ナシ)
更新ボタンを押して、実際の表示を確認してみてください!
【架空教会02(とある教会02)】でGoogleマップを埋め込む
0:00 イントロダクション
0:30 手順 3STEPの概要
1:03 ①Googleマップに行って埋め込みたい場所のコードを取得
1:38 埋め込みコードはここからコピー
2:15 ②WordPressの編集画面に行って貼り付けます
3:00 ③サイズ変更&確認
埋め込みたい教会や住所を入力して、場所を指定します。
なかほどにある「共有」ボタンをクリックします。

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

デフォルトのサイズは「中」になっています。
そのまま「HTMLをコピー」をクリックします。(クリックだけでコピー済み)

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

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

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

コード内を適当にクリックしてカーソルを置く→Ctrl+A(全選択)→Ctrl+V(Googleマップの埋め込みコードをペースト)
Step1でコピーした「Googleマップの埋め込みHTMLコード」を張り付けて、マップ情報を差し替えてください。

完成です!更新ボタンを押して、実際の表示を確認してみてください!
→最後に、コード内のサイズを変更します

width=”600″→width=”800“(「中」を選択した場合、600→800に)
height=”450″→height=”450″(「中」を選択していた場合は変更ナシ)
更新ボタンを押して、実際の表示を確認してみてください!
【架空教会03】でGoogleマップを埋め込む
…動画準備中です…
動画ができたらここにタイムスタンプを掲載します
埋め込みたい教会や住所を入力して、場所を指定します。
なかほどにある「共有」ボタンをクリックします。

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

デフォルトのサイズは「中」になっています。
そのまま「HTMLをコピー」をクリックします。(クリックだけでコピー済み)

架空教会03では、地図を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マップの道案内を埋め込んでいます。
「こんなマップの埋め込みがあったよ!」という例やアイデアがありましたらぜひ教えてください!
ここに入れるか未定
ここに入れるか未定