Googleサイトの使い方

かながわ災害情報連絡会

2018.8.21

​

Googleサイトの使い方ホームページ

Googleサイト、Jimdo比較−１（Googleサイトが優れている点）

Googleサイト、Jimdo比較−２　（Jimdoが優れている点）

Googleサイト、Jimdo比較−３（Googleサイト、Jimdo同等）

Googleサイトの新規作成

① Googleドライブにログインします。　https://drive.google.com

② Googleドライブ内に新規Googleサイト用のフォルダを作ります。フォルダ名は例えば「二ツ橋水辺愛護会」「パソコンふれあい館せや」「瀬谷災ボラネット」など何でも構いません。

③ フォルダーを開いた状態で、新規→その他→Googleサイトの順でクリックします。

④ 「無題のサイト」が作られます。タイトルを「二ツ橋水辺愛護会」他、具体的なサイト名に変更します。

⑤ 同じフォルダ内に「写真」「データ」など素材を入れるフォルダを作っておきます。

⑥ 素材フォルダの共有を「インターネット上の誰でも検索、閲覧可」に設定します。

Google

ドライブ

二ツ橋水辺愛護会

データフォルダ

二ツ橋水辺愛護会サイト

写真

フォルダ

素材フォルダの共有を「インターネット上の誰でも検索、閲覧可」設定する

①　素材フォルダを右クリックし、更に「共有」をクリックする

②「共有可能なリンクを取得」をクリックする

③「リンクを知っている全員が閲覧可」のプルダウンメニューをクリックする

⑤「オン−ウエブ上で一般公開」にチェックを入れる

⑥「インターネット上の誰でも検索、閲覧可」となっていることを確認し「完了」をクリックする

④「詳細」をクリックする

Googleサイトの編集・メニュー画面、管理メニューはシンプル

ページ追加−１

① 画面右の編集メニュー上部のページをクリックします。

② 編集メニュー下部の＋記号をクリックします。

③ 「新しいページ」「新しいリンク」の内、「新しいページ」をクリックします。

④ 新しいページの名前記入欄が表示されるので、例えば「カレンダー」と書き「完了」をクリックします。カレンダーページが追加されます。

⑤ 「新しいリンク」をクリックすると、外部サイトに直リンクを貼ることができます。例えば「瀬谷災ボラネット」「https://seya-svn.jimdo.com/」と記入します。

ページ追加ー２

追加したページを右クリックすると６つのメニューが表示されます。

​

​

管理メニュー１　共同編集者の追加

Googleサイトは、以下の手順でサイトを共同編集できます。

① 上部管理メニューの人形アイコンをクリックします。

② 「招待」欄に共同編集者のメールアドレスを記入しOKをクリックします。デフォルトでは「編集者」として追加されます。

③ プルダウンメニューで「公開済みアイテムを閲覧可」に切り替えることもできます。

③ 最下段の「編集者によるアイテムの公開、アクセス権の変更、新しいユーザーの追加を禁止します」にチェックを入れ、編集者の役割を制限することもできます。

​

管理メニュー２　公開設定１

ホームページを一般公開するには、あらかじめ公開設定します。

① 「公開ー特定のユーザーだけが閲覧できます」右の「変更」をクリックします。

② 公開設定画面で「誰でも公開バージョンを検索、閲覧可能」」にチェックを入れ「保存」します。

なお、この設定は一般ユーザとの共有設定という位置付けです。実際のGoogleサイト公開には、管理メニュー一番右側の「公開」でURL設定する必要があります。

管理メニュー２　公開設定２

③ Googleサイトをインターネットに公開するには、管理メニュー一番右の「公開」をクリックします。

④ ウエブアドレス（ここでは例としてfutatsubashi）を入れ、公開をクリックします。これで初めてホームページが公開されました。無料版ではGoogleサイトURLは以下となります。独自URLはG Suite契約で可能です。

https://sites.google.com/view/futatsubashi/

⑤ これ以降、Googleサイトを変更の都度、　「公開」をクリックし変更を確定します。Googleサイト下書きを変更しても「公開」をクリックしない限り、変更は反映されません。

ヘッダー写真、ロゴ、ファビコン

