活用マニュアル
活用マニュアル
応用編です。Googleサイトは比較的新しいツールのため少しづつ進化しているようです。新しい機能の紹介や使い方の工夫でできる機能など応用的な使い方編です。
オリジナルテーマが作れるようようになっています。テーマタブを開くとトップに「カスタム」があります。「+」をクリックし新しいテーマを作成します。
テーマは、ヘッダー部分の画像とロゴ、セクションのカラー設定です。
名前欄にテーマ名を入れバナーとロゴ画像を追加します。追加方法はGoogleドライブかアップロードかの選択です。次がカラーパレットの選択=ヘッダーとセクションのカラー設定です。セクション色で変更可能なスタイル2と3のカラー設定で、色のカスタマイズを選択すると次図の「テーマ色を変更」で左端がヘッダー、中央がスタイル2で右端がスタイル3です。スタイル1は白で固定されているようです。
最後がタイトル(ヘッダー)と本文の規定にするフォントを設定します。
歯車マークの設定を開き「ブランド画像」を選択すると、ロゴ・ファビコンを設定することができます。
ロゴは、タイトル左上のホームぺージ名称の横に表示するマークです。
ファビコンは、ブラウザーでタブ表示やブックマークした時に表示されるURL欄横に出てくる小さなマークです。下図が、このサイトのとひらかた市民活動支援センターのファビコン表示です。ページ表示で読み込み中がグルグル回ります。
16×16ピクセルの画像を使います。それぞれ、アップロード(Googleドライブ)し、選択します。
出来上がったテーマはテーマタブの上位に反映されます。右上の縦3点リーダーをクリックすることで編集が可能です。
編集をクリックすると左図で、赤丸部分のフォントとカラーパレットの編集が可能です。
Googleサイトのテーマは数が少なく設定できる情報も少ないため、オリジナルテーマが出来ると喜び勇んでチェックしました。しかしあまり大した変更できるものがありません。セクションのスタイル2のカラーがいまいち思うようなもので無かったので、使い勝手とするとここぐらいです。もっと機能の進化が望まれます。
テーマ編集機能が強化されたようです。前項であまり機能が弱いと思っていましたが、サイト全体の編集機能強化につながる機能が利用できるような編集機能になっています。
編集メニューの「テーマ」の現在のページが右図です。オリジナルテーマを説明した上記記事の段階のものと比べ、「+」の新規作成の横に「↑」でテーマのインポートができるようにもなっています。インポートは既に作成したテーマの読み込み機能になります。
「カスタム」をクリックし作成してあるテーマを表示します。図右上〇︙縦三点リーダー(テーマオプション)をクリックでのメニューから「編集」をクリックします。すると図のように「色」「テキスト」「画像」「移動」「コンポーネント」「間隔」の6つの編集メニューが表示されるようになっています。色とテキストは図内マークにもありますが、機能が追加されています。
色をクリックして表示されるメニューです。
「デフォルト」は、文字の基本色です。
次に、セクションの色で利用するものが、スタイル1~3です。カラーパレットで決められた色グループしか無かったものが、1~3を個別に設定できます。
スタイル1をクリックし選択状態で下の背景をクリックして色を選択して変更します。同様に2・3を変更設定することができます。
「タイトルと見出し」と「本文」はそれぞれの文字色の設定です。
「その他のオプション」をクリックすると「題名」「見出し」「小見出し」と個別に設定できます。本文も「標準テキスト」「文字サイズ小」とで設定でます。
テキスト
テキストは「フォント」の種類、サイズ=ポイント数、表示形式=太字(B)か斜体(I)、配置=左・中央・右・両端揃え、行間隔=1~2、段落の間隔=前後を任意のポイント数、など変更ができます。これを、標準テキストか題名・見出しなどテキストで指定できる5種類でそれぞれ設定が可能です。
標準テキストは必ず設定しておくとよいでしょう。見出しや小見出しは利用する場合に設定しておけばよいと思います。
画像
ヘッダー(ページトップ)とロゴとファビコン画像の設定です。ロゴとファビコンは、設定メニューのブランド画像設定と同じです。ヘッダーも最初に設定しているので、ここで設定する必要性は余りないと思われます。
移動
移動とは何かわかりづらい表現です。
メニュー=ナビゲーションの設定です。メニューは上部かサイドかの配置設定です。(設定メニューを見ると「移動」の項目で上部かサイドを設定することになっています。)
メニューの背景色の設定と「上部では透明で表示」のチェックを外すと背景色で表示されます。サイド設定は上部に対して「網かけ」と「横に線を付ける」が多く設定できます。
前景色と太字は、選択する色にもよりますが、あまり変化がないと思います。背景色か下線にすると、現在表示されているページがメニュー上どこか分かりやすくなります。
コンポーネント
挿入メニューの「ボタン」・「分割線」・「リンク」・「画像カルーセル」の設定です。
4項目の設定をセクションの色(スタイル1~3)に対して行います。背景毎に見やすいカラー設定ができるようになっています。
ボタンを「塗りつぶし」「アウトライン=抜き文字」「テキスト=文字だけ」の色を設定します。背景色に対して見やすい設定と色を選択します。
分割線は、色と太さ(1~5)が設定がでるようになりました。以前は1の細い線のみでしたが、使い勝手よくなります。
リンクでは、文字にリンク設定した場合の文字色が設定できます。
画像カルーセルのアクティブドットとは、画像カルーセルを挿入した時に画像枚数分の「・」ドットが画像の下部に表示されるものです。配置した画像内、現在どの画像が表示されているかを確認しやすくするためのものです。(設定で非表示もありますが)
間隔
クリックすると表示密度の設定になります。
表示密度とは、ページ全体の行間調整機能です。文字枠の場合は、行間で調整できますが、画像枠やセクションとセクションの間=余白の調整もまとめての調整してくれます。
詰めて表示したい場合は、「小」「最小」などに変更します。
間隔の追加情報(2023年6月6日)
間隔設定は、上記表示密度に追加されて、①サイトの幅=ページ左右の大きさの変更と②フレームを表示=ページ左右に枠を表示の機能が追加されました。このサイトもフレームを水色で表示するように変更しています。
①の幅は、デフォルト以外は幅広とフルなので、あまり利用価値があるか?です。②のフレーム枠はページ全体が締まった印象になっていいのではと思っています。
HTMLの<iframe>インラインフレーム要素を使った埋め込み処理が簡単にできます。Googleスプレッドシートやドキュメントなど同じGoogleサービスからの埋め込みは挿入メニューにも用意されています。こちらを使えばファイルを選択しドラッグするだけで埋め込むことができます。ここでは、スプレッドシートのセル範囲を指定して必要な情報だけを埋め込む方法を説明します。
埋め込み用のGoogleスプレッドシートを開き、ファイルメニュー→共有→ウェブに公開を選択します。(右図)
「埋め込む」をクリックし、続けて、「ドキュメント全体」をクリックして公開するシートを選択します。(下図)
シートとを選択すると右下図の埋め込み用のコードが表示されます。コード内でクリックすると文字列が青色反転し、「コピーするには、ctrl+cを押します」と表示がでるとおり、コピーします。
Googleサイト側で、挿入メニューの埋め込みをクリックし(右図)、「ウェブからの埋め込み」が表示され、「埋め込みコード」を選択クリックします。(右奥図)
「iframeコードをここに入力」欄で、ペースト(ctrl+v)するとスプレッドシート側でコピ―したコードが入力されます。入力により右下の「次」がクリックできます。次をクリックの後は「挿入」をクリックすることで埋め込みができます。
この状態では、シート全体でかつ表示範囲も狭くなっています。(左下図)
埋め込んだ所クリックすると現れる鉛筆マーク(右上図)をクリックすることで埋め込み情報を編集していきます。
埋め込んだ状態のコード
<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vStP6nxTdYCZxLwEAjuo1l73n1EumnRyI2-KEqaOO7pjA98NC74eHHSi2h4nLeSgA/pubhtml?widget=true&headers=false"></iframe>
表示サイズの設定と表示させる表の範囲指定(セル)
<iframe widh="480px" height="980px src="https://docs.google.com/spreadsheets/d/e/2PACX-1vStP6nxTdYCZxLwEAjuo1l73n1EumnRyI2-KEqaOO7pjA98NC74eHHSi2h4nLeSgA/pubhtml?widget=true&headers=false&range=a1:e31"></iframe>
widthは横幅、heightは縦の長さです。
rangeで、セルの範囲をしてします。
コードの簡単な説明は、
gid=: シート ID。
widget=: true または false。true の場合、シートタブが下部に表示されます。
headers=: true または false。true の場合、行番号と列文字が表示されます。
chrome=: true または false。true の場合、タイトルとフッターが表示されます。
これ以外にも
frameborder="0"」はスプレッドシートの一番外側の枠線を非表示
Htmlのスタイル表現も追加可能です。
Googleサイトが最も便利だと感じているのが、先に記載した画像のコピペ挿入です。今回この記事を書こうとしたのは、画像挿入に新たな方法を見つけたからです。
画像を挿入する場合、レイアウトを考慮して小さい画像を入れ、クリック時に大きく表示するような方法をとる場合があります。この場合、Googleサイトでは、大きな画像をGoogleドライブに準備し、ページ内の画像にリンクを貼ることになります。
今回偶然ですが、右図のような貼り付けができることが分かりました。画像のポップアップ(リンク貼り付け)と拡大表示ができる貼り方です。
画像右上と下に下記のマークが出ています。右上の「↗」マークをクリックするとGoogleドライブ内の画像がポップアップ表示されます。下の「ー+」を押すとその状態で画像の部分拡大表示ができます。
この拡大表示機能は便利です。また、ポップアップはリンク貼り付け機能は同じですが、貼り付け方が異なります。
その方法は、
画像をGoogleドライブに準備することは同じです。ドライブ内で挿入する画像を右クリックでメニューをし、「リンクを取得」を選択します。リンク取得画面で「リンクをコピー」をクリックして完了ボタンを押し閉じます。
この状態でGoogleサイトの挿入したい位置で、Ctrl+Vで貼り付けすると、ウェッブからの埋め込みの表示画面(URL)となり、そのまま挿入ボタンをクリックすることでこのような埋め込みができます。
画像が小さい場合は、通常の同じリンクボタンのみなるようです。
この方法であれば、画像のアップロードは必要ですが、小さい画像と大きな画像2種類を用意いたり、画像貼ってからのリンクの手間は省けます。
レシポンシブル対応のために確認が必要!
この画像挿入方法は、PCとタブレットでは問題ないのですが、スマホの場合、機種(画面サイズ)や画像サイズにより、拡大表示が動作しない場合があります。挿入後にプレビューでのチェックをしておく必要があります。