編集の概要

最初の基本的な作成・操作方法

Googleサイトへのログインから初めてHPを作成する操作方法

1.Googleサイトの初期画面へログイン

スタート編に従って、Googleサイトの初期画面を表示します。

2.新しいサイトを作成

3.編集の概要

①Googleサイトの編集画面

編集画面は、大きく3つです。実際に表示される部分「タイトルエリア」と「コンテンツエリア」、右側に編集するメニュー「操作メニューエリア」です。右上には、Googleサイト全般を設定するメニューバーがあります。

Googleサイトで作成できるホームページはこのレイアウトが基本です。実際の画面例が下図です。

レイアウト構成は、メニューエリアを上部にするか左側するかの2つの選択だけです。タイトル部分とコンテンツ部分は同じです。

メニューエリアを左側にした場合

コンテンツエリアの作り方で多少レイアウトの見栄えを工夫する方法もありますが、レシポンシデザインを考えるとこのようなシンプルなレイアウトがベターです。スマホ利用者の画面では縦一列で表示されるからです。

②タイトルエリアの概要と編集

「ページのタイトル」部分をクリックし編集します。

一般的にはヘッダーと呼ばれる部分です。

クリックし入力状態では、枠上部に文字調整メニューが表示されます。

左から題名(文字の種類)・フォントの種類・大きさ・太字・斜字・下線字・色・ハイパーリンク・配置(左右・中央)、「・・・」は行間などの詳細設定です。 

※ここのタイトル欄の文字種類は「題名」とします。コンテンツエリアでは他に変更します。(詳細は後述)

タイトルを入力

「ページのタイトル」にホームページの名称を入力します。ここでは、「練習ページ」としました。

ページのタイトル入力後、左上の「タイトル」と表示されている部分(赤点線枠)も入力します。

この部分は全てページで自動で表示されるタイトル(名称)になります。

また、ここに入力した文字列がGoogleサイトの名前(ファイル名)になります。

「Googleサイト練習」と入力しエンターキーを押すと、「無題のサイト」が「Googleサイト練習」に変わります。

※このタイトル(名称)は変更が可能です。但し、変更した場合でもファイル名は変わりません。ファイル名の変更は、Googleサイトの初期画面での変更操作になります。(後述)

ページタイトルとタイトル(名称)が入って状態でのプレビューが下図です。

なお、編集の詳細は「基本編」の「ヘッダーとフッター」で説明しています。

③コンテンツエリアの概要

タイトルエリアの下、この図では、白い部分がコンテンツエリアです。この部分に、文章や図形など(コンテンツ)を配置していきます。

コンテンツエリア内を、上下をセクション、左右をブロックとここでは呼ぶことにします。

上下のセクションは、

セクションの背景を色分けして表示したものです。セクション単位で下方向へ配置していきますが、特に長さの制限はありません。

セクションは移動して上下の入れ替えが可能です。ドラッグ操作だけで簡単です。

左右のブロックは、

最大12ブロックの構成になっています。

少し見にくいですが、「テキストボック」を挿入した時点で、ボックスをクリックすると下図のように横に12の枠が見えます。

ボックスをドラッグして小さくする動作時が下図です。ボックスの下の両外に枠線が現れます。この図では、ボックスが枠で、左右2枠空いて中央位置にあることがわかります。

コンテンツエリア内で、左右のブロックはこの12ブロックの位置にしか配置ができません。これを理解でれば、図や文字の位置調整がスムーズに行えます。

ブロックを色や写真で表したのが下図です。

最大の12ブロックにするとこのようなイメージです。通常の利用に使うことはないでしょう。

6ブロックのイメージです。縦長の写真であれば利用することはできそうです。

4ブロックのイメージです。挿入メニューにあるコンテンツブロックにある最大がこれです。

テキストボックスのブロックの横に図形ブロックを配置したものが下図です。