GoogleSiteで作る!簡単PTAホームページ

この記事は広告が含まれています。
ジオ

投稿者 Zio(ジオ)

今回は

無料ソフトウェア『Googleサイト』を使って、簡単にPTAのホームページを作る方法を解説します。

『自分たちで更新できるホームページ』を作ることで続けやすくなります。更新費用も改装費用もかからないので費用面でも安心です。ぜひ気軽に試してみてください。

注意 編集作業にはパソコンが必要です。

あわせておすすめ

PTAのICT ちょっと楽になる方法

関連シリーズ
PTAのICT

広告|AdSense

はじめに

使い方

この記事をスマートフォンで見ながら、パソコンで作ってみてください。

事前準備編

サンプルサイト

準備するもの

  • パソコン
  • スマホ
  • 載せたい画像
  • Googleフォーム

Googleフォームの作り方はコチラ⇩/

必要なものが揃ったっら、今度はGoogle ChromeGoogleアカウントを準備します。

すでに準備ができている人は基本編にジャンプ

GoogleChromeをインストール

GoogleChromeをパソコンにインストールしましょう。

1.「Chrome ダウンロード」で検索するか、下記のURLから
  Chromeダウンロードページに移動します。

■ GoogleChrome ダウンロード[1.36M]
  https://www.google.com/intl/ja_jp/chrome/

2.画面中央の Chromをダウンロード をクリック。
  「ChromSetup」ファイルが自動ダウンロードされます。

3.手順にそってインストールしていきます。(以下、3ステップ)インストールが完了すると自動的にGoogleChromeが立ち上がります。

  1. 開く
  2. 許可する
  3. インストールする

Chromeが立ち上がったら完了です。

Googleアカウントを作る

こちらを参考にPTA用のGoogleアカウントを作成してください

広告|AdSense

基礎編:トップページを作る

すでにできる人は応用編①にジャンプ

では、早速作っていきましょう!まずはGoogleサイトの「新しいサイト」を開きましょう。

Googleサイトを開く

  1. Google Chromeで「Google Site」と検索
  2. Googleサイト: ログイン画面からアクセス
    https://sites.google.com/

新しいサイトを開く

1.虹色の+ボタンをクリックしてください

「新しいサイト」の編集画面が表示される

ジオ

無題のサイトが開かれましたね

それでは、いよいよPTAホームページを作っていきましょう。

タイトルを設定する

1.ホームページの名前を入力しましょう。
 青枠部分[ページのタイトルをクリックし、タイトルを入力します。

例)○○市立△△小学校PTA

タイトルが長い場合は[Shift]+[Enter]で、行間をつめた改行ができます。

どんなことができるかまとめました。確認してみてください。

編集ツールボックスを確認しよう

拡大図

テキストの種類(題名・見出し・小見出し・標準・文字サイズ小)を選べます。

フォントを選べます

テキストサイズを変更できます

太文字にする場合にクリックします

イタリック(斜体)にする場合にクリックします

⑥文字に下線を引く場合にクリックします。

テキストカラーを選択できます。

⑧テキストを選択した状態でクリックするとリンクを貼ることができます。

⑨テキストの表示形式を選べます(左づめ・中央・右づめ・全幅)

アイテムを消すことができます。

タイトル背景を設定する

タイトルボックスの[画像を変更]をクリックし、[アップロード] をクリックします。あらかじめパソコンに保存していた画像を選択します。

画像が変更されていれば、成功です。

画像を挿入する

画像]ボタン

1.画面右側にあるツールボック上の[画像]ボタンをクリックする。

2.[アップロード]を選択し、あらかじめパソコンに保存していた画像を選択します

アップロードした画像は

  • 1クリックすると下辺に点が出現し、大きさの調整を行えます。
  • クリックしたままマウスを動かすと画像を掴めます。クリックを離すと離した場所に画像を配置できます。

テキストを入力する

1. ツールボックスの[テキストボックス]をクリックします。

2.文字を入力し、①テキストの種類[標準]を選択

*説明の小さい文字は[文字サイズ小]を選択してください。

クリック&ドロップ

画像同様に1クリックで大きさ変更の丸マークが表示されます。レイアウトの変更もクリックしたまま移動して離すと配置されます。

空いたスペースに別のテキストボックスを配置すれば、横並びレイアウトも可能です。

見出しを作る

1.ツールボックスの[テキストボックス]をクリックします。

2.文字を入力し、テキストの種類[見出し]を選択  

3.見出しのスタイルを変更します。テキストを選んだ状態で左側に表示されるパレットマークをクリックして、スタイルを選びます。

成功例

4.選んだスタイルに変更されれば成功です。

