このページでは、編集操作で基本となる操作を説明しています。
特に、「１．コンテンツエリアの編集操作の基本」をしっかりとマスターしてください。
１．コンテンツエリアの編集操作の基本
コンテンツエリアのイメージができれば、次は具体的な編集作業です。
編集作業は、操作メニューアリアの「挿入」に編集メニューがあります。
最初のブロックに「テキストボック」、「画像」、「埋め込み」、「ドライブ」があります。編集作業は、この中の「テキストボック」と「画像」を使う事がほとんどだと思います。
編集操作の基本
②画像
画像をクリックすると、「アップロード」か「選択」が表示されます。
「選択」は、Googleドライブからの選択です。予めGoogleドライブやGoogleフォトに必要な画像を入れてある場合です。
「アップロード」をクリックすると自分のパソコンのフォルダーが表示されます。画像があるフォルダーを選択、ファイルを指定してアップロードします。
Googleサイトのマーク画像をアップロードした例です。
①テキストボックス
「テキストボックス」クリックするとコンテンツエリアにテキストボックスが作られます。文字量に応じて下方向には自動で広がります。下に余白をつくる場合は、エンターキーで改行します。
ボックスの左右の「・」をドラッグすることで枠幅調整ができます。
ボックス上部にタイトルと同様のフォントや配置などの調整メニューボックスが出ています。これを使ってフォントの種類・サイズ・色等と左右の位置や段落と必要に応じて調整します。「･･･」は行間やインデントの調整するその他メニューです。（詳細は下図）
なお、コンテンツエリア内にテキストボックスを作ると左端に２列の点10個のマーク（赤丸）とその外側に３つのメニューマークが表示されます。
点マークはセクションを表しています。セクションを移動させる時に利用します。
3つのメニューはセクションの操作でセクションの「背景色」の変更、セクションの「コピー」と「削除」です。
テイストボックス編集時に表示されるメニューの内容は以下です。一般的なワープロなどの文字編集機能とほぼ同様です。
左端にある「文字の種類」は、通常は「標準テキスト」です。「題名」、「見出し」等は、テーマ設定と応用編を参照してください。
※2023年5月7日編集時点で新機能の追加を確認しました。「ハイライトの色」で文字にマーカー色（塗潰し）を付けることができるようになりました。その他の横三点マークで表示されます。テキストの表現力がアップします。
補足点１
テキストボック内のフォント種類とサイズは、「テーマ」設定のフォントとサイズが既定値になっています。この既定値を使った文字列は後から「テーマ」設定で変更することで全て変更できます。反対にテキストボックス内でフォントとサイズを別に指定した文字列は「テーマ」設定のフォントとサイズを変更しても変わりせん。
補足点２
フォントの種類は多くありません。また、斜体に対応しているのはアルファベットのみです。
アップロードすると図のような画面で、上部に編集メニューが一緒に表示されます。左から「切り抜き」・「アンクロップ」・「リンク」・「削除」・「その他」です。
画像操作で多いのが、サイズ調整です。サイズを変更するハンドル（５つの「・」マーク）中、左右下の「・」をドラッグして拡大縮小調整します。この時にシフトボタンを押しながらクリックすると上下左右均等に調整できます。
編集メニューでは、画像の切り抜きがあります。（下図）切り抜いた画像を元に戻すのが「アンクロップ」です。
編集メニューの詳細は、応用編を参照してください。
③編集操作の実際
挿入メニューのトップにある操作は、コンテンツエリア内でダブルクリックすると円形のメニュー画像が現われます。
「挿入」メニューにある４つに加えて右側緑色のマークは「アップロード」です。この上部「画像」マークは画像選択（Googleドライブ内）のみになります。
編集の基本操作が編集画面上のダブルクリックだけで行えるようになっています。
①テキストと②画像で説明したように、ホームページ製作編集では、殆どがこの2つのコンテンツのブロックを挿入していくことになると思います。
挿入したブロックをどう配置していくかが編集操作にかかるポイントです。
編集概要で説明しているように、Googleサイトでは、左右が１２ブロックに位置になります。そして、上下はセクション単位になります。
テキストと画像のブロック配置のイメージを掴んでもらうため、動画で紹介します。
動画は３分２６秒です。
コンテンツブロックの配置方法.mp4④コンテンツブロック
テキストボックスと画像をセットで配置する「コンテンツブロック」が６つのパターンで用意されています。
赤丸マーク部分が図を挿入する部分です。
テキストボックスは２段構成で、タイトル（文字が大きく設定）と説明文を入れるようになっています。不要な場合は、挿入後もそれぞれ削除できます。
③は図のみ3個パターンで、これ以外は図とテキストボックスがセットになっています。説明は図の編集で後から追加するができます。
コンテンツブロックは、プレースホルダーと呼ばれるもので、挿入メニューにあります。パワーポイントを利用している方は利用されたことがあるかもしれません。
①の図１つのパターンを挿入したのが上図です。セクションとして、挿入されます。
図側の「+」マークをクリックすると下図のメニューが現われます。「画像を選択」で編集概要の説明で使ったGoogleのマークを選択しました。図枠サイズに比べてマークが大きいようです。このような場合は、上部に編集メニューのアンクロップを押すとその下のように枠に収めてくれます。
なお、一端挿入した画像を変更する場合は、上部メニューの「︙」縦三点リーダーから「画像の置換」を利用します。
説明欄にも文字をいれ完成した状態です。
説明内容のビデオです。（1分27秒）
コンテンツブロックの挿入.mp4Googleサイトではテキストボックスのサイズ調整は簡単に行えますが、図や画像を思うように配置するのが結構難しようです。（詳細は応用編で説明）
図や画像する方法としては、挿入メニューやダブルクリックメニューでの「画像」・「アップロード」・「ドライブ」から挿入するより、コンテンツブロックかプレースホルダーを先に挿入しておいて、そこへ図や画像を挿入する方法が容易だと思います。
２．コピペ
Googleサイトをお勧めできる大きなメリットがコピペです。
１ー③編集操作の実際では、画面のダブルクリックメニューを紹介しましたが、Googleサイトのメリットしてあげているコピペでこの操作無しで編集ができます。
テキスト以外に写真や画像もコピペが可能です。
手元のパソコンなどで必要なテキストを選択し「ctrl+C」でコピーします。そして、Googleサイト編集画面内で「ctrl+V」で貼り付けること＝テキストボックスができます。
手元のパソコンなどの画像のあるフォルダーを開いて画像を選択し、Googleサイトの編集画面にドラッグするだけで画像が挿入することができます。（テキスト同様にctrl+C・ctrl+Vも可能）
ワードやパワーポイントなどオフィスソフトでは、パソコンのフォルダーにある画像をドラッグして編集画面に挿入することができます。
編集経験のある方は利用しているのではないでしょうか？これは同じパソコン内なのでできることでした。
私の経験では、Googleサイトと同様に編集できるHP作成のオンラインサービスではできないようです。（WIXと言うサービスでもできないのですが、ブログ部分だけはできています。）
Windowsのショートカット（ctrl+ｃ）でコピーし、Googleサイトの編集画面に貼り付け（Ctrl+ｖ）で画像を挿入することもができます。
Windowsの一時記憶（クリップボード）にあるものを貼り付けることになるので、別ソフトを起動し画像を編集しコピー、又はワードやパワーポイント内の画像をコピーして、Googleサイト内で貼り付けることも可能です。
ちょっとした画像をいちいちアップロードしてから挿入は大変です。この機能が非常に便利であり、Googleサイトを活用する意味の大きなところではと考えております。
テキストのコピペ.mp4テキストのコピペ
画像のコピペ.mp4画像のコピペ
３．その他
①保存
Google サイトには、保存ボタンなど保存メニューがありません。上部に表示されるメニュー（下図）を見ていただくとわかりますが、「変更内容はすべてドライブに保存しました」と表示で自動的に保存される仕組みです。（ちょっと不安ですね）
②編集を戻す
その横にある左右の向きの矢印をクリックすることで、編集のやり直しや再編集することができます。今行った編集が失敗（思う操作）した場合は、「直前の操作を元に戻す」で編集前状態に戻せます。この操作は結構必要になり、便利です。画像の挿入位置が思い通りいかないなど場合など頻繁使うことがあります。（一般的なソフトにある機能、ctrl+zも同様に機能します）
これは直前の操作に限られますが、以前のものに戻す場合は、「その他（縦三点マーク）」メニューに「変更履歴」があり、クリックすると右枠に表示される履歴（タイムスタンプ）から必要なものを選択することで、過去の状態に戻すこともできます。応用編で説明しています。
③プレビュー
出来上がりは、プレビュー画面で確認することができます。
プレビュー画面では、図が右下に表示されます。最初はPCモード（大画面）です。その横がタブレットモード、左端がスマホモードでの表示が確認できます
ここまでで、一応編集の基本は終了です。
Googleサイトでは、編集に関わる細かな設定は「テーマ」を編集することになります。セクションのカラー設定、フォントの種類やサイズ（標準テキストや見出しなど）に行間隔など通常編集に関わる項目を設定し、この設定を使うことで、後から設定変更すると一斉に変更することができます。
「テーマ設定」からページの編集方法をマスターしてください。