Googleサイト関連メモ
はじめに
Googleサイトの新版がリリースされてもう暫く経つが、これまで何度か触ってみては、断念していた。どうもしっくりこない。何がスマートになって、どこまで簡単に弄れるのかのイメージがつかめなかった。
それが、2020年1月2日に、突如として吹っ切れた感じを得ることができた。一気に2、3のサイトのプロトタイプを作ってしまった。(これもそのひとつ)
せっかくなので、サイトを作りながら、(自分自身のためにも)ポイントをメモしておこう。
サイトとページ構成の概念(基本的イメージ)
自分の感覚の話だが、以下のことがイメージできるようになって、やっとGoogleサイトの新版の考え方が理解できた気になった。
サイトは「ページ」から構成される。
ページは、「ヘッダー」「フッター」、そして実際のコンテンツに相当する「セクション」から構成される。
「セクション」は、各要素から構成される。(「要素」は私が勝手に名付けたもの)
セクションは、ページの上から下へ追加される。(横には並べることができないようだ。CSSでよくやる、3ペイン構成のページもつくれないようだ。スマートフォンでも閲覧できるように単純な1ペイン構成に限定しているようだ。)
ヘッダーとフッターのエリアはページ幅目一杯(100%)、通常のセクションはページ幅80~90%くらいになっている。
セクションの中にさまざまな要素を「挿入」して作っていく。(右の挿入タブの中に、挿入できる要素が並べられている。)
挿入ペインから要素を挿入すると、その要素を含んだ新しい「セクション」が挿入される。そのセクションの中の、たとえばテキストボックス要素をドラッグして、別のセクションの中に移動(移動先のセクションにとっては、自分のセクションの中にテキストボックスが挿入される形になる)
便利だと思ったこと
デスクトップ、モバイル向けサイトが同時に作れる。というかレイアウトのことは気にしなくて良い。(基本的にレイアウトのカスタマイズは考えず、システムにすべてお任せ、と割り切ることが肝心)
公開ボタンをクリックしないと公開されない。編集中のサイトが知らないうちに公開されることはないので安心していろいろと試せる。公開自体を一時的に停止することもできる。
あまり深い階層までつくれない。これは逆に、サイトの構造が複雑化しないというメリットにもなるか…。
「ページ」タブで、ページの追加、階層の編集などができる。(旧版はこれが分かりづらかった)
ページ内に見出しを設け、目次要素を入れておくと、見出しの変更が動的に目次に反映される。(このページがその例)
過剰な期待は禁物
Googleサイトが、旧版から新しくなったということで、Google様のやることだから、どんなにスマートに進化したか、と期待したが、期待した方向が違っていたようだ。こんなことは当然できるはずたという先入観でいろいろと調べたり悩んだりするとその分時間の無駄になってしまう。
何ができないかということは、いろいろなサイトでも紹介されているが、とりあえず自分的なメモとして書き留めておこう→「できなさそうなこと」
HTMLコードを書きたい場合
「挿入」タブのなかの「埋め込む」を選択。
「埋め込みコード」を選択
コードを入力
[次へ]をクリックして表示を確認、鉛筆マークでhtmlの編集に戻る。
最後に[挿入]で ↓こんな感じに挿入される。
スタイルをいじりたいとき
基本はHTMLコードを埋め込む方法と同じ
<html>
<style>
body {
background-color: yellow;
}
</style>
この黄色のエリアは「埋め込む」を使って作ったエリアです。
</html>
上記コードを埋め込んでみたら、以下の要素が挿入された。bodyタグを指定したのに全体ではなく、コートを埋め込んだ要素にだけ適用されるのか…。
ということはサイト全体のスタイルを一気に指定するのはどうするのか?
ちなみに、コードを再編集するときは、対象となる要素をダブルクリックで編集画面がポップアップする。ファイルの添付
(2020/01/12)
添付(挿入)するファイルは、あらかじめGoogleドライブに保存しておく必要があります。
Wordファイルなどはサムネイル表示されます。(右または下のサムネイル表示部分)
ダウンロードする場合は
サムネイルエリア右上の、「ポップアウト」を選択
ポップアウトした画面右上のダウンロードアイコンを選択
という2段階の作業となります。
※Googleドライブのファイルをサイトに挿入すると、常にサイトのファイルとドライブのファイルがリンクしているようにも思いますが、ドライブのファイルを削除しても、サイトに挿入したファイルは削除されませんでした。(Wordファイルの場合)
Googleのフォームについては確認していません。
↑共有設定していないファイル
予めドライブで、共有「オン-ウェブ上で一般公開」を指定したものが下記のもの。<>埋め込むをクリックして共有URLを貼り付けるだけ。
その他のTips
このサイト内の検索を使うと、検索結果のところにそれぞれのコンテンツの更新日が表示されます。
(パソコンの場合)このサイト内の見出しをマウスでポイントすると、脇にチェーンアイコンが出てきます。ここをクリックすると、その項目に直接ジャンプできるURLをコピーすることができます。そのURLを人に教えることで、目的の項目にピンポイントで誘導することができます。たとえば、→こちらへジャンプ
NotionのMarkDown方式で書いたノートの文面をコピーして、このGoogleサイトのテキストボックスに貼り付けると、Notionの書式設定がほぼ反映されるのでとても便利ですね。/h1~/h3は、Googleサイトの題名、見出し、小見出しに対応しているようです。フォントの色は反映されないので、ペースト後にいじることになります。