今回は、JIMDOクリエイターサイトでアコーディオンボックスを作成、使用する方法と初心者が運用するときの注意点などをまとめて紹介します。
本来、JIMDOクリエイターではアコーディオンボックスを追加する標準機能は存在しません。
そのため、HTMLやCSS、Javascriptなどを使用して自分で導入する必要があります。
今回は、HTMLとCSSだけで追加できるアコーディオンボックスの導入方法を紹介します。
アコーディオンボックスって何？
アコーディオンボックスは、ウェブデザインやアプリケーションで使用されるUI（ユーザーインターフェース）コンポーネントの一つです。
ユーザーがクリックやタップ操作をすることで、内容を展開したり、折りたたんだりできる形式のメニューやセクションなどの要素のことを指します。
アコーディオンボックスの主な特徴
名前の通り、アコーディオン楽器のように伸縮する動作が特徴で、ウェブサイトのアニメーションの中でも代表的なものの一つです。
表示や動作以外の特徴も見ていきましょう。
サイト内のコンテンツを整理・収納できる
アコーディオンボックスは、一度に表示する情報量を制限することで、ページ全体の見た目をスッキリさせてくれます。
そのため、ページ上のスクロール量や回数を減らしたい時などにとても役に立ちますね。
特にモバイル端末のような画面サイズが限られている環境では効果的です。
ユーザーの使いやすさUPに繋がる
アコーディオン形式にすると、必要な情報だけをクリックして閲覧できるため、ユーザーが目的の情報にスピーディーにアクセスできます。
そのため、SEO対策としての、直帰率の低下や滞在時間の増加が期待できます。
SEOへの影響
アコーディオンボックス内のテキストはHTMLで記述されるため、検索エンジンが文章の内容を読み取ることが可能です。
ただし、重要なキーワードや情報は、ページ全体で目立つ箇所（折りたたまれていない部分）に配置することが推奨されます。
アコーディオンボックスの用途例
とはいえ、実際どんなものか見てみないとイメージが湧きませんよね。
どんなシチュエーションで使用されることがあるか、代表的なものを紹介します。
FAQ（よくある質問）セクション
各質問をクリックすると回答が表示される形式が典型的ですね。
QA形式のセクションは個数が多ければ多いほど使い勝手が良くなります。
使用例
- Q：JIMDOクリエイターサイトでアコーディオンは設定できる？
- A：はい、可能です。HTMLとCSSを使用して設定することが出来ます。
製品仕様の詳細説明
アコーディオンは商品ページで、製品詳細や特徴を表示するときにもよく使われますね。
使用例
- 製品仕様
- 品番：ABCD-1234
電源方式：充電式
定格電圧：DC 15V
充電時間：約3時間
質量：3.0kg
カラー：ホワイト
製造番号：12345678
製造年：2024年
他にも様々な用途や使い方があります。
今回作成したサンプルがあるので、先に実際の表示や動作について確認してみて下さい。
全体の流れ
アコーディオンをJIMDOクリエイターサイトに追加する前に、全体の流れをまず確認しておきましょう。
- ヘッダー編集を開く
- CSSをコピペして設定する
- 「文章」コンテンツを追加する
- 「</>」マークを開く
- HTMLコードをコピペする
- アコーディオン内のテキストを変更する
大きく分けて6ステップで導入することができます。
それでは早速やっていきましょう。
STEP1：ヘッダー編集を開く
まずは、先にCSSの設定を済ませてしまいましょう。
HTMLの設定を先にやっても問題はないのですが、
CSSの設定からやた方が後々の表示確認がしやすくなります。
STEP2：CSSをコピペして設定する
ヘッダー編集を開いたら、以下のコードをそのままコピペしましょう。
See the Pen
Jimdo Creator accordion box format by Sachi Fukuzawa (@Sachi-Fukuzawa)
on CodePen.
※すでにCSSを使用している場合は、スタイルタグは不要です。
STEP3：「文章」コンテンツを追加する
CSSの設定が完了したら、次は実際にアコーディオンボックスを追加します。
追加したい位置で、「＋コンテンツを追加」→「文章」を選択しましょう。
似たような項目で、その他コンテンツ一覧にある「ウィジェット / HTML」というのがありますが、文章の編集がしにくいので「文章」コンテンツの方が使いやすいです。
STEP3：「</>」マークを開く
今回はHTMLでアコーディオンボックスを追加する必要があるため、「文章」コンテンツを開いたら編集ボタン一覧の一番右にある「</>」マークをクリックします。
このままテキスト入力欄にHTMLコードを入れてもコードが文字列として表示されるだけになってしまうので、気をつけましょう。
マークをクリックすると、ソースコードの記入画面が表示されます。
STEP4：HTMLコードをコピペする
See the Pen
Jimdo Creator accordion box format by Sachi Fukuzawa (@Sachi-Fukuzawa)
on CodePen.
アコーディオンのHTMLコードを記入します。
このコードをコピペして「OK」をクリックしましょう。
アコーディオンを複数追加するときの注意点
アコーディオンを同じページに複数追加する場合は、HTMLのidやラベル名、変数部分をアコーディオンごとに変える必要があります。
「section1」と書かれている部分が3箇所あるので、これを全て違うものに変えましょう。
英字であれば何でも構いませんが、管理しやすくするのであれば、「section2」、「section3」といったIDに書き換えるのが無難です。
アコーディオン内の閉じるボタン
長文コンテンツを入れる場合、読み終わった時にアコーディオンを表示しておくのが邪魔になってしまうことがあります。
今回のアコーディオンにはその対策として、アコーディオンボックス内右下にアコーディオンを閉じるボタンを設置しています。
<button class="close-button" onclick="document.getElementById('section1').checked = false;">✖</button>ボタンが必要ない場合は、このHTMLコード部分を消せばボタンが消えますので、必要に応じてコードを修正して使って下さい。
アコーディオン内のテキストを変更する
HTMLの保存が完了したら、最後は文章の編集をします。
- セクション部分（上）：アコーディオンボックスに入れる文章のタイトルや関連するキーワードを入れましょう。
- アコーディオンボックス（下）：クリックやタップで表示するコンテンツ文章を入れます。
どちらも文章コンテンツのところでテキストを編集できます。
注意点
コピペや「Back Space」、「Deleteキー」を押す際に、HTML部分を消してしまったり上書きしてしまうと表示が崩れてしまいます。
その場合は戻るのショートカットキー「Ctrl+Z」を押すと元の状態に戻るので、一度やり直してから編集して下さい。
まとめ
今回はJIMDOクリエイターサイトにアコーディオンボックスを追加する方法を紹介しました。
よくある質問や、製品詳細など、ページのスクロール数が多くなるようなコンテンツで活用すると、スッキリした見た目のサイトにできるので、必要に応じて活用してみて下さい。