JIN:R「アコーディオン」一歩先ゆくアレンジのアイデア

アシスタントさん

読んでくれる方に詳しく丁寧な説明を心がけていると、どんどん文章が長くなってしまって。記事がごちゃごちゃしているように感じてしまうんですよね。

じゅん

アコーディオンブロックを使うと詳細を非表示にできるので、記事をスッキリと見せられますよ。必要な人にはちゃんと詳細を伝えられるので、とても重宝するブロックなんです。

ブログ記事やウェブサイトを訪れた人に、詳しく説明しようとすればするほど文字数が増えてしまい、読み難くなってしまうと感じることはないでしょうか。

アコーディオンブロックを使えば、読者が必要に応じて情報を展開可能になります。必要な情報が詳細説明に埋もれず、記事全体を読みやすく整理できます。

そこでこの記事では、JIN:Rのアコーディオンブロックの使い方と、設定項目のアレンジをサンプルをたくさん使って紹介していきます。この記事を読めば、一部非表示にした情報整理の方法やFAQの作り方がわかります。

ブログ記事の文章をスッキリと整理して、必要な情報を埋もれさせたくないと思う方は、ぜひ最後までご覧ください。

もし、WordPressテーマを「JIN:R」にしようかと迷っているなら、あなたの決断を後押しする情報になっていると思います。

アコーディオンのクイックガイド

アコーディオンブロックは詳細を閉じた状態で表示され、読者がクリックすることで詳細部分が開きます。

詳細部分は、クリックのアクションを起こした人だけが目にする内容です。

• 詳細説明が必要な人だけに向けた情報
• 気になる人がいるかもしれない補足情報
• ページの主題からは少し逸れるけど伝えたい情報

このような全員が必要としていない情報を表示するのに適しています。

知っている人は読み飛ばしたくなる情報を非表示にしたり、専門的に感じて分からない人には事細かく説明するなど、両方のニーズに対応した幅広い読者に寄り添う記事が書けます。

選択できる設定項目

JIN:Rのアコーディオンブロックで、選択できる項目は4つです。

デザイン選択は、アウトラインとベタ塗りの2種類あります。

タイプ選択は、ベーシックとQA形式の2種類です。QA形式では、アコーディオンのタイトルに「Q」と表示されます。ベーシックと動きは同じで、答えはクリックしないと表示されないです。

アコーディオンの色は、アウトラインとベタ塗りの色を選択します。白が多めの淡い系の8色とテーマカラーと文字色から選べます。

アコーディオンのタイトルの色は、初めから表示されているタイトル部分の文字色を選択します。ライト系の８色とテーマカラーと文字色から選びます。

アコーディオンとタイトルの色は、それぞれ自由に選んで設定もできます。

アイテム項目の個数は、親ブロックの中で自由に増やせます。

たくさん設定項目があってややこしいように思いますが、細かく選ばなくても初期設定が実用レベルになっているので安心してください。

デザインパターン一覧

JIN:Rのアコーディオンで、設定項目を変更したデザインパターンをご紹介していきます。

まず、デザイン選択：アウトライン、タイプ選択：ベーシック、色：変更なし です。

最も標準的な設定です。

次は、デザイン選択：アウトライン、タイプ選択：QA形式、色：変更なし です。

次に、デザイン選択：ベタ塗り、タイプ選択：ベーシック、色：変更なし です。

次に、デザイン選択：ベタ塗り、タイプ選択：QA形式、色：変更なし です。

次は、デザイン選択：アウトライン、タイプ選択：ベーシック、色：変更 です。

プリセットで入っている色から選びました。

次は、デザイン選択：ベタ塗り、タイプ選択：QA形式、色：変更 です。

プリセットで入っている色と当サイトのテーマカラーに変更しました。

最後は、デザイン選択：アウトライン、タイプ選択：QA形式、色：変更 です。

プリセットで準備されている色から選択しました。

アイテム項目の数は、クリックだけで追加できます。

多彩なアコーディオンブロックの中から抜粋しましたが、表示イメージを膨らませるサポートになりましたでしょうか。

アコーディオンをアレンジした使い方

私が思う、「アコーディオン」ブロックでおすすめの使い方をご紹介します。

オリジナルブロック単独の設定