クイックメニュー

クイックメニュー

トップ画面の何もないところでダブルクリックすると[クイックメニュー]が出てきます。

応用編①:サブページを作る 

トップページを作りながら基礎的な内容を学びました。次はサブページを作りながら応用的な使い方を学んでいきます。内容は以下です

応用編①の内容

  • (演習4)プライバシーポリシーを設定する

Googleフォームのつくり方が知りたい人は↓↓

■GoogleフォームでつくるPTA便利アイテム123

https://zio-start.com/archives/2488

サブページを追加する

1.ツールボックスの[ページ]タブをクリック

2.ホームの右端に表示される[ ⁝ ]をクリック

3.[サブページを追加]をクリック

4.新しいサブページの名前を入力し、[完了]をクリック

5.新しいページができました。

広告|AdSense

演習1.クリーン活動のページを作る

(事前準備)Googleフォーム「クリーン活動 事前準備」を作成しておきましょう。

Googleフォームのつくり方が知りたい人は↓↓

■GoogleフォームでつくるPTA便利アイテム123

https://zio-start.com/archives/2488

サブページを追加するの項目を見ながらページ名「クリーン活動」でサブページを追加します。

基礎編の機能を使って写真の内容でページを作っていきましょう。

(演習1)クリーン活動のページ
  • 実際の活動内容を入力していただいてかまいません。
  • 画像の準備ができていない場合はツールボックス中の[プレスホルダ]を使用します。「(演習2)おやじ会のページを作る」を参照してください。

フォームを挿入する

Googleドライブ中に保存したフォームを申込ページにに埋め込みます。

1.ツールボックス中の[フォーム]をクリックしします。

2.埋め込むフォームをクリック[挿入]をクリック

  • クリーン活動 事前確認

その他の活動ページも作ってみよう

  • 学習指導
  • ベルマーク集計会

の活動ページを作りましょう。実際の委員会や活動のページでもかまいません。

広告|AdSense

演習2. おやじ会のページを作る

おやじ会のページを作っていきます。基礎編の機能を使用して以下の内容を作っていきましょう。さらに分割線の挿入、ボタンの挿入、プレスホルダの挿入を説明します。

ツールボックス

分割線(区切り線)を配置する

ツールボックス中の[分割線の追加]をクリックします。(赤線①)

追加した分割線をクリック&ドロップで必要な場所に配置していきます。

プレスホルダを配置する

製作前の画像・YouTube・マップ・ドライブの配置スペースを確保する際に使用します。

プレスホルダをクリックし、画像同様にサイズの変更を行い、クリック&ドロップで配置しましょう。

ボタンを配置する

(事前準備)交流会参加申し込みGoogleフォームをあらかじめ作成し、フォームのリンクを取得します。

ツールボックス中の[ボタン](赤線③)をクリックし、

  • ボタンの名前:「交流会参加申し込みフォーム」と入力
  • リンク:フォームの回答者リンクを貼りつけます

ページにボタンが追加されます。追加したボタンはクリック&ドロップで配置を行ってください。

リンクを取得する

1.Googleドライブで、リンクが必要なファイルの上で右クリック

2.[リンクの取得]をクリック

3.一般的なアクセスの項目を「制限付き」⇒「リンクを知っている全員」に変更

4.[回答者リンクのコピー]をクリック

5.[完了]をクリック

(事前準備)交流会参加申し込みフォーム・学習指導5月申込フォーム・クリーン活動 事前確認フォームを事前に作成しておきましょう。

各種申し込みをフォームで行う申込ページを作ります。

Googleフォームのつくり方が知りたい人は↓↓

GoogleフォームでつくるPTA便利アイテム123

https://zio-start.com/archives/2488

ボタンにフォームを挿入する

(演習2)で行った[ボタン]の挿入を使って

  • 交流会 参加申し込み
  • 学習指導 5月申込
  • クリーン活動 事前確認

を作成します。ボタンのリンクにフォームのURLを入力して有効にします。

演習4. プライバシーポリシーを設定する

プライバシーポリシーのページを作りましょう。下記を参考にプライバシーポリシーを作成しましょう。内容をコピー&ペーストして頂いてもかまいません。打ち込むだけの内容になりますが、ホームページの体裁を整える上で重要になりますので、ぜひ作ってみてください。

■△△小学校PTAホームページ/ホームページプライバシーポリシー

https://sites.google.com/view/san-kaku-pta/%E3%83%9B%E3%83%BC%E3%83%A0/Prv?authuser=0

演習5. 会則ページを設定する

会則や規則をまとめたページを作りましょう。

