アイフラッグラボ
iFLAG Labs is a technical information site which iFLAG offers.
iFLAG Labs provides you with the opportunity to experience and evaluate new and emerging innovations, technologies, and service from iFLAG.

トップページ»  【GoogleApps機能紹介】Googleサイト»  【Googleサイト機能紹介】Googleサイトでホームページを作ってみよう

【Googleサイト機能紹介】Googleサイトでホームページを作ってみよう

 

はじめに

 
こんにちは!!
アイフラッグ サポート担当MAです
 
今回は、Googleサイトを利用した、ホームページ作成方法を公開します。
 
アイフラッグでも部署や、チーム単位で、情報共有サイトを持ちたいという要望が多く、
Googleサイトを案内しているのですが、普段ホームページ制作をしていない部署でも
感覚的に作成出来ているので、本コンテンツでは、基本機能の使い方と、
少し便利な使い方をご紹介していこうと考えています。
 
 

 


【Googleサイト機能紹介】-新しくサイトを作成する-(2013-07-12)

 
1、サイトのページで作成ボタンを押す
 
Googleサイト新規作成ボタン
 
2、サイトの名前と、URLを決める
 
Googleサイト新規作成時の初期入力画面
※サイトURLは、他のURLと重複ができません。複数のサイトを作成する際は注意してください
 
・テーマを選択
→サイト全体のデザインを統一することができます。たくさんのテンプレートがあるので、
作成したいホームページの雰囲気にあったものを選択しましょう。
今回は、基本テーマのままで進めます。
 
・その他のオプション
→あとで変更できるので、今回は使用しません。
 
3、名前とURLの入力が完了したら、作成ボタンを押せば完了です。

↓こんな感じで作成されます(各エリアの説明の為に枠線を入れてあります。)
 
Googleサイトが作成された初期画面(画面が上真ん中左右下で4分割されています)
 
作成されたページは、4つの要素で構成されています
 
・ヘッダー
画面上部のタイトルが表示されている部分
 
・サイドバー
画面左側のページ内のリンク先などを表示する部分
 
・メインコンテンツ
画面右側の比較的大きな部分
コンテンツのタイトルと、内容を表示する部分
 
・フッター
画面下に表示されている部分
初期に表示されている部分は編集できませんが、オリジナルのフッターを追加することは可能です
 
新規作成方法については以上です

 
アイフラッグサポート担当:MA
 
2013-07-12
 

 


【Googleサイト機能紹介】-メインコンテンツを編集する-(2013-07-12)

◆編集方法
 
1、画面右上のページを編集ボタンをクリック
 
コンテンツ編集ボタン
 
2、メインコンテンツ内のタイトルと本文を編集
 
・テキストを編集
 
ページタイトルと本文にテキストを入力します
 
 
・画像を挿入
 
画面左上の挿入タブより、画像を選択
 
挿入ボタンから画像を挿入します
 
 
表示させたい画像を参照ボタンから読み込むと、対象画像が表示されるので
画像を選択してOKをクリック
 
画像アップロード画面

 
3、画面右上の保存ボタンを押すと、編集画面が終了します

 
◆新規ページの作成
 
1、画面右上の新しいページボタンをクリック
 
新しいページの作成ボタン
 
2、ページ名を編集

ページの内容を編集する画面
 
・ページ名を編集すると自動でURLも作成されるので、必要に応じて編集します。
 
・使用するテンプレートは、内容に応じて変更します
 
後からでも変更できるので、今回は普通のウェブページを選択します。
 
・場所の選択
 
画面左のサイドバーに表示される形式が変わります
ページをトップレベルに置くと並列に表示され、「アイフラッグラボの支店です」の下に置くと格納表示されます
後からでも変更できるので、今回は、トップレベルに置きます
 
・入力が完了したら、作成ボタンを押します
 
3、コンテンツ編集画面が表示されるので、ページタイトルや、本文を編集し、保存ボタンを押します
 
サイドバーに新たなページが表示されています。
 
サイドバーにページリンクが表示されています
 
参考:後から変更出来る設定
 
※1 テンプレートの変更方法
画面右上のその他ボタン→ページの設定→現在ページのテンプレートを使用しています ウェブページ (変更)から変更できます
 
※2 ページURLの変更
画面右上のその他ボタン→ページの設定→ページのURL
 
※3 格納場所の変更
画面右上のその他ボタン→ページの移動
 
 
◆各ページの編集方法
 
サイドバーから編集したいページに移動すればページ単位で編集が可能です
 
 
次回は、ホームページのデザインを変更してみたいと思います。
 

 
アイフラッグサポート担当:MA
 
2013-07-12
 

 


【GoogleApps機能紹介】Googleサイト概要説明

【Googleサイト機能紹介】-Googleサイトを利用してホームページを作成しよう-(2013-07-12)
  1. 【Googleサイト機能紹介】-新しくサイトを作成する-(2013-07-12)
  2. 【Googleサイト機能紹介】-メインコンテンツを編集する-(2013-07-12)
【Googleサイト機能紹介】-デザインを変更する(基本編)-(2013-07-17)
  1. 【Googleサイト機能紹介】-テーマを変更する-(2013-07-17)
  2. 【Googleサイト機能紹介】-タイトルヘッダーを変更する-(2013-07-17)
  3. 【Googleサイト機能紹介】-サイドバーを編集する-(2013-07-17)
  4. 【Googleサイト機能紹介】-オリジナルのフッターを編集する-(2013-07-17)
【Googleサイト機能紹介】-ページテンプレートを活用してトップページを大改造!!-(2013-07-18)
  1. 【Googleサイト機能紹介】-お知らせページの作成-(2013-07-18)
  2. 【Googleサイト機能紹介】-ファイルキャビネットの作成-(2013-07-18)
  3. 【Googleサイト機能紹介】-リストページの作成-(2013-07-18)
  4. 【Googleサイト機能紹介】-コンテンツをウェブページへ組み込む-(2013-07-18)
  5. 【Googleサイト機能紹介】-メインコンテンツのレイアウト調整-(2013-07-18)
【Googleサイト機能紹介】-サイドバーのカスタマイズ-(2013-07-20)
  1. 【Googleサイト機能紹介】-メインコンテンツを分割してサイドバーを作成-(2013-07-20)
  2. 【Googleサイト機能紹介】-メインコンテンツ内のサイドバーへナビゲーションを作成-(2013-07-20)
  3. 【Googleサイト機能紹介】-水平ナビゲーションの設定-(2013-07-20)
更新担当:アイフラッグ社内サポートチーム