当ブログ愛用のWordPressテーマ
広告
＼乗り換え先おすすめテーマ！／
／ブロガーとして本格的に取り組む＼
SWELLの評判レビュー記事
SWELLの評判を徹底レビュー｜Cocoonから乗り換えた理由や使ってみた感想も紹介「SWELLを購入しようか迷っている…」 「SWELLのメリット・エメリットは？」 「SWELLを導入すれば何が変わるのか知りたい」 この記事では、そんな方に向けて、SWELLの評...
SWELLアコーディオンブロックの使い方｜長い文章を折りたたんで記事をスッキリできる！
「長い文章やコンテンツを折りたたんで隠したい」
「アコーディオンとは何？」
「アコーディオンブロックの設定や活用方法は？」
この記事では、そんな方に向けて、SWELLでアコーディオンブロックの使い方を解説します。
かめコンパスこんにちは、かめコンパスです！
本記事の内容
この記事を読めば、あなたも簡単に
- アコーディオンブロックを理解して使いこなせる
ようになります。
私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、長い文章を開閉形式にしてユーザーの利便性を上げることができました。
どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！
＼SWELL購入を検討中の人はこちらもご覧ください！／
あわせて読みたい
SWELLの評判を徹底レビュー｜Cocoonから乗り換えた理由や使ってみた感想も紹介
「SWELLを購入しようか迷っている…」 「SWELLのメリット・エメリットは？」 「SWELLを導入すれば何が変わるのか知りたい」 この記事では、そんな方に向けて、SWELLの評…
目次
SWELLアコーディオンブロックでできること3選
SWELLのアコーディオンブロックでは以下のようなことができます。
- デザインをカスタマイズできる
- アイコーディオンを最初から開いておく
- タイトルを見出し化できる
それぞれ詳しく解説します。
デザインをカスタマイズできる
SWELLのアコーディオンブロックは「スタイル」「開閉アイコン」のデザインを選べ、以下のようにカスタマイズできます。
タイトル
テキスト
タイトル
テキスト
- スタイル…「デフォルト」「シンプル」「囲い枠」「メインカラー」の4種類から選べる
- 開閉アイコン…「▲ / ▼」「∧ / ∨」「－ / ＋」の3種類から選べる
デザインの組み合わせは12通り！（=スタイル4種類×開閉アイコン3種類）
細部までこだわってカスタマイズできるので、気に入ると思いますよ。
アイコーディオンを最初から開いておく
アコーディオンを最初から開いておくか、閉じておくか選べます。
開いた状態
タイトル
テキスト
閉じた状態
タイトル
テキスト
アコーディオン内で説明する情報の重要度によって、開いておくか閉じておくか自由に設定できますよ。
タイトルを見出し化できる
SWELLのアコーディオンブロックでは、タイトルをhタグ(見出し)に設定できます。
見出し化することで、アコーディオンのタイトルを目次に表示させることができますよ。
かめコンパス検索エンジンに見出しの内容も伝えられてSEO効果にも期待！
目次に表示されたタイトルをクリックすれば、アコーディオンのところへすぐ移動できるのでユーザーの利便性も上がりますよ。
SWELLアコーディオンブロックの使い方とカスタマイズ設定4つ
SWELLのアコーディオンブロックの使い方はSWELL公式サイトでもまとめられているが、本記事ではより詳しく紹介します。
公式サイト：アコーディオンブロックの使い方
STEP
記事編集画面の左上にある+を押して、アコーディオンをクリックする
STEP
これでアコーディオンブロックを呼び出せます。
STEP
タイトルに文字を入力したり、アコーディオン内にコンテンツを配置できます。
ちなみに、アコーディオンブロックは以下2つの方法からも呼び出せます。
＼タブの切り替え／
アコーディオンブロックを呼び出したい段落ブロックの最初に/アコーディオン、もしくは/accordionを入力する ※「/」は半角で入力してください。
自分の好きな方法で呼び出しましょう。
かめコンパス個人的に「/accordion」で呼び出すのがおすすめ！マウスを操作せずキーボード入力だけで早くかんたんに呼び出せるよ
アコーディオンブロックで設定可能な項目は4つあります。
カスタマイズ項目
親ブロックでできる設定
子ブロックでできる設定
※上のリンクをクリックすると見たい場所へジャンプします。
それぞれ詳しく解説します。
カスタマイズ項目がある場所【2ヶ所】
4種類からスタイルを選ぶ
まずは親ブロックでカスタマイズできる項目から説明していきます。
SWELLでは、アコーディオンブロックのスタイルを以下の4種類から選べます。
デフォルト
タイトル
テキスト
シンプル
タイトル
テキスト
囲い枠
タイトル
テキスト
メインカラー
タイトル
テキスト
それぞれの特徴は以下のとおり。
| スタイル | 特徴 |
|---|---|
| デフォルト | タイトルが薄いグレーでアコーディオンだと気づきやすい。 アコーディオン内と外の境界線がないため記事に溶け込む。 |
| シンプル | 名前通りシンプルで記事内に溶け込む。 左右の線がない。 |
| 囲い枠 | アコーディオンを囲む枠がありシンプル。 どこまでがアコーディオン内か分かりやすい。 |
| メインカラー | サイトカラーと同色のため統一感が出る。 どこまでがアコーディオン内か分かりやすい。 |
1記事内に使うアコーディオンブロックのスタイルを1つに絞れば、より統一感のある記事に仕上がりますよ。
かめコンパス私は「囲い枠」をよく使ってます
開閉アイコンのデザインを選ぶ
アコーディオンのタイトル右側にある、開閉アイコンのデザインを以下の3種類から選べます。
▲ / ▼
タイトル
テキスト
∧ / ∨
タイトル
テキスト
－ / ＋
タイトル
テキスト
クリックで開閉するとアイコンが交互に変わるのでオシャレですよね。
デザインはお好みで選んでください。
タイトルのHTMLタグを設定する
SWELLのアコーディオンブロックでは、アコーディオンのタイトルをHTMLタグ(見出し)にすることができます。
見出し化すれば、タイトルを目次に反映させることができますよ。
ユーザーと検索エンジンに内容を分かりやすく伝えることができるので、ユーザーの利便性UP、かつSEO効果も期待できるでしょう。
かめコンパス見出し化したくない場合は「span」を選択してください
デフォルトで開いた状態にするか決める
ここからは子ブロックでカスタマイズできる項目を説明していきます。
SWELLのアコーディオンを開いた状態にするか、閉じた状態にするか設定できます。
開いた状態
タイトル
テキスト
閉じた状態
タイトル
テキスト
それぞれのメリット・デメリットは以下のとおりです。
| 設定 | メリット | デメリット |
|---|---|---|
| 開いた状態 | アコーディオン内の読み忘れがない | 文章が縦に長くなる |
| 閉じた状態 | 記事がコンパクトにまとまる | 展開できることに気づいてもらえない |
ユーザーによって必要・不必要な情報が異なるので、個人的には閉じた状態での利用をおすすめです。
かめコンパスユーザビリティを1番に考えて満足してもらえる記事を作ろうね
【実体験】SWELLアコーディオンブロックのおすすめな活用例4つを紹介
当ブログで使用しているSWELLのアコーディオンブロックのおすすめな活用方法を4つ紹介します。
活用方法
- 一部のユーザーにしか興味のない情報で使う
- 商品やサービスの詳細を書くときに使う
- マイクロコピーでクリック開閉を促す
- Q&A(質問と回答)形式にする
それぞれ詳しく解説します。
一部のユーザーにしか興味のない情報で使う
SWELLのアコーディオンブロックを使う目安として、すべてのユーザーにとって知りたい情報かどうかがポイントです。
全ユーザーにとって必要な情報であれば、クリック展開する手間がかかるアコーディオンを使う必要はありません。
反対に、一部のユーザーにしか興味のない情報であればアコーディオンを使いましょう。
例）SWELLでおすすめなプラグインを知りたい…
以下2名のユーザーがいます。
- ユーザーA：SWELLを購入したばかり
- ユーザーB：SWELLを利用して1年以上
2名のユーザーにとって、次の情報はアコーディオンを使う必要があるか？
プラグインの導入方法
WordPress管理画面の左サイドバーにあるプラグイン⇒新規プラグインを追加の順にクリックして…
答え：ユーザーAには不要、ユーザーBには必要。
理由：WordPress管理画面の使い方について、ユーザーAは分からないがユーザーBは分かる。
ポイント：あなたの記事を訪れるユーザーの知識レベルに合わせる。
商品やサービスの詳細を書くときに使う
複数のおすすめ商品やサービスを紹介するとき、名称をアコーディオンのタイトルに入れ、詳細をアコーディオン内に折りたたんで入れます。
商品やサービスの名称
商品やサービスの詳細
ユーザーは確認したい商品のみをクリック展開するので、必要な情報だけを手に入れることができるでしょう。
かめコンパスすでに知っている商品を紹介されても「知ってるよ」ってなるよね
例えば「SWELL専用カスタムブロック」の紹介で、アコーディオンブロックを使うと以下のようにできあがりました。
＼私がおすすめするSWELL専用カスタムブロック5選／
1位：リッチカラムブロック
より詳しく知りたい
SWELLリッチカラムブロックの使い方｜横スクロールや2列表示がスマホでもできちゃう！
「リッチカラムの設定や活用方法は？」 「リッチカラムに背景色を付けられる？」 「スマホ表示で画像を横スクロールさせたい」 この記事では、そんな方に向けて、SWELL…
2位：ブログパーツブロック
より詳しく知りたい
SWELLブログパーツの使い方｜メインビジュアルやウィジェットにも呼び出せる万能型な機能！
「ブログパーツとは何？」 「ブログパーツの作り方を知りたい」 「メインビジュアルやウィジェットでもブログパーツを使える？」 この記事では、そんな方に向けて、SWEL…
3位：ステップブロック
より詳しく知りたい
SWELLステップブロックの使い方｜画像を用いた手順説明に適した便利機能！
「作業の手順や購入の流れを順番通りに説明したい…」 「ステップブロックの設定や活用方法は？」 「ステップを横並びで表示させるには？」 この記事では、そんな方に向…
4位：タブブロック
より詳しく知りたい
SWELLタブブロックの使い方｜タブの切り替えで散らばった情報を整理できる！
「複数のコンテンツをタブで整理したい…」 「タブブロックの設定や活用方法は？」 「タブブロックのIDは設定必要？」 この記事では、そんな方に向けて、SWELLでタブブロ…
5位：フルワイドブロック
より詳しく知りたい
SWELLフルワイドブロックの使い方｜推奨の画像サイズやフルワイドにならないときの対処法まとめ
「コーポレートサイトやトップページをおしゃれにしたい」 「フルワイドブロックの設定や活用方法は？」 「フルワイドにならない、どうして？」 この記事では、そんな方…
このようにアコーディオン化することで既知の情報はクリックされず、未知の情報はクリックされると思いますよ。
マイクロコピーでクリック開閉を促す
アコーディオンブロックの上にマイクロコピーを配置して、クリック開閉を促すことができます。
＼クリックで開く／
タイトル
テキスト
クリックで開閉できることに気づいてもらえない可能性があるので、マイクロコピーを使ってアコーディオンの開閉を促しましょう。
かめコンパス私は必ずマイクロコピーと一緒にアコーディオンブロックを使っているよ
＼クリックで開く／
アコーディオンブロックにマイクロコピーを配置する方法はこちら
STEP
アコーディオンブロックを配置した上の段落ブロックにテキストを入力する
STEP
ツールバーのテキストを配置をクリックし、「テキスト中央寄せ」を選ぶ
STEP
ツールバーのブロック下の余白量をクリックし、「0 em」に✔する
これでアコーディオンブロックにマイクロコピーを配置できます。
Q&A(質問と回答)形式にする
アコーディオンブロックを使えば、以下のようなQ&A(質問と回答)を作成できます。
Q. ブロガーにおすすめなWordPressテーマは？
A. SWELLです。
記事内によくある質問を作成する機会があると思います。
その質問の回答を見たいユーザーだけ、アコーディオンを展開して見れるようにすれば知りたい情報だけを提供できるようになりますよ。
かめコンパス興味のない情報を表示しても邪魔なだけだよね
また、SWELLにはFAQブロックというよくある質問(FAQ)を作成できるSWELL専用カスタムブロックも存在します。
FAQブロックでは回答の部分が開きっぱなしで閉じることができないため、アコーディオンブロックとの使い分けができそうですよ。
SWELLアコーディオンブロックまとめ
今回は、SWELLでアコーディオンブロックの使い方を紹介しました。
本記事のおさらい
＼読み直したい箇所をクリック／
当ブログでは、SWELLに関する記事をいくつか書いてます。
下のカテゴリーページにまとめていますので、のぞいてみてください。
かめコンパスためになったという人は“(Twitter)フォロー”や“ブックマーク”してくれると嬉しいです！
この記事が気に入ったら
フォローしてね！
コメント