Google サイト

クラウド型CMSの中でも最も簡単に利用できるのが、Google サイトです。 (2021年4月）

Google サイト

利用するためには、グルーグルのアカウントが必要である点とブラウザとしてグルーグルクロームかファイアーフォックスのどちらかが必要になります。（インターネットエクスプローラーやEdgeなどからは利用できない）

グルーグルドライブと連動し、グルーグルの他のサービスとの連携が魅力です。また、最近はスマホでの閲覧を考慮してレシポンシブル対応が望まれますが、グルーグルサイトではタブレットやスマホモードでのプレビューも可能になっています。

共同で編集作業を行うのもグルーグルドライブと同様に簡単です。

Google サイトを始めるには

Google のサービスメニューにアクセス、Google サイトのアイコンをクリックします。

https://about.google/intl/ja/products/?tab=wh

グルーグルのアカウントが必要です。お持ちでない場合は事前に取得しておくことをお勧めします。

Google サイトをクリックし、Googleアカウントでログインしてください。

ログインすると右記のサイトが表示されます。

「新しいサイトを作成」で新規のサイトを作成することになりますが、いくつかのテンプレートが用意されています。

どれかのテンプレートを開いて見ると様子がわかりますので、一度どれかを開いて見てください。

下図はイベントのテンプレートです。

タイトル（見出し）エリアと下に掲載していくコンテンツエリアが表示されています。右側に作成していく操作メニューエリアの表示されます。サイトの構成はこの３つのエリアです。

タイトル部分の左上にこのサイト（ホームページ）の名称が表示され、右上には、メニューが表示されます。

新規作成

順番に作業過程を見ていきましょう。

新規作成すると右図のようにタイトルエリアと操作メニューエリアだけの表示なります。まずは、タイトル＝ホームページの名称を入力します。入力枠の左上の鉛筆マークか枠内をクリックすると入力できます。

枠左右をドラッグすると枠の拡大縮小ができます。入力状態では、左図のように上部に文字調整メニューが表示されます。

左からフォントの種類・大きさ・太字・斜字・下線字・色・ハイパーリンクなどです。

見出しのタイプをクリックするとタイトルエリアサイズなどの変更ができます。「タイトルのみ」がもっと狭く、「バナー」・「バナー大」・「カバー」の順に大きくなります。バナー・カバーの意味は背景と考えてください。見出しタイプ横の画像の変更をクリックすると、アップロード（パソコン内やグルーグルフォトやドライブから）するか画像を選択で用意されているいくつかの背景画像を使うことができます。

タイトルを入力

見出しタイプをカバー、画像を選択で適当なものを入れました。

左上のタイトルも入れておきます。これは全てページで表示されるタイトルになります。

右下の赤丸２か所は、左が画像の明るさ調整と右や画像の位置調整（画像のどの部分の表示させるか）です。

挿入メニュー

ここからは、いよいよコンテンツを作成していきます。

右図の操作メニューを利用します。

「挿入」・「ページ」・「テーマ」の３つのタブがあります。「テーマ」は背景の配色設定、「ページ」はページの追加と構造の調整（タイトルに表示されるメニュー構造）です。コンテンツを入力するのが「挿入」メニューです。

上部にある「テキストボックス」と「画像」使うのが基本操作です。テキストボックスで文字を入力するし、画像をアップロードしていれる。パワーポイントと殆ど同様の作業です。

「テキストボックス」クリックするとコンテンツエリアにテキストボックスが作られます。（下図）左右の「・」をドラッグすることで枠幅調整ができます。上下の調整は自動で広がります。

ボックス上部にタイトルと同様のフォントや配置などの調整ボックスが出ていますので、これを使ってフォントのサイズや色などの調整していきます。

「画像」をクリックすると、「アップロード」か「選択」が表示されます。「選択」とはgoogleドライブ内からの選択と言うことです。予めgoogleドライブやフォトに必要な画像を入れているとこちらから利用でします。「アップロード」をクリックすると自分のＰＣのフォルダーが表示されます。画像のあるフォルダーを指定してアップロードします。

アップロードすると右図のような画面で、上部に調整メニューが一緒に表示されます。左から「切り抜き」・「アンクロップ」・「リンク」・「削除」・「その他」です。現時点での私の経験では、「切り抜き」が機能しないようです。（動作がおかしい）「アンクロップ」はここでは、切り抜きを元にもどるためのようですが、意味がありません。

画像操作は、サイズ調整です。５つの「・」マーク中、左右下の「・」をドラッグして拡大縮小調整します。この時にシフトボタンを押しならクリックすると画像全体が調整できます。シフトボタンを使わないと画像一部が欠けてしまいます。

画像の調整機能はまだまだ問題があるようです。今後の機能アップ改良に期待するところです。

googleサイトをお勧めできるポイントが画像の挿入です。通常は先の説明に従いますが、実はwindowsのショートカットで画像を挿入することができる点です。windowsの別画面の映像をgoogleサイト内へドラッグ（コピペ）が可能なのです！これはとても便利です。

ちょっとした画像をいちいちアップロードしてから挿入は大変です。別ウィンドウに開いたもの（例えば、無料素材サイトの図を右クリックして画像コピーし）をCtrl+ｖでペーストできます。下の指矢印しマークはフリー素材集からコピペしたものです。

テキストボックスと画像が入れば、それぞれをドラッグして配置を調整します。テキストボックスと画像をそれぞれ行全体として配置する、行内に並列に配置する、画像の上下左右にテキストボックスを引っ付け一体的な枠（プレースホルダー）とする、独立した枠とする等々です。ただし、位置やサイズ調整は大雑把なもので思い通りのサイズや位置に調整はできないと考えてください。

また、画像をテキストボックス上に重ねる、画像同士を重なることも出来ません。これも不便ですが！

これらの点も機能アップで改良を期待しますが、他のCMSでもこのようなことは起こります。他の比べ、アバウト過ぎる点がありますが、その分作り方が簡単です。

コンテンツエリアのレイアウトとして操作メニューの「レイアウト」と合致するものがあれば、それをコンテンツエリアへドラッグすることで枠組みが出来上がります。しかし、思いどおりのサイズの調整するが「難しい」、「出来ない」点があり。テキストボックスと画像を挿入して配置調整していく練習を繰り返し、慣れることが早道だと思います。

挿入メニューの下欄にはいくつのメニューがあります。（右図）

折りたたみ可能なテキストは、ここが見本です。「∧」マークがテキストボックス右に、下はは白い線が表示されます。ボックス内ではカーソルが👉マークになり、クリックすると折りたたみされているテキストボックス展開表示されます。

目次は便利な機能です。目次をクリックするとページタイトル下に目次枠（テキストボックス）が作成されます。ページ内のテキストボックスで目次としたい文字列を標準テキストから見出しにすることで、目次枠にその文字列が表示され、その位置へのリンクも設定されます。後から挿入したテキストボックスでも、目次欄には順序が適切に反映されます。

画像カルーセルもGoogleサイトの目玉かもしれません。ホームページのトップページタイトルでよく使われている画像のスライドショー機能です。このサイトのAboutページにサンプルを掲載しています。

ボタン（ページ移動やリンクのための背景色のある文字枠）や分割線（この枠の上部が見本です＝色や太さはこれだけ）などがあります。

ユーチューブ・地図やフォームなどのグーグルのサービスを配置できます。挿入メニュー上部のドライブからでも同じことができますが、まあグーグルの宣伝で個別にメニュー表示されているのでしょう！

ページ

ページは、サイト内での各ページの構成(位置や親子関係）を調整し、タイトルのメニューへの表示方法を調整します。

メニュー下部の「+」で新規ページを作成します。また、作成したページを複製（ページのコピーを作成）することができます。（ページ名の右端に現れる縦3列マークをクリックするとサブメニューが表示されます。下右図）

タイトル以外でも同じレイアウトを使う場合は複製作成してから編集すると便利です。

サイトのページの構成状態が表示されます。

右横図はこのサイトのページ構成です。ホームと同じラインにあるものが、トップのタイトルのメニュー表示され、その次のレベルにあるものは、タイトルメニューでカーソルが当たると表示されます。

ページマークにに斜めの線が入っている「写真」のページは非表示で隠しページなります。「ナビゲーションに表示しない」を選択します。（右奥図）

メニューの親子関係によりページをドラッグしてメニューのレベル位置を調整します。少しマウス操作が微妙で、難しいのが難点です！

メニューに表示される名前がブラウザーのURL欄に表示されるアドレス（公開名以下の「／」以下の名前）になります。メニュー名は日本語で良いのですが、URL欄は英字以外だとかな漢字交じりに、望ましくありません。そこで、ページ名のサブメニューのプロパティを開き、「詳細」をクリックして「カスタムパス」に英字で入力します。このカスタムパスがURL欄に表示される文字になります。トップページは,「home」・「top」などです。

テーマには、現在のところ右奥図のように、「シンプル」・「アリストテレス」・「ディプロマット」・「Vison」・「レベル」・「インプレッション」の６種類です。あまり大きな変化はありません。

それぞれで、色とフォントの選択ができます。テーマを選択することで、カラーとフォントメニューが表示されます。〇で表示されるカラー以外も右端〇をクリックするとカラー調整が出てきます。（右下図）個々に試してみてください。

まだまだ調整できるテーマ設定も少ないようです。この調整機能ももっと充実されていくこと期待しています。

追加情報（2021/09/24）

オリジナルテーマが作れるようようになっています。テーマタブを開くとトップに「カスタム」があります。「+」をクリックし新しいテーマを作成します。

テーマは、ヘッダー部分の画像とロゴ、セクションのカラー設定です。

名前欄にテーマ名を入れバナーとロゴ画像を追加します。追加方法はGoogleドライブかアップロードかの選択です。次がカラーパレットの選択＝ヘッダーとセクションのカラー設定です。セクション色で変更可能なスタイル２と３のカラー設定で、色のカスタマイズを選択すると次図の「テーマ色を変更」で左端がヘッダー、中央がスタイル２で右端がスタイル３です。スタイル１は白で固定されているようです。

最後がタイトル（ヘッダー）と本文の規定にするフォントを設定します。

保存

Google サイトには、保存ボタンなど保存メニューがありません。上部に表示されるメニュー（下図）を見ていただくとわかりますが、「変更内容はすべてドライブに保存・・」とで自動的に保存される仕組みです。（ちょっと不安ですね）

その横にある左右の向きの矢印で誤って削除したものを戻すや編集操作のやり直し＝「画面操作を元に戻す」、「画面操作をやり直す」で操作しますが、以前のものに戻す場合は、「その他（歯車マーク）」メニューにある変更履歴を開き、右枠に表示される履歴から必要なものを選択し、その時点で画面左上に表示される「この版を復元」で戻すことができます。

出来上がりは、プレビュー画面で確認します。上図「画面操作をやり直す」ボタンの横がプレビューボタンです。プレビュー画面では、右図が表示されます。最初はPCモード（大画面）です。その横がタブレットモード、左端がスマホモード（表示は電話番号とおかしい？）で表示が確認できます。

公開

右上の公開ボタンの「▼」が公開オプションで、右下図のメニューがあります。

公開設定が下図です。ウェブアドレスに設定したい名称を入てます。完成したアドレスは、https://sites.google.com/view/名称

これが、公開するホームページのアドレスになります。このサイトの名称は、https://sites.google.com/view/takaochです。

設定が完了するば、公開ボタンを押すと公開されます。

以降、編集したものを公開する時に毎回押すことになります。

以上で完成です！いかがでしょうか？簡単なコンテンツでトライしてみてください。

私は、普段からgooglechomeを使って、googleへもログイン状態を保持しています。さっと編集ページ入って、直に操作できます。ちょこちょこっとの編集や修正作業も苦になりません。

お使いのブラウザーにお気に入りなどで登録し、ログイン方法は工夫してみてください。

追加情報（2021/09/03）

ロゴとファビコン

歯車マークの設定を開き「ブランド画像」を選択すると、ロゴ・ファビコンの設定することができます。

ロゴは、タイトル左上のホームぺージ名称の横に表示するマークです。

ファビコンは、ブラウザーでタブ表示やブックマークした時に表示されるURL欄横に出てくる小さなマークです。下図が、このサイトのとひらかた市民活動支援センターのファビコン表示です。ページ表示で読み込み中がグルグル回ります。

16×16ピクセルの画像を使います。それぞれ、アップロード（Googleドライブ）し、選択します。

出来上がったテーマはテーマタブの上位に反映されます。右上の縦３点リーダーをクリックすることで編集が可能です。

編集をクリックすると左図で、赤丸部分のフォントとカラーパレットの編集が可能です。

Googleサイトのテーマは数が少なく設定できる情報も少ないため、オリジナルテーマが出来ると喜びいさんでチェックしました。しかしあまり大した変更できるものがありません。セクションのスタイル２のカラーがいまいち思うようなもので無かったので、使い勝手とするとここぐらいです。もっと機能の進化が望まれます。

埋め込み

HTMLの<iframe>インラインフレーム要素を使った埋め込み処理が簡単にできます。Googleスプレッドシートやドキュメントなど同じGoogleサービスからの埋め込みは挿入メニューにも用意されています。こちらを使えばファイルを選択しドラッグするだけで埋め込むことができます。ここでは、スプレッドシートのセル範囲を指定して必要な情報だけを埋め込む方法を説明します。

埋め込み用のGoogleスプレッドシートを開き、ファイルメニュー→共有→ウェブに公開を選択します。（右図）

埋め込むをクリックし、続けて、ドキュメント全体をクリックして公開するシートを選択します。（下図）

シータとを選択すると右下図の埋め込み用のコードが表示されます。コード内でクリックすると文字列が青色反転し、「コピーするには、ctrl+ｃを押します」と表示がでるとおり、コピーします。

Googleサイト側で、挿入メニューの埋め込みをクリックし（右図）、ウェブからの埋め込みが表示され、「埋め込みコード」を選択クリックします。（右奥図）

「iframeコードをここに入力」欄で、ペーストするとスプレッドシート側でコピ―したコードが入力されます。入力により右下の「次」がクリックできます。次をクリックの後は「挿入」をクリックすることで埋め込みができます。

この状態では、シート全体でかつ表示範囲も狭くなっています。（左下図）

埋め込んだ所クリックすると現れる鉛筆マーク（右上図）をクリックすることで埋め込み情報を編集していきます。

コードは以下のようなものです。

最初の「iframe」と「src･･･」の間に表のサイズ（幅と高さ）を指定するコードを入れます。(width="〇〇〇" hight="〇〇〇〇"」次が、表の範囲指定（セル範囲）です。「headers=false」の部分を表示するセル範囲の指定に変更します。(range=A1%3AH14&)　赤字部分がセルの左上と右下のセル番号。

これで、最初の埋め込み同様に「次」→「挿入」で埋め込みが完了します。この後は、埋め込んだも枠を拡大・縮小して、上手く表示されるように調整します。特に表サイズはドット数字なのです、この数字も上手く表示されるよう調整していきます。

画像の挿入

Googleサイトが最も便利だと感じているのが先に記載した画像のコピペ挿入です。今回この記事を書こうとしたのは、画像挿入に新たな方法を見つけたからです。

画像を挿入する場合、レイアウトを考慮して小さい画像を入れ、クリック時に大きく表示するような方法をとる場合があります。この場合、Googleサイトでは、大きな画像をGoogleドライブに準備し、ページ内の画像にリンクを貼ることになります。

今回偶然ですが、右図のような貼り付けができることが分かりました。画像のポップアップ（リンク貼り付け）と拡大表示ができる貼り方です。

画像右上と下に下記のマークが出ています。右上の「↗」マークをクリックするとGoogleドライブ内の画像がポップアップ表示されます。下の「ー+」を押すとその状態で画像の部分拡大表示ができます。

この拡大表示機能は便利です。また、ポップアップはリンク貼り付け機能は同じですが、貼り付け方が異なります。

色の編集.jpg

その方法は、

画像をGoogleドライブに準備することは同じです。ドライブ内で挿入する画像を右クリックでメニューをし、「リンクを取得」を選択します。リンク取得画面で「リンクをコピー」をクリックして完了ボタンを押し閉じます。

この状態でGoogleサイトの挿入したところで、Ctrl+Vで貼り付けすると、ウェッブからの埋め込みの表示画面（URL）となり、そのまま挿入ボタンをクリックすることでこのような埋め込みができます。

画像が小さい場合は、通常の同じリンクボタンのみなるようです。

この方法であれば、画像のアップロードは必要ですが、小さい画像と大きな画像2種類を用意いたり、画像貼ってからのリンクの手間は省けます。

リンク.jpg

ウェブからの埋め込み.png

Page updated

Google Sites

Report abuse