【Googleサイト】お知らせ掲示板を作成する方法〜実践編

作りながら学ぶ

シリーズ連載を通して、ポータルサイトを作りながらGoogleサイトを体系的に学ぶ方法を解説。


こんにちは、たま(@closuppo)です!

今回は「第3回:お知らせ掲示板を作成する方法」について説明していきます。

新しくページを追加し、社内情報を共有するお知らせ掲示板を作成しましょう。

たま

全シリーズは以下のページにまとめてます


※目次をクリックすると
タイトルの先頭まで移動します(↓)

目次



前回のおさらい

googleサイト006

作成するサンプルサイトはこちら

シリーズ連載を通して上図サンプルサイトを作成しています。

前回の記事では、ヘッダーに画像やロゴを挿入して見た目をデザインする作業を行いました。

今回は、その続きでサイトに【お知らせ掲示板】のページを作成します。

前回の記事はこちら


ページを追加する

お知せ掲示板のページを作成しましょう。

ページメニューからボタンをクリックすると小さいウィンドウが表示されますので「お知らせ」と入力し完了をクリックしてください。

googlesites-study301

ページが追加されました。

googlesites-study302

ページを階層化する

メニューが見やすくなるように【お知らせ】のページは階層化しておきます。

【お知らせ】ページをクリックし【ホーム】にドラッグしてください。

googlesites-study303

【お知らせ】ページが階層化されました。

googlesites-study304

見出しのタイプを変更する

ヘッダー背景の画像を非表示にして、タイトルのみ表示されるシンプルなヘッダーに変更しましょう。

背景画像にカーソルを合わせ見出しのタイプボタンをクリックしてください。

googlesites-study305

タイトルのみボタンをクリックしてください。

googlesites-study306

画像が非表示になりタイトルのみが表示されました。

googlesites-study307

ココ

ページ単体でヘッダーをカスタ

マイズできるんですね


お知らせ掲示板を作成する

googlesites-study308

上図のサンプルのように、他のメンバーにお知らせする内容を入力していきましょう。


テキストボックスを追加する

テキストの入力/編集ができるようにするために【テキストボックス】を追加しましょう。

空白箇所をダブルクリックし【テキストボックス】を2つ追加してください。

googlesites-study309

見出しを作成する

お知らせする日付とタイトルを入力してください。

googlesites-study310

メニューバーのをクリックし、スタイルを見出しに設定してください。

googlesites-study311

セクションの背景ボタンクをクリックし、背景の属性を強調1に設定してください。

googlesites-study311

見出しが作成されました。

googlesites-study313

お知らせ内容を入力する

【見出し】下のテキストボックスにお知らせ内容を入力してください。

googlesites-study314

セクションを複製する

新しくお知らせ内容を追加する場合は、コピー機能を活用しましょう。

セクションのコピーを作成ボタンクをクリックし、【見出し】と【お知らせ内容】の【テキストボックス】を複製してください。

googlesites-study315

ドラッグ&ドロップで【テキストボックス】を移動してください。

googlesites-study316

複製した【見出し】と【お知らせ内容】を修正してください。

googlesites-study317

ココ

複製した方が作業が楽ですね

タマ

同じデザインのテキストボックス

を使う場合はコピー機能を活用し

ていきましょう


まとめ

Googleサイトで「お知らせ掲示板を作成する方法」についてお伝えしました。

社内スケジュールや業務連絡、イベント告知などの情報共有をスムーズに行えるよう、Googleサイトを活用して業務効率化を実現しましょう。

全シリーズをまとめているページはこちら


ココ

スマホからでも手軽にお知らせ

の確認できて便利です

タマ

次回は「社内イベントを共有する

ページ」を作成しましょう



ポータルサイトを作りながら体系的に学ぶ

googleサイト006

シリーズ連載を通して、ポータルサイトを作りながらGoogleサイトを体系的に学ぶ方法を解説してます。

サイト作成で学んだ基礎知識をアウトプットすることで、実用的なGoogleサイトのスキルを習得することができます。

≫ これから作成するサンプルサイトはこちら