【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

以上で解説を終わります。

最後まで読んで頂きありがとうございました。

本記事が読者の疑問を解決する役に立つと幸いです。

また、色々と触ってみることで実装の幅を増やして頂ければと思います。

おわり。

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

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