会則をPDFファイルで保存し、Googleドライブにアップロードしましょう。

PDFのつくり方

Word文章を保存する際に、ファイルの種類でPDFを選択するとPDFファイルが作成できます。

*PDFファイルにする理由は、WordやExcelの資料は端末によって表示されない場合があるからです。どの端末からも見れるようにPDFファイルで用意してください。

注意 :保存する前に作成者の名前を確認しましょう

Googleドライブにアップロードする

1.Googleドライブを開きます

2.[新規+]をクリック

3.ファイルをアップロードをクリック

4.パソコンに保存されたPDFファイルを選択

5.アップロードが完了

1.リンクを貼りたい文字をマウスで選択

2.編集アイテムの[リンク]ボタンをクリック

3.リンクの赤枠のところに、会則PDFのリンクを貼りつける

4.[適用]をクリック

完成です。

広告|AdSense

応用編②:全体を整える

応用編②では、サイト全体を整えます。

演習2-1 トップ画面を整える

サイト内リンクを貼る

画像やテキストに、サイト内リンク(サイトの中の他のページにいくためのリンク)を貼りましょう。

  • クリーン朝会
  • 学習指導
  • ベルマーク

それぞれの画像にサイト内リンクを貼ります。

1.アイテムの上でクリック

2.[リンク]ボタンをクリック

[リンク]

3.リンクの枠内でクリックし、プルダウンメニューからリンクさせたいページのタイトルを選択

4.[適用]をクリック

サイト内リンクの完成です

ナビゲーションの表示・非表示

1.ツールボックスの[ページ]タブを開きます。

2.ナビゲーションで非表示にしたいページの上にカーソルを合わせます。

3.右がわの ⁝ をクリックします。

4.[ナビゲ―ションに表示しない]をクリック

この手順で

  • クリーン活動
  • 学習指導
  • ベルマーク集計会

を、ナビゲーションの中から非表示にします。

演習2-2 サイトを使いやすくする


テーマの選択

ツールボックスの[テーマ]から、サイトのデザインの変更が可能です。好みに合わせて設定しましょう。

シンプル
アリストテレス
ディプロマット
Vision
レベル
インプレッション

設定を学ぶ

設定ツール

①戻る

②すすむ

③プレビュー

④公開アドレスのリンク

⑤編集者の追加

⑥各種設定

設定ツールの⑥⚙️歯車マークをクリックすると以下のダイアログが表示されます。

移動:ナビゲーションの位置を選べます。
   上か横(左)

ブランド画像:ロゴとファビコンをオリジナルのものに設定できます。

閲覧者ツール:情報アイコンとアンカーリンクの設定を変更できます

アナリティクス:Googleアナリティクスを有効にできます。

お知らせバーナー:サイトのコンテンツ最上部にお知らせを載せることができます。

それぞれのサイトに必要な設定を行ってみてください。

問い合わせページの設定

最後にお問合せページを作りましょう。今回のサンプルサイト△△小学校PTAホームページでは、直接電話番号とメールアドレスを掲載しましたが、電話番号やメールアドレスを表示したくない場合は、Googleフォームで問い合わせフォームを作ることもできます。

広告

そんな時はココナラ
こまで頑張ってみたけど・・・難しい

公開設定

1.最後に、公開設定を行います。ツールボックス上の[公開]ボタンをクリックしましょう。

公開設定ダイアログが表示されます。⇓

2.まずはWebアドレスを入力しましょう。

GoogleSiteのサブドメインではじめる場合は[ウェブアドレス]の欄に入力してください。

カスタムドメイン(独自ドメイン)を設定する場合

  • 既に他社で購入した独自ドメインを設定する
  • Googleドメインでカスタムドメインを購入する

を、選択できます。

3.「一般公開の検索エンジンに自分のサイトを表示しないようにリクエストする」にチェックを入れましょう。PTAホームページの場合に、防犯の目的で、不特定多数の目に晒さないように設定することをオススメしています。

(注意)検索エンジンに表示されなくてむ、Webアドレスが流出すると、多くの目に晒されることになります。必要に応じた対策を講じてください。

4.「公開する前に編集者が変更内容を確認する必要があります」にもチェックを入れましょう。編集前と編集後の比較ができます。

以上で、すぐできる!【GoogleSiteで作る】PTAホームページを終わります!最後までお付き合いくださりありがとうございました!

今回作ったページ

■△△小学校PTAホームページ

https://sites.google.com/view/san-kaku-pta

最後までお付き合いいただき、ありがとうございました。また次回お会いしましょう!

広告

そんな時はココナラ
ここまで頑張ってみたけど・・・難しい

広告|AdSense

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA