折りたたみ可能なグループを追加する
折りたたみグループは表示された矢印をクリックして初めてコンテンツが展開されて表示されるグループです。テキストボックスの他に色々なコンテンツをグループの中に追加しておくことができます。ここでは Google サイトでページに折りたたみ可能なグループを追加する方法について解説します。
(Last modified: )
目次
折りたたみ可能なグループを追加する
ページの本文に折りたたみ可能なグループを追加する方法です。ページの編集画面を表示してください。
画面右側にある「挿入」タブをクリックしてください。
「挿入」タブ画面の中にある「折りたたみ可能なグループ」をクリックしてください。
ページに折りたたみ可能なグループが追加されました。
見出しと内容を入力する
最初に折りたたみグループは最初見出しの部分だけ表示されており、矢印をクリックするとグループが展開されて内容が表示されるようになっています。まず見出しとして表示されるテキストを入力します。上と下にテキストボックスがありますが、上の部分をクリックしてください。
見出しの部分に表示するテキストを入力してください。必要であればフォントの種類やサイズなどを変更することができます。
次にグループが展開されたときに表示される内容を入力します。下のテキストボックスをクリックして選択したあと、内容に表示するテキストを入力してください。見出しと同じく必要であればフォントの種類やサイズなどを変更することができます。
これで準備は完了です。実際にどのように表示されるのかを確認してみます。画面右上の「公開」をクリックし、変更内容を反映させます。そのあとで公開されたサイトをブラウザで表示してみます。
最初は折りたたみ可能なグループのラベルの部分のみ表示されています。それえではグループの右側にある下矢印をクリックしてください。
折りたたみ可能なグループが展開されて隠れていた内容が画面に表示されました。
折りたためないように設定する
折りたたみ可能なグループですが、折りたためないように設定も可能です。ページに編集画面で、折りたたみ可能グループの下矢印をクリックしてください。
次のように表示されたら、「折りたたみ可能」と表示された箇所をクリックしてください。
折りたたみ可能なグループが折りたためなくなりました。
画面右上の「公開」をクリックし変更内容を反映させたあとで、公開されたサイトをブラウザで表示してみると、最初から内容が展開された状態で表示され折りたたむための矢印も表示されません。
なお再び折りたためるように変更する場合は、編集画面で先ほどと同じ個所をクリックしてください。再び折りたためるように変更されます。
折りたたみ可能グループに画像を追加する
折りたたみ可能グループは最初はテキストだけが入力できるようになっていますが、あとからコンテンツをページに追加したあとで、追加したコンテンツを折りたたみ可能グループのセクションへ移動させることで画像も一緒に折りたたむことができます。
ではまず通常の手順で画像をページに追加してください。(画像を追加する方法については「画像を追加する」を参照されてください)。
追加した画像をドラッグして折りたたみ可能グループ内にドロップします。
画像を折りたたみ可能グループの内容が追加されているのと同じセクション内に移動することができました。
画面右上の「公開」をクリックし変更内容を反映させたあとで、公開されたサイトをブラウザで表示してみます。
折りたたみ可能グループの見出しの右に表示されている下矢印をクリックすると、テキストに加えて先ほど追加した画像が展開されて表示されます。
折りたたみ可能グループのサイズを変更する
折りたたみグループは幅を変更することができます。幅を変更するには折りたたみ可能グループを一度クリックしてください。
折りたたみ可能グループの左右に表示された ● をドラッグすると幅を変更することができます。
なお Google サイトはすべてのコンテンツの横幅がグリッド上にぴったりおさまるように調整されます。折りたたみ可能グループについても同様で、追加した折りたたみ可能グループのサイズはグリッド上におさまるサイズに調整されます。(詳しくは「セクション内のコンテンツのサイズ変更と位置の移動」を参照されてください)。
折りたたみ可能なグループを削除する
追加した折りたたみ可能なグループを削除するには、折りたたみ可能なグループを一度クリックしてください。
折りたたみ可能なグループの上のツールバーに表示されているゴミ箱アイコンをクリックしてください。
折りたたみ可能なグループが削除されました。
なお折りたたみ可能なグループが追加されているセクションを削除することでも折りたたみ可能なグループを削除できます。
-- --
Google サイトでページに折りたたみ可能なグループを追加する方法について解説しました。
( Written by Tatsuo Ikura )
著者 / TATSUO IKURA
プログラミングや開発環境構築の解説サイトを運営しています。