基本編の補足

１．Googleサイト編集画面の起動方法

スタート編の起動と終了と基本編の編集概要では、初めてGoogleサイトを作成する場合のログインから編集画面の起動として説明しています。実際に作成し保存したデータはドライブに保存されます。編集直後に見れば、上部候補リスト（←）に特大アイコン形式で表示されます。保存したものを編集する場合はドライブからアイコンをダブルクリックして編集画面となります。

注：ファイルが候補リストに無い場合は、下のファイル一覧から見つけるかファイル形式（〇）をクリックして「サイト」を選択すると上部に表示されます。

Googleクロームで公開サイトを表示して編集

作成したものを公開設定し公開した場合以後は、公開したサイトをGoogleクロームで表示させると画面右下にペンマーク（〇）が表示されます。（Googleアカンウントでログイン状態時）ここをクリックすると編集モード（画面）になり、直に編集が始められます。

Googleクロームのお気に入りに公開サイトとドライブを登録しておけば、Googleクロームの起動で公開画面を見て、必要あれば直ぐ編集と非常に便利です。

２．ページ設定の詳細

「ページ」の「+」をクリックして表示される各メニューは比較的新しく追加された機能です。

①新規メニュー

「新規メニュー」は、ナビゲーションメニューに「メニュー」（名称）のみを追加する場合に利用します。その下にコンテンツページ（サブページ）を追加する形です。メニューに名称だけあれば良い場合です。（下図①）

このサイトでは、「スタート編」・「実技編」・「活用情報」はメニューに名前があるだけです。

メニュー「基本編」はそれ自体がページで、基本編の内容を紹介するページとしています。「スタート編」はわざわざページとしてその内容を紹介する必要もないので、メニュー名としています。この機能が「新規メニュー」で作成します。

以前は、メニューに表示するには必ずページが必要でした。

留意点１URL文字化け現象

ページを作成した場合は、プロパティで名前（＝メニューに表示）とその下「詳細欄」にアルファベット名を半角で入れることができます。詳細に入れた文字列がそのページのURLになります。

詳細欄に入力が無い場合は、名前（日本語名）がURLになります。公開したHPの各ページでURL欄を見て日本語名があれば、詳細欄が未記入と分かります。(下図は一時的に編集した状態）

URLに日本語が入っているとブラウザが英語表記に自動的に変換して通信します。

この変換した文字列は「xn--」で始まるPunycode（ピュニコード）と呼ばれる国際化ドメイン名で使われる文字符号化方式です。

また、上記URL（動画）のように日本語を含んだものをコピーして貼り付けると、日本語部分が次のような％表記になっていまします。

https://sites.google.com/view/gsdehp/Application/%E5%8B%95%E7%94%BB

半角アルファベット名を入れるのは、判読が困難にならないように利用します。（詳細を入れた状態）

https://sites.google.com/view/gsdehp/Application/video

「新規メニュー」では、詳細設定が出来ないため、上記課題のことを考えると名前に英語単語など半角アルファベットにすることも必要かもしれません。今後の改良に期待します。

留意点２ページ内リンクの課題

HP内で各ページへのリンク設定をすることがよくあります。文字列で別ページの紹介するケースが考えらます。この時は、リンク設定でリンクボタンをクリックするとページの一覧が表示され、必要なページを指定します。ところが、新規メニュー部分はページでは無いので、指定できません。

「新規メニュー」を使う・使わない、はこの点も留意しておく必要があります。

なお、ページ内で見出し設定している場合にページの見出し位置にリンクさせる場合は、公開ページでそのページの見出しをクリックします。見出し位置で表示されている状態で、URL欄をコピーし、それを貼り付けます。

ページのURLの後に「#h.d0qtw8h5nqds」など「#h.」とした位置情報を含む情報を得ることができます。

②ページ全体の埋め込み

ページ内の一部に埋め込み機能がありましたが、これはページ全体が埋め込みで作成する機能です。

より柔軟な（意図した見え方・見せ方）レイアウトも可能になるとの事です。

しかし、活用するにはHTMLなどより多くのスキルが必要です。今後の活用例が沢山出てきて、NPO等にとってより簡単で有用なものが見つかればご紹介していきます。

以下が、Googleからの情報です。（このサイトページには日本語が使われており、先の説明の表示になってしまいます。（表示されるURLは、https://workspaceupdates-ja.googleblog.com/2022/06/google_2.html#:~:text=エンドユーザー%3A%20新しい%20Google%20サイト,からコンテンツを埋め込みます。）

https://workspaceupdates-ja.googleblog.com/2022/06/google_2.html#:~:text=%E3%82%A8%E3%83%B3%E3%83%89%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%3A%20%E6%96%B0%E3%81%97%E3%81%84%20Google%20%E3%82%B5%E3%82%A4%E3%83%88,%E3%81%8B%E3%82%89%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF%E3%81%BE%E3%81%99%E3%80%82

③新しいリンク

リンクさせたいページやWEBサイトをメニューに表示させることが出来ます。（上図②）同じサイト内ページのリンクは余り意味がないと思われます。別なWEBサイトに誘導したい場合ぐらいでしょうか？

追加方法は、「新しいリンク」をクリックし、リンク設定と同じ様に、名前＝メニュー表示名とリンク先＝URL入力かページ選択し、完了ボタンを押します。外部WEBサイトの場合は既定値どおり「新しいタブで開く」で、同じサイト内ならチェック外し同じタブ内表示が良いと思います。（新しいタブで開くか同じタブで開くかは一定のルールを決めておくと良いでしょう。）

④ページの調整

ページの構成の例です。▶マークはその下にサブページがある印です。▶をクリックするとサブページが表示されます。ページマークに斜線が入っているものは、「ナビゲーションに表示しない」設定です。ページにカーソルがあたると右側に「︙」縦三点マークが表示されクリックすると設定ができます。ページ複製（コピー）もここにあります。

ページの階層構成をビデで紹介します。（1分56秒、37メガ）