① Googleサイトにヘッダー写真を加えることができます。写真サイズは、横950ピクセル ｘ縦190ピクセル位が手頃です。ヘッダー画像を変更するにはヘッダー部分左下の「画像を変更」からパソコン上の写真をアップロードするか、またはGoogleDrive上の画像を選択します。

② Googleサイトにロゴ画像を加えることができます。ロゴ画像を加えるには、ヘッダー部分左上の「ロゴを追加」からパソコン上の写真をアップロードするか、またはGoogleDrive上の画像を選択します。

③ Googleサイトにファビコンを追加することができます。（参考サイト：テキストや画像を追加、編集する）

https://support.google.com/sites/answer/90538?hl=ja

文章挿入

① 編集メニューの「挿入」→「テキストボックス」をクリックするとページに文章を挿入できます。

② テキストボックスでは、文字の種類（標準テキスト、タイトル、見出し、小見出し、小）の選択、配置（左、中央、右）、文字へのリンク挿入できます。

③ 本文用の標準テキスト、小ではB（ボールド）、I（イタリック）、番号付きリスト、箇条書きの指定が可能です。

写真挿入

① 編集メニューの「挿入」→「画像」または「アップロード」をクリックするとページに画像を挿入できます。

② 「画像」ではあらかじめGoogleDriveにアップロードした画像またはインターネット上の画像検索で入手した画像を挿入できます。

③ 「アップロード」ではパソコン上の画像（JPG、PNGまたはGIF）をアップロードすることが出来ます。

④ 画像にリンクを貼ることもできます。

レイアウト

編集メニューのレイアウトを使うと２列〜４列ページを作ることができる

YouTube、カレンダー、地図埋め込み

• YouTube埋め込み
• カレンダー埋め込み
• 地図埋め込み

挿入手順

​

①　挿入したいYouTube、カレンダー、地図の共有設定が「インターネット上の誰でも検索、閲覧可」であることを確認しておきます。

​

②　Googleサイト右側編集メニュー「Googleの埋め込み」から、YouTube、カレンダー、地図をクリックします。

​

③　挿入したいYouTube、カレンダーまたは地図を選択し、右下の「挿入」をクリックします。

スプレッドシート、ドキュメント、スライド、フォーム挿入

• Googleドキュメント（文書、MS Word相当）
• Googleスライド（プレゼン、MSパワーポイント相当）
• Googleスプレッドシート（表、MS Excel相当）
• Googleフォーム（お問い合わせ、アンケート作成）

​

​

​

挿入手順

​

①　挿入したいドキュメント、スライド、スプレッドシート、フォームの共有設定が「インターネット上の誰でも検索、閲覧可」であることを確認しておきます。

​

②　Googleサイト右側編集メニューGoogleドキュメントからドキュメント、スライド、スプレッドシートまたはフォームをクリックします。

​

③　挿入したいドキュメント、スライド、スプレッドシートまたはフォームを選択し、右下の「挿入」をクリックします。

Googleドライブ上のPDFファイル埋め込み

手順

① 挿入したいPDFファイルの共有設定を「インターネット上の誰でも検索、閲覧可」であることを確認しておきます。

② 挿入したいPDFファイルのurlをコピーします。

​

③ Googleサイトの編集メニュー「挿入」の

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

​

④「ウェブからの埋め込み」のurl欄にコピーしたurlを貼り付けます。

​

⑤「挿入」をクリックします。

Facebookページ埋め込み

① facebookのページプラグインにアクセスします。https://developers.facebook.com/docs/plugins/page-plugin/

② facebookページのURL欄に、挿入したいfacebookページのurl 例えばhttps://www.facebook.com/ictkanagawa を入れます。幅（70〜500px）、高さ（任意）に変更できます。

③ コードを取得するをクリックします。

④ Iframe欄のコードをコピーします。

⑤ Googleサイトの編集メニュー「挿入」の「埋め込む」をクリックすると「ウエブからの埋め込み」ページに切り替わります。

⑥「埋め込みコード」をクリックし、コピーしたIfarmeコードを貼り付けます。「次へ」「挿入」の順でクリックします。

（参考ページ）超簡単だった！FacebookページをWebサイトに貼り付ける方法　https://usortblog.com/easy-facebookpage-embed/

