サイト上のコンテンツ量をコントロールし、ユーザビリティの向上をサポートする「トグル」機能が登場しました。配置からデザイン、アニメーションの設定まで全ての工程がSTUDIO上で完結します。トグル機能を使用しコンパクトなメニューが作成可能にトグルを使った２つの活用例をご紹介します！ドロップダウンメニュードロップダウンメニュー（プルダウンメニュー）は、ヘッダー内のナビゲーションや、モーダルで頻繁に利用されている形式です。ページ数の多いサイトでも、ドロップダウンメニューを使用することで、サイト閲覧者にとってわかりやすいナビゲーションになります。%3Ciframe%20src%3D%22https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F839943815%3Fautoplay%3D1%26amp%3Bloop%3D1%26amp%3Bbackground%3D1%22%20width%3D%221920%22%20height%3D%221080%22%20frameborder%3D%220%22%20webkitallowfullscreen%3D%22%22%20mozallowfullscreen%3D%22%22%20allowfullscreen%3D%22%22%20allow%3D%22autoplay%22%3E%3C%2Fiframe%3Eアコーディオンアコーディオンは、ページ内のQ&Aコンテンツに頻繁に利用される形式です。ページが縦長になるとスクロールが大変ですが、アコーディオンを使うことでコンテンツを収納することが可能です。%3Ciframe%20src%3D%22https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F839943049%3Fautoplay%3D1%26amp%3Bloop%3D1%26amp%3Bbackground%3D1%22%20width%3D%221920%22%20height%3D%221080%22%20frameborder%3D%220%22%20webkitallowfullscreen%3D%22%22%20mozallowfullscreen%3D%22%22%20allowfullscreen%3D%22%22%20allow%3D%22autoplay%22%3E%3C%2Fiframe%3E開閉時の動作設定もデザイン上で簡単にデザインエディター上でToggleを選択し、任意の箇所に配置します。開閉時のアニメーションは今回新たに登場した条件付きスタイル「クローズ」を使って設定が可能です。%3Ciframe%20src%3D%22https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F839943675%3Fautoplay%3D1%26amp%3Bloop%3D1%26amp%3Bbackground%3D1%22%20width%3D%221920%22%20height%3D%221080%22%20frameborder%3D%220%22%20webkitallowfullscreen%3D%22%22%20mozallowfullscreen%3D%22%22%20allowfullscreen%3D%22%22%20allow%3D%22autoplay%22%3E%3C%2Fiframe%3Eまた、３つの詳細の設定により、こだわりのアニメーションを表現することが可能です。これらの調整は設定パネルで簡単にできます。デフォルトで開く初めから中の要素を表示させ、サイト閲覧者の操作でトグルを要素を閉じることができます。開く操作クリックまたはホバーのどちらの操作で開閉を行うかを設定できます。この設定により、ホバーが機能しないモバイル端末での操作にも対応が可能です。要素外クリックで閉じる要素外をクリックした際にトグルを閉じ、中の要素を収納することができる機能です。詳しい使い方や仕様はヘルプ記事をご覧ください。条件付きスタイルToggleボックスの追加STUDIOでは、公式Twitter のフォローや STUDIO Community Japan にて新機能リリースや使い方を公開しています。是非ご参加ください。
