【募集中】WordPressテーマ『SWELL』で作ったコーポーレートサイトやブログを掲載させて頂ける方

【SWELL】アコーディオンの使い方【読者の使い心地に配慮した設計】

当ページのリンクには広告が含まれています。
悩む人

アコーディオンブロックを使ったことがないので使い方を教えてほしいです。

こういった悩みにお答えします。

本記事で解決できること

  • 用意されているアコーディオンのスタイルの種類
  • 用意されているアイコンセットの種類
  • アコーディオンブロックの使い方
  • 「読者の使い心地に配慮した設計」の意味

是非、最後までご覧ください。

News

以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。

あわせて読みたい
【SWELL】ブロックエディタの使い方【テーマ専用機能まとめ】 SWELLでのブロックエディタの使い方を知りたいですか?本記事では、ブロックツールバーで使えるSWELL専用機能やWordPress標準搭載のブロックをカスタマイズしたブロック、SWELL専用のカスタムブロックの使い方を解説しています。SWELLでのブロックエディタの使い方を知りたい方は是非ご覧ください。
本記事の内容

【SWELL】アコーディオンブロックの使い方【直感的に作成できる設計】

今回は事前に用意した(こちら)のアコーディオンを作りながら使い方を解説していきます。

Accordion Title.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Accordion Title.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

用意されているスタイル

Accordion Title.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Accordion Title.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

メインカラーについて

管理画面メニューから、「外観」>「カスタマイズ」を選択後、「サイト全体設定」>「基本カラー」を開き、その中の「メインカラー」が反映されています。

用意されているアイコンセット

Accordion Title.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

アコーディオンを作りながら使い方を解説

管理画面メニューから、「投稿」>「新規投稿を追加」を選択します。

(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「アコーディオン」を選択します。

(設定)の「ブロック」から以下を選択します。

  • スタイル:「メインカラー」を選択します。
  • アコーディオン:「/」を選択します。

「テキストを入力…」を選択後、(設定)から、「アコーディオン設定」を開きます。

  • デフォルトで開いた状態にする:「有効」にします。

(項目を追加)から、アコーディオンブロックを追加します。

アコーディオンブロックを追加後、「タイトル」と「内容」を入力します。

これで完成ですので、「投稿を表示」または「(プレビュー)>新しいタブでプレビュー」から表示を確認してみましょう。

アコーディオンブロックを目次にする

完成したアコーディオンブロックに以下を行います。

  • 「H2見出し」を追加します。
  • (設定)から、「ブロック」>「アコーディオン設定」を開いた後、タイトルのHTMLタグで「h3」を選択します。

「投稿を表示」または「(プレビュー)>新しいタブでプレビュー」から表示を確認してみましょう。

アコーディオンが目次に表示されています。

【SWELL】アコーディオンブロック【読者の使い心地に配慮した設計】

アコーディオンまでTabで移動してEnterで開閉

キーボード操作でページ内を移動(TabまたはShift+Tab)してEnterで開閉する。

アコーディオン内の内容を「ページ内検索」で探せる

  • ページ内検索:Macは⌘(command)+F、WinはCtrl+F

News

以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。

あわせて読みたい
【SWELL】ブロックエディタの使い方【テーマ専用機能まとめ】 SWELLでのブロックエディタの使い方を知りたいですか?本記事では、ブロックツールバーで使えるSWELL専用機能やWordPress標準搭載のブロックをカスタマイズしたブロック、SWELL専用のカスタムブロックの使い方を解説しています。SWELLでのブロックエディタの使い方を知りたい方は是非ご覧ください。

今回は以上です。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
本記事の内容