アコーディオンでは、基本的にテキスト（段落ブロック）を使って詳細説明します。

パーソナルトレーニングの料金表をイメージしました。料金を知りたい又は確認したいだけの人と、サービスの内容まで知りたい人のニーズに対応しています。

ブロックを組み合わせて使う場合

アコーディオンに、テキストと背景、ボタンのブロックを設置しています。

詳細にあるブロックは、他のページでも使えるPRエリアと一緒の組み合わせです。でも、アコーディオンの中に隠すことで、好奇心を刺激し興味を持ってもらうことを目的にしています。

アコーディオンにテキストとブログカードのブロックを置き、内部リンクを設定しています。

詳細にあるテキストで質問に対して最低限の回答をしてから、さらに知りたい人に別の記事を紹介します。記事をスッキリと読みやすさを保ちながら、簡単に答えだけ知りたい人と詳しい情報を知りたい人の両方に対応できます。

「例」美味しいコーヒーの淹れる2大ポイント

アコーディオンに、タイムラインのブロックを設置しています。

アコーディオンのアイテムを増やすと、グリットデザインの箇条書きのようにも見えることを利用しました。サンプルのようにベタ塗りのデザインを選ぶと、背景ブロックも使っているような雰囲気が出せます。

様々なレベルの読み手に合わせた説明に使えます。基本を知っている人は読み飛ばせるけれど、初めての人は読みたいチェックポイントをタイムラインで表示しています。

PCのみ表示に設定したテキスト（段落ブロック）です。パソコンからサイトを訪れてくれた方に向けた説明を文章にして説明していきます。スマートフォンで見ていただくと、アコーディオンが表示されています。

上記は、PCとスマホで見えるボックスが異なるように設定しています。JIN:Rのブロックは基本的にPCとスマホの全ての端末で表示されます。それをPCのみ表示とスマホのみ表示にも設定可能です。

スマホで見たときは段落テキストを非表示して、その内容をアコーディオンブロックにする方法で、情報量をコントロールしページをスッキリとできます。スクロール量を減らすことになり、スマホユーザーの読みやすさ向上を狙っています。

JIN:RにはWordPressテーマ公式がデザインした、コードをコピーするだけで使えるデザイン見本帳があります。こちらもとても助かる便利メニューなので、ぜひご活用ください。

アコーディオンブロックの基本的な使い方

「アコーディオン」ブロックの使い方を説明していきます。設定項目は、右サイドバーに表示される内容を選択するだけで完了です。

アコーディオンブロックを設置する

「/アコーディオン」と入力します。

ブロックの設定項目を選ぶ

デザイン選択やタイプ選択、アコーディオンの色、アコーディオンのタイトルの色を右サイドバーから選びます。

アコーディオンアイテムを増やす

親ブロックを選択した状態で、「＋」をクリックする。

アコーディオンのタイトルと詳細を入力する

最初から表示されるタイトルを入力し、クリックされて展開する詳細にブロックを設置します。

まとめ：巧みな情報整理で読みやすい記事にしよう

WordPressテーマ JIN:Rのオリジナルブロック「アコーディオン」の使い方とメリットを紹介しました。

アコーディオンの詳細部分は、読者がクリックすることで初めて展開して表示されます。全て人に詳細説明を書き並べずに、スッキリとした印象を保ちながら、必要な人がいれば内容を確認でき、幅広い読者に向けた情報を伝えられる効果があります。

知識がある読者は基本的な情報を読み飛ばし、詳細を求める読者や初心者はより深い情報にアクセスできるからです。

また、「よくある質問」のセクションにも対応したデザインの選択が可能です。

この記事が、JIN:Rを利用してブログを始めようかと検討されている方のお役に立てれば幸いです。

豊富なオリジナルブロックで
サイト運営をサポートします

JIN:R 公式を見る

じゅん

ブロガー

Contact

2020年9月から細々とブログを書き始め、現在2つのブログ運営中です。
主に、JIN:R購入者限定コミュニティ「JIN BLOG CAMP」 で学びを得ています。
元々、ITやWeb、デザインとは縁遠い、普通の会社員だった私でも、JINやJUN:Rに出会ったことでこんなに整ったブログが作れて感動です。