タグ

Wixエディターを使ってアコーディオンを追加する方法

更新日：2 日前

Wix は2025年、CMSのSEOを評価するGoogle Lighthouse（SEO）のスコアで100点を達成し、世界で1番SEOに優れたCMSだと評価されました。

このようにSEOの基盤が優れた高品質なノーコードツールであるWixでは、見えるデザイン部分でも非常に優れており、ユーザーが見やすい情報整理を行う事ができます。

本記事ではその中でも「アコーディオン機能」に焦点を当て、Wixdtudioエディター上でアコーディオンを追加・活用する方法を、初級者にも分かる形で解説します。

アコーディオン機能とは？

アコーディオンは、クリックすると内容が開閉するUIコンポーネントで、限られた表示領域の中で情報量を整理するための機能として位置づけられています。

特に、

・情報が縦に長くなりやすいページ

・Q&A

・補足説明が多いコンテンツ

こうした場面で、ページ構造を崩さずに情報を提供できる点が重要です。

今回はテンプレートのもののサイズなどを変更して、どのようにカスタマイズができるか確認していきます。

アコーディオンにどのような装飾が施せるかを見ていきましょう。

追加したアコーディオンをクリックすると、上部にツールバーが表示されますので、その中のレイアウトを選択
デザイン設定のパネルが表示されます。この中から該当の項目を選択してレイアウトを変更していきます
・アイコンを選択 アイコンの種類を変更できます。 ・アイコンの位置 アイコンが文字の右端か左端かを選べます。・Space between items アイテムの上下の間隔を調整できます。アイテム同士に余白感が必要な場合に設定します。 ・タイトルの余白（横方向の余白） タイトルとアイコンの端の余白を設定できます。ここはタイトルとアイコン別々には設定ができず、設定した値が左右の余白に反映されます。見え方としては、アイコンとタイトルが中央に寄っていきます。 ・タイトルの余白（縦方向の余白） タイトルが入っているエクセルのセルのような部分が縦に延びます。 ・書式設定（方向） 言語を左から右へ表示させるか、右から左へと表示を切り替えます。基本的には左から右へのデフォルトです。ヘブライ語などは右から左へ文字を読むので変更します。 ・書式設定（配置） 文字を中央揃えにしたり左揃えにしたりできます。

アコーディオンの色や、格納する部分の装飾方法を大まかにお伝えいたします。ここの設定はかなり細かいので、大きくデザインの変更が感じられる一部をお伝えいたします。

アコーディオンを選択している時に右に表示されるサイドパネルでデザインを細かく調整できます。
デザインを変更する箇所を選択する
今回はタイトルを変えてみました 変更箇所は以下の通り。・タイトルのテキスト→Noto sans JP Bold ・背景を青色に変更・枠線を下線だけ設定。下線は太さ1px、色を#FFFFFF（白）・アイコンの色を白に設定、大きさを16px ・角の丸みを四隅とも5px ・ドロップシャドウを#000000（黒）の25%、左上から光が当たっているように影を320°、ぼかしを20px