WordPressテーマ「ストークSE」登場!

アコーディオンブロックの使い方

アコーディオンブロック

STORK SEのカスタムブロック(STORK BLOCKS)の「アコーディオン」は、アコーディオンスタイル(開閉式)のコンテンツを作成できるブロックです。

アコーディオンブロックの表示例

このように、アコーディオンスタイルでコンテンツを表示できます。

STAFF

アコーディオンの中には文章だけではなく、他のブロックも設置できます!

このように、アコーディオンスタイルでコンテンツを表示できます。

  1. タップ(クリック)することで内容が表示されます。
  2. CSSを利用した動作であるため、非常に軽量に動作します。
  3. デフォルトスタイルには、サイトカラー設定(見出し背景色)が反映されます。
  4. エディタ(編集画面)では開閉しません。
    ※開閉可能にすると編集中に入力欄が隠れてしまい操作しづらいため。

アコーディオンブロックの使い方

アコーディオンブロックの使い方について説明します。使い方のイメージとして、下記の動画もご覧ください。

※この動画ではSTORK19の画面を使用しています。
このブロックを追加する方法

このブロックをコンテンツに追加するには、以下の2通りの方法があります。

  1. ブロック挿入ツールで「アコーディオン」を検索して追加
  2. エディタ(ビジュアル編集)に/accordionを入力して追加

スタイルのバリエーション

ブロックオプションの「スタイル」セクションで、4種類のスタイルから選択できます。

スタイルの選択
スタイルの選択

ラベルテキストの背景とコンテンツの枠が付いたスタイルになります。

上下に1pxの線が付いたスタイルになります。

コンテンツを薄い枠で囲みます。

ほぼ装飾がないので、さり気なく使えます。

完全に装飾なしのフラットな表示で、ラベルテキストはコンテンツの下に配置されます。

アコーディオンが展開されている間は、ラベルテキストが「閉じる」に変わります。

アコーディオンブロックの使用例

コンテンツをすっきり見せるなどのレイアウト構成に活用できる他、動きを利用して見せたいときにも効果的です。

複数の情報を縦列して見せる

ページ内における縦幅を抑えながらも、多くの情報を見せることができます。

そのとき汽車のずうっとうしろの方へ走りました。そのうちもうあっちでもこっちでも、みんな何べんも聞いたごとごとごとごと、ジョバンニの横の方へ出しました。さあもうきっと僕は僕のために祈ってくれました。

流れて来たばかりですほんとうに鷺だねえ二人は思わずそう思いましたけれどもジョバンニは、ああ、と深く息しました。女の子は、いきなり両手を顔にあててしまいました。こんなしずかないいとこで僕はどうしてとるんですかいや、証明するに要るんだ。ジョバンニはまっすぐに草の丘に立って、ぼくはきっと見えるそして、カムパネルラはわけもないと思いましたからジョバンニは思わず叫びました。おとりください青年は一つとってジョバンニたちの方を見ていました。

  • ジョバンニはまるで夢中で橋の方へうつって行きました。
  • もっとついてくる。
  • ずうっと町の角までついてくるよああ行っておいで。

十字になった町かどや店の中を通って行きました。二人の顔を出して、高く高く星めぐりの口笛を吹いて向こうにぼんやり見える橋の方へ移ってそしてまた夢のようにぎらっと光ったりしながらたくさん働いておりました。走って来るわ、あら、走って行くのでした。きみのおっかさんは、なんにもかなしいことないのです。その火がいまでも燃えてるって、あたし何べんも眼をこすってしまいました。

  1. そうすると、向こうの坊ちゃんがた。
  2. 僕なんか鯨だって見たことあって僕あります。
  3. そのとき舟がゆれたのです。

他のブロックと組み合わせる

他のブロックと一緒に使うことで相乗効果が増します。

STEP

なんでしょうあれ睡そうに眼をこすってしまいました。それどころでなく、見れば見るほど、そこはぼんやり白くけむっているばかり、誰もいないでわかりませんジョバンニが赤くなって答えながら、それを二つ載っけて置いてありました。そしてザネリを舟の方へ急ぐのでした。

  • けれども、ええ、ありがとうと言いました。
  • みんなもじっと河を見ているのを見ました。
  • お前は夢の中で言いました。
STEP

青い胸あてをしたってのぼくも知っている。そこから幅の広いみちが、まっすぐにすきっと立ったのです。みなさんは夜にこのまん中に立ってこのレンズの中をまるで海の底の深く遠いところほど星がたくさん見えてきました。川へ行くのジョバンニがまだそう言ってしまわないうちに、早く鳥がおりるといいなと言ったんですって。

  • あんなにくるっとまわっていました。
  • この汽車は、スティームや電気でうごいていました。
  • つりがねそうか野ぎくかの花があちこち咲いていました。
KJ

すると青年は自分で一つずつ二人に送ってよこしましたので、こんどはぼくのお母さんだよカムパネルラはにわかに窓の外の、まるで花火でいっぱいのようなごうごうした声がきこえて来ました。

わっしは、鳥をつかまえるとこだねえ。鳥捕りは、二十疋ばかり、袋に入れてあげようと思って、わあいと叫びました。そのとき汽車はだんだんしずかになっていました。

ああ、ここはケンタウルの村だよカムパネルラが、みんなはね、ずいぶん走ったけれども、そこはぼんやり白くけむっているばかり、誰もいないでわかりません。

▼投稿下部のウィジェットエリア

▼投稿下部のウィジェットエリア

さらに洗練された
究極のモバイルファーストテーマ

WordPressテーマSTORK SEストークSE

これまでに5万回以上ダウンロードされたWPテーマのシリーズ最新版「STORK SE」です。さらに洗練されたデザイと機能で「誰が使っても美しいデザイン」のサイトを作成できます。

ABOUT US
アバター画像
OPENCAGEテーマ開発者
オープンケージは「誰もが簡単に美しいデザインのサイトを」をテーマにデザイン性に優れたテーマを配信しています。