※学校パックログイン方法 学校パックを詳細までご覧頂くためには、ログインが必要になります。
ログイン方法は、サイトの右上にある ”ログイン” をクリックしてください。
◆ ログインID:otamesi パスワード:otamesi
学校様向けテンプレートの無料お試しのお申込みはこちら
 
ロゴ NeXtCommons 学校パック
NeXtCommons小学校テンプレートデモサイト
     都心にありながら緑豊かな自然に囲まれたNXC小学校。
太陽のように元気いっぱいな子どもたちが自慢の学校です。
 
ホーム > TIPS > Googleマップの貼り付け方
 

Googleマップの貼り付け方

  1. 「アクセス」ページのGoogleマップを変更する方法
  2. 新規にGoogleマップを貼り付ける方法



【1.「アクセス」ページのGoogleマップを変更する方法】
ここでは「学校基本情報」の「アクセス」ページに設置してある「アクセスマップ」を変更する方法について説明します。

<1-1>
Googleのサイトを表示させます。検索ボックス下の
「地図」のリンクテキストをクリックします。

サンプル



1-2>
Googleマップのページが表示されます。
に表示させたい建物の名称や住所を設定し、の「地図を検索」ボタンをクリックします。
ここでは例として「ユニアデックス株式会社」を検索します。

サンプル


設定内容に問題がなければ、検索結果が表示されます。
次に画面右にある「リンク」のリンクテキストをクリックします。

サンプル


クリックすると下図のような画面になりますので、その画面にある「埋め込み地図のカスタマイズとプレビュー」のリンクテキストをクリックします。

サンプル



1-3>
クリックすると新しい画面が表示されるので下記の手順に従って設定を行います。
1.の「カスタム」を選択し、「幅」に「630」、「高さ」に「500」を設定します。
2.の「プレビュー」で表示させたい位置を調整します。(地図上でドラッグ&ドロップで調整可能)
3.に表示されているHTMLをコピーします。
  (すぐには使用しないのでこの画面を残して次のステップに進んでください)

サンプル



1-4>
NeXtCommonsの画面に戻ります。
「アクセス」ページを表示し、「セッティングモード」をクリックします。
(ページ上部にある「学校基本情報」をクリックし、左側のメニューにある「アクセス」をクリックすると表示されます)



1-5>
「アクセスマップ」の編集ボタンをクリックすると、下図の設定画面が表示されます。
「パーツ名称」が「Googleマップ」の「編集」リンクテキストをクリックします。

サンプル


画面が下図のように切り替わります。
<3>でコピーしたHTMLを貼り付け、「決定」ボタンをクリックします。
これでGoogleマップの貼り付けは完了です。

サンプル



【2.新規にGoogleマップを貼り付ける方法】

<2-1>

管理者権限にてログインし、セッティングモードにします。
モジュールの追加メニューから『ブログパーツ』を選択します。



<2-2>
「新規作成」タブをクリックすると、下図の画面が表示されます。
の「パーツ名称」にブログパーツの名称を設定します。ここでは「新規ブログパーツ」とします。
の「スクリプト」には【1.「アクセス」ページのGoogleマップを変更する方法】<1-1><1-3>を参考にしてHTMLを貼り付けます。
設定が完了すれば、「決定」ボタンをクリックします。
これで新規にGoogleマップを貼り付けることができます。

サンプル