折りたたみ可能なグループを追加する

折りたたみグループは表示された矢印をクリックして初めてコンテンツが展開されて表示されるグループです。テキストボックスの他に色々なコンテンツをグループの中に追加しておくことができます。ここでは Google サイトでページに折りたたみ可能なグループを追加する方法について解説します。

(2022 年 04 月 30 日公開 / 2022 年 04 月 30 日更新)

折りたたみ可能なグループを追加する

ページの本文に折りたたみ可能なグループを追加する方法です。ページの編集画面を表示してください。

折りたたみ可能なグループを追加する(1)

画面右側にある「挿入」タブをクリックしてください。

折りたたみ可能なグループを追加する(2)

「挿入」タブ画面の中にある「折りたたみ可能なグループ」をクリックしてください。

折りたたみ可能なグループを追加する(3)

ページに折りたたみ可能なグループが追加されました。

折りたたみ可能なグループを追加する(4)

見出しと内容を入力する

最初に折りたたみグループは最初見出しの部分だけ表示されており、矢印をクリックするとグループが展開されて内容が表示されるようになっています。まず見出しとして表示されるテキストを入力します。上と下にテキストボックスがありますが、上の部分をクリックしてください。

見出しと内容を入力する(1)

見出しの部分に表示するテキストを入力してください。必要であればフォントの種類やサイズなどを変更することができます。

見出しと内容を入力する(2)

次にグループが展開されたときに表示される内容を入力します。下のテキストボックスをクリックして選択したあと、内容に表示するテキストを入力してください。見出しと同じく必要であればフォントの種類やサイズなどを変更することができます。

見出しと内容を入力する(3)

これで準備は完了です。実際にどのように表示されるのかを確認してみます。画面右上の「公開」をクリックし、変更内容を反映させます。そのあとで公開されたサイトをブラウザで表示してみます。

見出しと内容を入力する(4)

最初は折りたたみ可能なグループのラベルの部分のみ表示されています。それえではグループの右側にある下矢印をクリックしてください。

見出しと内容を入力する(5)

折りたたみ可能なグループが展開されて隠れていた内容が画面に表示されました。

見出しと内容を入力する(6)

折りたためないように設定する

折りたたみ可能なグループですが、折りたためないように設定も可能です。ページに編集画面で、折りたたみ可能グループの下矢印をクリックしてください。

折りたためないように設定する(1)

次のように表示されたら、「折りたたみ可能」と表示された箇所をクリックしてください。

折りたためないように設定する(2)

折りたためないように設定する(3)

折りたたみ可能なグループが折りたためなくなりました。

折りたためないように設定する(4)

画面右上の「公開」をクリックし変更内容を反映させたあとで、公開されたサイトをブラウザで表示してみると、最初から内容が展開された状態で表示され折りたたむための矢印も表示されません。

折りたためないように設定する(5)

なお再び折りたためるように変更する場合は、編集画面で先ほどと同じ個所をクリックしてください。再び折りたためるように変更されます。

目次に見出しを表示するかどうかを選択する(3)

目次に見出しを表示するかどうかを選択する(4)

折りたたみ可能グループに画像を追加する

折りたたみ可能グループは最初はテキストだけが入力できるようになっていますが、あとからコンテンツをページに追加したあとで、追加したコンテンツを折りたたみ可能グループのセクションへ移動させることで画像も一緒に折りたたむことができます。

ではまず通常の手順で画像をページに追加してください。(画像を追加する方法については「画像を追加する」を参照されてください)。

折りたたみ可能グループに画像を追加する(1)

折りたたみ可能グループに画像を追加する(2)

追加した画像をドラッグして折りたたみ可能グループ内にドロップします。

折りたたみ可能グループに画像を追加する(3)

折りたたみ可能グループに画像を追加する(4)

画像を折りたたみ可能グループの内容が追加されているのと同じセクション内に移動することができました。

折りたたみ可能グループに画像を追加する(5)

画面右上の「公開」をクリックし変更内容を反映させたあとで、公開されたサイトをブラウザで表示してみます。

折りたたみ可能グループに画像を追加する(2)

折りたたみ可能グループの見出しの右に表示されている下矢印をクリックすると、テキストに加えて先ほど追加した画像が展開されて表示されます。

折りたたみ可能グループに画像を追加する(3)

折りたたみ可能グループに画像を追加する(4)

折りたたみ可能グループのサイズを変更する

折りたたみグループは幅を変更することができます。幅を変更するには折りたたみ可能グループを一度クリックしてください。

折りたたみ可能グループのサイズを変更する(1)

折りたたみ可能グループの左右に表示された ● をドラッグすると幅を変更することができます。

折りたたみ可能グループのサイズを変更する(2)

折りたたみ可能グループのサイズを変更する(3)

なお Google サイトはすべてのコンテンツの横幅がグリッド上にぴったりおさまるように調整されます。折りたたみ可能グループについても同様で、追加した折りたたみ可能グループのサイズはグリッド上におさまるサイズに調整されます。(詳しくは「セクション内のコンテンツのサイズ変更と位置の移動」を参照されてください)。

折りたたみ可能なグループを削除する

追加した折りたたみ可能なグループを削除するには、折りたたみ可能なグループを一度クリックしてください。

折りたたみ可能なグループを削除する(1)

折りたたみ可能なグループの上のツールバーに表示されているゴミ箱アイコンをクリックしてください。

折りたたみ可能なグループを削除する(2)

折りたたみ可能なグループが削除されました。

折りたたみ可能なグループを削除する(3)

なお折りたたみ可能なグループが追加されているセクションを削除することでも折りたたみ可能なグループを削除できます。

-- --

Google サイトでページに折りたたみ可能なグループを追加する方法について解説しました。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。