- このトピックには12件の返信、4人の参加者があり、最後に
により7ヶ月、 3週前に更新されました。
-
投稿
-
いつもお世話になっております。
長文テキストの途中で「続きを読む」などで隠す、
読んだ後は「閉じる」というような挙動のトグルボタン設置が可能な
テキストボックスを必要としています。下記URLの動作や見た目とまったく同じ形で、
続きの文章も透けて見えているようなイメージのものです。口コミなど、長すぎる文章を一定文字量以降を非表示/表示にする際に使用したいです。
シンプルですが意外と使いどころがありそうなので、すでにSnow Monkey Blocksにあるかなと思ったのですが、探してみても見つかりませんでした。（あったらすみません）
ご検討いただけると嬉しいです。
いいねをした人:なるほど、確かにこれ系はありませんし、あっても良さそうな感じですね。実装するならなるべく汎用的な状態で組み込みたいなと思うので、いくつか参考例があると良いなと思うのですが、こういう UI が使われているページをご存知だったりしますでしょうか？ 特にご存知ないといういことでしたら僕のほうでも調べて見るので大丈夫です！
いいねをした人:キタジマさん
こんにちは。早速意見を取り入れてくださり、ありがとうございます。
実例私もいろいろ探してみたのですが、開閉してまで見せるコンテンツって、なかなかないようで。
1P完結のランディングページで、その商品の利用者から寄せられた体験談みたいな形で、複数名の長文体験が並んでいるというようなページはありました。（URL掲載は控えます）
見た目はスッキリ見せたいけれど、多くの反響があることを表現したい場合とかに活用しやすそうな感じですね。（興味があるかたは開いて読む、ページは遷移させたくない…みたいなときに使えそうです。）
お忙しい中と思いますが、どうぞよろしくお願いいたします。
いいねをした人: 居ません参考例のURLを貼っておきます。
「EXHIVITION HALL 展示場」の「続きを読む」の所が、該当箇所です。
その他、CODEPEN等にもいくつかサンプルがありました。
CODEPENサンプル1
CODEPENサンプル2
CODEPENサンプル3いいねをした人:まーちゅうさんありがとうございます！
ケースバイケースだと思うのですが、トグルを閉じた後、
アコーディオンが閉じるのと同時にスクロール位置も元に戻る挙動の方が、
よさそうだなと思いました。下記サイトの挙動だとトグルを閉じた後でほかの事例も見たいと思った場合、
自分でもとの位置に戻る必要があるので、なんとなくユーザにやさしくないかなと。もちろん、ケースバイケースだと思います。
まーちゅうさんサンプル、ありがとうございました！
いいねをした人:まーちゅうさん、ありがとうございます！ デフォルトはこれくらいシンプルなほうが汎用性ありそうですね。それで設定でコンテンツを表示する高さ、下部を半透明のグラデーションにするか、とか追加していけば良いかなと思いました。
megさん、
下記サイトの挙動だとトグルを閉じた後でほかの事例も見たいと思った場合、
自分でもとの位置に戻る必要があるので、なんとなくユーザにやさしくないかなと。確かにそれはあるかもですね…。CODEPENサンプル3 の場合も特にスクロールの処理は入っていないようだったので、おそらく配置と画面の高さの関係とかでそのような挙動になるのだと思います（試しに縦並びにしてみたら他と同じ動きでした）。閉じたときの位置を良い感じにコントロールするのは結構難しい気がするので、ちょっと試してみてもし良い塩梅にできそうなら対応する、くらいで考えておこうかなと思いました。
いいねをした人:
ちなみにこれ命名になやみますね…w 「続きを読む」だと WordPress のループのところから記事にリンクするやつと名前が被っちゃうし、挙動的にはアコーディオンに似ているけど既にアコーディオンブロックはあるし…。テキストアコーディオンとか、続きを読むボックスとかそんな感じですかね。
いいねをした人: 居ませんキタジマさん
いろいろと思慮いただきありがとうございます！
＞CODEPENサンプル3 の場合も特にスクロールの処理は入っていないようだったので
そうでしたか。いろんな条件が出てくる可能性はあると思うので、汎用性高くなるよう極力シンプルなのがよさそうですね。
＞ちなみにこれ命名になやみますね…w
コード探すときも、表現が定まっていなくて大変でしたｗ
直感的にわかる名前がいいですよね…
わたしは「続きを読むボックス」いいと思います。いいねをした人:便乗になりますが、横から失礼します。
自分も、こんなブロックがあったらいいなぁと思いました。
ブロックのイメージとしては、段落ブロックだけでなく、複数の要素を包括したグループブロックに適用できるのが使い勝手が良い気がします。
↓編集画面イメージ
ブロックとして独立するなら、セクションブロックやコンテナブロックのようにあとから要素を追加しやすいようなブロックだといいかもしれませんね。
名称は単純ですが、「折りたたみブロック」（Foldable Block）なんていうのはどうでしょうか？いいねをした人:ブロックのイメージとしては、段落ブロックだけでなく、複数の要素を包括したグループブロックに適用できるのが使い勝手が良い気がします。
ですね！ 基本的に中にはなんでも入れられるようにしたいと思います。
名称は単純ですが、「折りたたみブロック」（Foldable Block）なんていうのはどうでしょうか？
ご提案ありがとうございます！
ぐぐってみたら「Foldable」はまさに折って畳んで小さくすることができる的な意味合いと書かれていたのですが、UI の挙動的には折りたたむというよりは引き出しを引き出すみたいな、ちょっと見えてたものが全部見えるようになる、みたいな感じなので、ちょっとニュアンスが違うのかなぁと感じました。似た単語として「Collapsible」というのもあるらしくて、こっちはもっと汎用的な意味で小さくすることができることを指すらしいのでこっちのほうが良いのかなと思ったのですが、これも日本語的には「折りたたみ」なのですよね…。
もうちょっと検討してみたいと思います！
いいねをした人:キタジマさん！
アップデート確認いたしました。実装いただきとてもうれしいです。
柔軟かつカスタマイズ性の高い使用にしていただき、ありがとうございました。
こちらクローズさせていただきます。
いいねをした人:
- トピック「Snow Monkey Blocks：長文を「続きを読む」「閉じる」のボタンで開閉できるようなボックス」には新しい返信をつけることはできません。