ツイッター埋め込み−１

① あらかじめ埋め込みたいツイッターのurlを入手しておきます。例えば　瀬谷区公式Twitterなら　https://twitter.com/seya_yokohama

② https://publish.twitter.com/#　にアクセスします。

③ What would you like to embed?の枠内に埋め込みたいツイッターurlを貼り付け→をクリックします。

④ Embeded timelineをクリックします。

⑤ Copy Codeをクリックし、Googleサイトの編集メニュー「挿入」→「埋め込む」→「埋め込みコード」で貼り付けます。

（参考ページ）タイムラインを埋め込む方法　https://help.twitter.com/ja/using-twitter/embed-twitter-feed

ツイッター埋め込み−２

検索タイムライン（例えば、#トコラボDITS）は、以前は埋め込みできたが、2018.8.2時点ではツイッターの公式サポート対象外となっています。

キーワード #トコラボDITSでのツイッター検索は、今も利用可能なので、当面、検索したURLにリンクを貼っておくのが無難です。

#トコラボDITSへのリンク：�https://twitter.com/search?q=%23%E3%83%88%E3%82%B3%E3%83%A9%E3%83%9CDITS&src=typd

eコミマップ埋め込み

① あらかじめ挿入したいeコミマップを作成し、インターネット公開設定しておきます。

② eコミマップの「公開範囲設定」をクリックします。

③ 地図配信情報の「埋め込みタグ」をコピーします。デフォルトでは高さが500pxです。必要に応じ1000pxなど値を変更します。

④ Googleサイトの編集メニュー「挿入」→「埋め込む」→「埋め込みコード」に貼り付けます。

mp3音楽再生

① 再生したいmp3ファイルの共有設定が「インターネット上の誰でも検索、閲覧可」であることを確認します。

② mp3ファイルのURLをコピーします。https://drive.google.com/file/d/1ITtQDCro22D4JtfBbV6MYVaiKCtLa9-h/view?usp=sharing

③ このURLは、共通部分と個別id（file/d/ と /view?で挟まれた領域）で構成されているので、個別idを切り抜きます。

https://drive.google.com/file/d/ファイルの個別id/view?usp=sharing

mp3ファイルの個別id：1ITtQDCro22D4JtfBbV6MYVaiKCtLa9-h

④ 再生するmp3音楽URLは以下となります。<audio src="https://drive.google.com/uc?export=view&id=個別id" controls></audio>

<audio src="https://drive.google.com/uc?export=view&id=1ITtQDCro22D4JtfBbV6MYVaiKCtLa9-h" controls></audio>

​

ZIPファイルダウンロード

① ダウンロードしたいZIPファイルの共有設定を「インターネット上の誰でも検索、閲覧可」にしておきます。

② ZIPファイルのURLをコピーします。https://drive.google.com/file/d/1DnMVf2AHV5InULOHgvKVv9M2OSdwWZEp/view?usp=sharing

③ このURLは、共通部分と個別id（file/d/ と /view?で挟まれた領域）で構成されているので、個別idを切り抜きます。

https://drive.google.com/file/d/ファイルの個別id/view?usp=sharing

ZIPファイルの個別id：1DnMVf2AHV5InULOHgvKVv9M2OSdwWZEp

④ ダウンロードURLは以下となります。http://drive.google.com/uc?export=view&id=個別id

http://drive.google.com/uc?export=view&id=1DnMVf2AHV5InULOHgvKVv9M2OSdwWZEp

​

​

​

​

外部リンクとページ内埋め込みの得失−１

外部リンクとページ内埋め込みの得失−２

Googleサイトでの表の扱い（推奨）

①　Googleスプレッドシートで表を作る（横幅630px以下にする）

②　利用したいセル範囲をコピーする。

③　GoogleのブログサービスのBloggerの作成画面にそのまま貼り付ける

④　表をレスポンシブルにするため、Bloggerのhtmlを編集し以下を変更する。table-layout: fixed 　⇒　　table-layout: auto

例１：https://seyasvn.blogspot.com/2018/08/events-participants.html

​

例２：神奈川県の防災情報ポータルサイト