中島健太郎／Studio Ambassador／LEARNED Inc.

【STUDIOのトグル機能を応用して「さらに表示する」で下に伸びるボックスを実装する方法】 長めのテキストが途中からフェードアウトしていって、ボタンをタップしたら続きが下に現れるというものです📃 やや複雑ですが、デザインエディタの設定の動画も載せていますので、参考にしてみてください💡 １．トグルボタンをクリックし、右サイドパネルにて「デフォルトで開く：OFF」「開く操作：Click」「要素外クリックで閉じる：ON」にします。 ２．トグルボックスをダブルクリックし、編集モードに入ります。 ３．ボタンボックスの中に「さらに表示するボタン」を入れます。このボタンは通常の制作時と同じように、ボックスにテキストを入れるやり方でOKです。デフォルトで入っているタイトルとアイコンは削除します。 ４．ボタンボックスの縦幅を0pxにします。 ５．コンテンツボックスの中に新たにグラデーションボックスを追加します。グラデーションボックスはコンテンツボックスと同じ背景色にし、下から上に向かって徐々に透明になるように設定します。このボックスの縦幅は好きな数値でOKです。どのくらいの感じでフェードアウトをかけたいかによって調整してください。サンプルでは120pxとしています。 ６．条件付きスタイルを「クローズ」にして、コンテンツボックスの縦幅を指定します。閉じているときに、本文をどれくらい見せておきたいかによって、好きな数値を設定します。サンプルでは260pxにしています。 ７．一旦、条件付きスタイルの「クローズ」を解除して、通常のトグル編集モードに戻ります。「さらに表示するボタン」の下側にマイナスマージンを付与して、先ほど設定したコンテンツボックスの下のほうに来るように調整します。サンプルでは-420pxに設定しています。さらに透明度を「０」にします（これで展開したときにボタンが透明になります）。 ８．グラデーションボックスを絶対配置にし、上からのマージン＋縦幅＝コンテンツボックスが閉じているときの縦幅になるようにします。サンプルでは、マージン140px＋縦幅120（手順4で設定した数値）=260（手順5で設定した数値）となっています。さらに、透明度を0にします。 ９．再び条件付きスタイルを「クローズ」にします。「さらに表示する」ボタンとグラデーションボックスの透明度を1にします。 これで完成です👏 展開時、ボタンは透明にしているだけなので、元の場所に判定が残っています。 そのため、そこをクリック／タップするとボックスが閉じられることになるので、その点だけはやや注意が必要になります🙏

19,393 Aufrufe