移行者向けマニュアル
Embedded Files
このぺージは、他のツールなどで作成されたウェブサイトからの移行のための情報を提供していきます。
クラウド型CMS
クラウド型CMS
Googleサイトは、CMS（コンテンツ・マネージメント・システム）と呼ばれるものに該当します。
ホームページは、あくまでもHTMLで記述されたものです。各ページ毎のHTMLファイルを作成し、それらを連携させて構成し作成します。たとえばホームページビルダーなどでも、ページ編集は、ワードで文章作成するように簡単に作成できるようにはなっています。大きく違う点は、ホームページビルダーなどで作成されたファイルは、契約しているサーバーにアップロードして、公開されることになります。CMSでは、直接サーバーで編集しているためアップロードの作業はありません。編集したものを「公開する」ボタンを押すだけです。
ホームページビルダーなどホームぺージ作成ソフトとGoogleサイトの大きな違いは、手元のパソコンで編集してアップロードするか、オンラインで直接編集するかの違いです。その意味でクラウド型CMSと表現しました。
編集作業でのメリットとデメリット
編集作業でのメリットとデメリット
メリット１
Googleサイトは、とにかく編集作業が簡単です。最も簡単なのが、画像の挿入作業です。クラウド型CMSでは、ワードプレスやWIX（注）でも画像を挿入する場合は、予め画像をアップロードする必要があります。ところが、Googleサイトでは、手元パソコンにある画像をコピぺ操作で張り付けることが可能です。一応編集メニュー（挿入）に画像ボタンがあり、Googleドライブ内からの選択かアップロードしての操作も基本でありますが、コピペだけで貼り付けられると大きな時短になります。
注：WIXはブログではコピペが可能。
メリット２
レイアウトが簡単！テキスト・画像・ユーチューブなどGoogleのコンテンツをそれぞれ独立して配置される。枠内にブロック分けできるが、基本それぞれ独立して配置となる。
メリット３
編集者権限を共有できるため、複数人で編集ができる。
メリット４
Googleクロームを使って、Googleサイト用のGoogleアカウントでログインしている場合は、閲覧状態から編集モードへ切替が簡単。
デメリット１
メリット２の反対として、画像の重ね合わせや、テキストと画像との重ね合わせ（テキストボックスを枠線が囲むなど）が出来ない。コンテンツが独立した配置である。
デメリット２
テンプレートが少ない。また、ページ設定のテーマも少ない。
移行方法は、コピペ！
移行方法は、コピペ！
なんだと思われますが、Googleサイトの特徴であるテキストだけでなく画像もコピペできるので、既存のサイトを別ウィンドで開き、編集しているGoogleサイトページにコピペしていきます。PDFファイルはコピペできませんので、こちらはあらかじめGoogleドライブにアップロードして、＜埋め込む＞操作かリンク設定で処理します。
現在のところ、移行するツールなどは存在していません。ページ数が多いと大変かもしれせんが、レイアウトの特徴（重ね合わせ無し）を理解（練習）してから、コピペ作業でも簡単だと考えております。
移行準備
移行準備
移行先としてGoogleサイトを作成し、必要なページを作っておくことになります。ここでポイントはレイアウトの決定です。ページメニュー（ナビゲーション部分）がタイトル（ヘッダー部分）の右上に表示するか、左のサイドバー表示にするかの2種類しかありません。変更は「設定」からいつでも簡単に変更できますが、予め決めておかれることをお勧めします。特にホームページビルダーなどで作成されているとサイドメニューに慣れておられる場合があると思います。
GoogleサービスからGoogleサイトを起動すると新規作成かテンプレートからの作成ができます。現時点（2022年8月7日）では、14種類のテンプレートがあります。その内「プロジェクト」「チーム」「ペットシッター」「生徒向けポートフォリオ」4種がサイドバータイプです。テンプレートを参考に練習しておいて、その後に新規作成して移行サイトを作成されてはと思います。
テンプレートギャラリー 「生徒向けポートフォリオ」の例→
移行方法
移行方法
Googleサイトを作成する。（始める人向けマニュアルを参照下ください。）特に必要なのがバナー設定（ページのトップ）です。
ページが出来上がれば、編集の練習をしてください。NPOなど団体活動では、PDFファイルを使っているケースも多いので、PDFファイルの挿入も練習してください。応用編
Googleサイトで、移行する予定のホームページ構成に合わせたページを準備する。（ページ構成）
PDFはGoogleドライブにアップしておく必要がありますが、今まで利用していた写真や図がお手元にあると思いますので、PDFと併せてGoogleドライブにアップしておくと便利です。写真やPDFど種類別など、挿入時に探し易くするためにフォルダー分けし、アップロードしておくと便利です。
ここまでの準備が整えば、
移行したいページ（元）とGoogleサイトのページを両方表示（画面分割）する。元のページで必要箇所を選択（ドラッグ）しコピー（ctrl+ｃか右クリックのコピーを選択）し、元ページに切り替え、必要箇所にペースト（貼り付、ctrl+ｖか右クリックの張り付けを選択）する。
1ページ全体（文字と画像も一緒に）でも選択し、貼り付けも可能です。しかし、レイアウトの点からは、テキストと写真や図形は分けてコピペすることが、後レイアウト作業からもベターと思います。
テキストをそのまま貼り付けると行間設定が一律にならない事が多くあります。その場合は、テキスト編集メニューの右端「･･･」その他から行間設定の「カスタムの間隔」で行間隔と段落の間隔を指定し、適用ボタンを押し設定します。「カスタムの間隔」の表示数値と同じ値としても、指定（数値入力）することで適用されます。（下図）
また、テキストをそのまま貼り付けるとフォント情報が上手く反映できないことも多くあります。Windowsアクセサリーのメモ帳を開いて（別ウィンド）、一端ここでペーストし、メモ帳内をコピー（ctrl+Aでメモ帳内全体を選択し、ctrl+ｃでコピー）して、Googleサイト側に貼り付けする方法があります。
Googleサイトは複雑なレイアウトができない（重ね合わせや文字・画像の位置調整）ので、シンプルなレイアウト（文字も画像行単位）にしておくことが、編集も簡単です。また、こうしておくことでスマホなどでも見やすくなります。
留意点
留意点
行内に写真を複数枚貼り付け場合、
写真のサイズを同じ大きさ（縦・横）にしておくと整った表示ができます。縦型写真は３～4枚、横型写真は２～3枚が見栄えがよい配置です。
挿入メニューのプレースホルダーを使うとサイズ調整が簡単です。
表形式の移行
表形式の移行
HTMLでは「table」タグを使って作成する表形式での表示をGoogleサイトで扱う方法です。
Googleサイトでは、「table」タグで表作成が出来ません。メニューにも表作成機能がありません。
左図の表イメージを「table」タグで行列を作成した場合が右図です。
Googleサイトでは表形式を扱う場合は、挿入メニューからGoogleスプレッドを張り付ける方法が基本のようです。予めGoogleドライブにスプレッドシートを準備する必要があります。下図が例です。シート内のセル範囲によっては思うように貼り付け表示させることが難しいようです。サイズを縮小するとセルも縮小される。（セル幅に縮小すると下右図）
そこで、挿入メニューの「埋め込む」方法を使います。図Ａが埋め込み、サイズを調整した状態です。上図よりサイズ調整の課題は少し解決しました。ファイル名とシート名など不要なものがあり、サイズ調整にも影響します。そこで、埋め込み＝「iframe」の設定情報（表示サイズ、表示セル範囲など、下記参照してください。）を加筆修正します。修正し表示枠を拡大縮小調整したものが図Ｂです。かなり見やすくなりました。
最後の図Ｃは、パソコン内のエクセルデータを画像として貼り付けたものです。
見栄えとしては図Ｃの画像がベストのようです。
データのメンテナンス性を考えるとある程度更新変更がある場合は、スプレッドシートの埋め込みをつかいます。あまり変更が無い場合は、画像貼り付けが簡単です。移行前のページからスクリーンショットで画像を貼り付けが簡単です。
図A スプレッドの埋め込み
図Ｂ 図Ａを埋め込み後表示調整
図Ｃ エクセルデータを画像として貼り付け
「iframe」の設定
埋め込むスプレッドシートのサイズを調整する場合は、iframeとsrcの間に、幅(width)と高さ(height)を入力します。
例 <iframe width=400 height=300 src=”https://docs.google.com/spreadsheets/・・・></iframe>
style=”width:[ピクセル数]; height:[ピクセル数]”とする方法もあります。
例 style=”width:640px; height:300px”
その他の調整
gid=: シート ID
range=: ウェブに公開される行と列。A1:B3 などです。
widget=: true または false。true の場合、シートタブが下部に表示されます。
headers=: true または false。true の場合、行番号と列文字が表示されます。
chrome=: true または false。true の場合、タイトルとフッターが表示されます。
図Ｂの例文です。
<iframe width="250px" height="166px" src="https://docs.google.com/spreadsheets/･･･/pubhtml?gid=0&single=true&widget=false&range=A1:B3&chrome=false&headers=false"></iframe>
赤字は値変更。赤太字部分が加筆です。
メリット４について、
メリット４について、
CMSでは編集画面にログインし編集を始めるのが一般的です。Googleサイトでは、GoogleクロームでGoogleアカウントにログインしている状態で、公開しているサイトを表示すると、右図の右下部分（赤丸）のように、ペンマークが表示されます。ここをクリックすると編集モードになります。
Googleサイト用とは別にGoogleアカウントを使っておられる場合は、アカウント切り替えやプロファイルの設定をしておくと便利です。私のパソコン関連ホームページでも紹介していますので、必要があれば参照してください。
Page updated
Google Sites
Report abuse