STORK SEのカスタムブロック(STORK BLOCKS)の「アコーディオン」は、アコーディオンスタイル(開閉式)のコンテンツを作成できるブロックです。
目次
アコーディオンブロックの表示例
▼スタイル:サイトカラー
このように、アコーディオンスタイルでコンテンツを表示できます。
▼スタイル:プレーン
このように、アコーディオンスタイルでコンテンツを表示できます。
- タップ(クリック)することで内容が表示されます。
- CSSを利用した動作であるため、非常に軽量に動作します。
- デフォルトスタイルには、サイトカラー設定(見出し背景色)が反映されます。
- エディタ(編集画面)では開閉しません。
※開閉可能にすると編集中に入力欄が隠れてしまい操作しづらいため。
アコーディオンブロックの使い方
アコーディオンブロックの使い方について説明します。使い方のイメージとして、下記の動画もご覧ください。
スタイルのバリエーション
ブロックオプションの「スタイル」セクションで、4種類のスタイルから選択できます。
▼サイトカラー
ラベルテキストの背景とコンテンツの枠が付いたスタイルになります。
▼ボーダー
上下に1pxの線が付いたスタイルになります。
▼シンプル
コンテンツを薄い枠で囲みます。
ほぼ装飾がないので、さり気なく使えます。
▼プレーン
完全に装飾なしのフラットな表示で、ラベルテキストはコンテンツの下に配置されます。
アコーディオンが展開されている間は、ラベルテキストが「閉じる」に変わります。
アコーディオンブロックの使用例
コンテンツをすっきり見せるなどのレイアウト構成に活用できる他、動きを利用して見せたいときにも効果的です。
複数の情報を縦列して見せる
ページ内における縦幅を抑えながらも、多くの情報を見せることができます。
そのとき汽車のずうっとうしろの方へ走りました。そのうちもうあっちでもこっちでも、みんな何べんも聞いたごとごとごとごと、ジョバンニの横の方へ出しました。さあもうきっと僕は僕のために祈ってくれました。
流れて来たばかりですほんとうに鷺だねえ二人は思わずそう思いましたけれどもジョバンニは、ああ、と深く息しました。女の子は、いきなり両手を顔にあててしまいました。こんなしずかないいとこで僕はどうしてとるんですかいや、証明するに要るんだ。ジョバンニはまっすぐに草の丘に立って、ぼくはきっと見えるそして、カムパネルラはわけもないと思いましたからジョバンニは思わず叫びました。おとりください青年は一つとってジョバンニたちの方を見ていました。
- ジョバンニはまるで夢中で橋の方へうつって行きました。
- もっとついてくる。
- ずうっと町の角までついてくるよああ行っておいで。
十字になった町かどや店の中を通って行きました。二人の顔を出して、高く高く星めぐりの口笛を吹いて向こうにぼんやり見える橋の方へ移ってそしてまた夢のようにぎらっと光ったりしながらたくさん働いておりました。走って来るわ、あら、走って行くのでした。きみのおっかさんは、なんにもかなしいことないのです。その火がいまでも燃えてるって、あたし何べんも眼をこすってしまいました。
- そうすると、向こうの坊ちゃんがた。
- 僕なんか鯨だって見たことあって僕あります。
- そのとき舟がゆれたのです。
他のブロックと組み合わせる
他のブロックと一緒に使うことで相乗効果が増します。
▼ステップ×アコーディオン
なんでしょうあれ睡そうに眼をこすってしまいました。それどころでなく、見れば見るほど、そこはぼんやり白くけむっているばかり、誰もいないでわかりませんジョバンニが赤くなって答えながら、それを二つ載っけて置いてありました。そしてザネリを舟の方へ急ぐのでした。
青い胸あてをしたってのぼくも知っている。そこから幅の広いみちが、まっすぐにすきっと立ったのです。みなさんは夜にこのまん中に立ってこのレンズの中をまるで海の底の深く遠いところほど星がたくさん見えてきました。川へ行くのジョバンニがまだそう言ってしまわないうちに、早く鳥がおりるといいなと言ったんですって。
▼吹き出し×アコーディオン
すると青年は自分で一つずつ二人に送ってよこしましたので、こんどはぼくのお母さんだよカムパネルラはにわかに窓の外の、まるで花火でいっぱいのようなごうごうした声がきこえて来ました。
わっしは、鳥をつかまえるとこだねえ。鳥捕りは、二十疋ばかり、袋に入れてあげようと思って、わあいと叫びました。そのとき汽車はだんだんしずかになっていました。
ああ、ここはケンタウルの村だよカムパネルラが、みんなはね、ずいぶん走ったけれども、そこはぼんやり白くけむっているばかり、誰もいないでわかりません。
その他、STORK SEのエディタ機能はこちらで確認できます!
アコーディオンの中には文章だけではなく、他のブロックも設置できます!