アコーディオン:コンテンツを展開可能なセクションに整理する

広範なコンテンツを含む長いページは、訪問者を圧倒して混乱させる可能性があり、特定の情報をすばやく見つけることが困難になります。ClickFunnels は、コンテンツを展開可能および折りたたみ可能なセクションにきちんと整理し、明瞭さと読みやすさを向上させる アコーディオン 要素でこの問題を解決します。この記事では、コンテンツを明確かつ効率的に整理するために、アコーディオン要素を追加およびカスタマイズする方法を学びます。

---

必要条件

• アクティブなClickFunnelsアカウント

• ワークスペースで作成されたページ

---

アコーディオン機能の仕組み

「アコーディオン」という用語は、アコーディオンとして知られる楽器に由来し、演奏すると膨張したり崩壊したりして音を出します。同様に、アコーディオンコンポーネントは、コンテンツを表示するために展開し、コンテンツを非表示にするために折りたたまれ、不要なときに情報をきちんと隠すことができます。音楽アコーディオンが伸びると蛇腹が現れるのと同じように、アコーディオンコンポーネントは展開すると内容がはっきりと表示されるため、訪問者はページを圧迫することなく詳細な情報を簡単に表示できます。

ClickFunnelsは、ユーザーフレンドリーなノーコードソリューションとして、ページエディターに組み込みの アコーディオン 要素を提供します。Web ページのコンテンツを展開可能および折りたたみ可能なセクションに整理し、ユーザーがヘッダーをクリックしてインタラクティブに情報を表示または非表示にすることができます。

公開ページでは、すべてのアコーディオンアイテムは閉じた状態で表示されます。訪問者がヘッダーをクリックすると、そのアイテムの本文がスライドして開き、もう一度ヘッダーをクリックすると閉じます。一度に開けるアイテムは 1 つだけです。アイテムを開くと、ほかに開いているアイテムは自動的に閉じます。

アコーディオン要素を使用する場合

アコーディオン要素は、論理的にセクションにグループ化できるコンテンツがある場合はいつでも使用します。一般的な用途は次のとおりです。

• よくある質問(FAQ)

• 製品の詳細または仕様

• ポリシーと条件

• ステップバイステップの指示またはプロセス

---

ページエディタでのアコーディオン要素の追加

1. ページエディタ内で、要素を 配置するセクション を追加します。

2. そのセクション内に 行 を追加します。

3. 行内のオレンジ色の + (プラス) または 新しい要素を追加 ボタンをクリックして、新しい要素を挿入します。

4. その他 カテゴリから、アコーディオン 要素を選択します。
   

アコーディオン 要素を追加すると、ページ デザインに合わせて外観をカスタマイズできます。

---

アコーディオン要素のコンテンツの管理

アコーディオン要素は、個々のアコーディオン項目で構成されています。各項目は、 ヘッダー と 本文の 2 つの主要な部分からなるコンテナーです。ヘッダーはタイトルや見出しを直接入力できるテキスト ブロックであり、本文は段落、ビデオ、ボタンなどの要素を追加できるコンテンツ領域です。アコーディオン要素を挿入すると、ClickFunnels によって 3 つの既定のアコーディオン項目が自動的に追加されます。

ヘッダーの編集

アコーディオンのタイトルを直接クリックして、ヘッダーテキストを編集します。

本文コンテンツの追加

アコーディオン項目にカーソルを合わせると、見出し、段落、ビデオ、ボタンなどのエディター要素を追加できます。要素の追加 ボタンをクリックして、内容を挿入します。

新しいアイテムの追加

アコーディオンアイテムにカーソルを合わせ、ツールバーの + アイテムを追加 をクリックすると、そのアイテムのすぐ下に新しいアイテムが追加されます。新しいアイテムのヘッダーは、編集するまで「アコーディオンタイトル」と表示されます。デフォルトでは、ClickFunnels には 3 つの項目が含まれており、それぞれにヘッダーと本文が含まれています。

既存のアイテムのクローニング

複製 アイコンをクリックして、ヘッダーと本文の内容を含む既存のアコーディオン項目を複製します。この機能は、反復的なタスクの時間を節約するのに役立ちます。

アイテムの削除

ごみ箱 (🗑️) アイコンをクリックして、アコーディオン項目を削除します。アコーディオンには少なくとも 1 つのアイテムが必要なため、アイテムが 1 つだけになるとごみ箱アイコンは無効になります。

アイテムの配置

矢印( ⬆️ ⬇️ )アイコンを使用して、アコーディオン項目を上下に移動し、必要に応じてコンテンツを整理します。

---

アコーディオン要素のカスタマイズ

要素にカーソルを合わせると、その境界線がオレンジ色で強調表示されます。要素の設定にアクセスするには、歯車 (⚙️) アイコン をクリックするか、要素を直接クリックします。

上マージン

上マージン 設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。

デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。

アコーディオンアイテム設定

プレビュー

アコーディオンアイテム設定パネルの上部で、アコーディオンを Open Accordion (開いた状態) または Closed Accordion (閉じた状態) でプレビューできます。「Open Accordion」を選択すると、すべてのアコーディオン項目が展開され、その中のコンテンツが表示され、「Closed Accordion」を選択するとすべての項目が折りたたまれ、アコーディオンがさまざまな状態の訪問者にどのように表示されるかをすぐに視覚的に参照できます。このプレビューはエディター内の表示にのみ影響します。公開ページでは、すべてのアイテムは閉じた状態で表示されます。

アイテムのボーダー、シャドウ、およびコーナー

アコーディオンアイテムの視覚的な外観を向上させるには、ボーダー、シャドウ、コーナーの設定を使用します。

• ボーダー: ボーダーを有効にして、アコーディオン項目を明確に定義および強調します。プリセットのスタイルから選択するか、スタイル (実線、破線、点線)、位置、色、ストローク サイズなどの個々のボーダー属性をカスタマイズして、デザインに完全に合わせます。

• シャドウ: シャドウをアクティブにして奥行きと立体感を加え、アコーディオンアイテムを視覚的に際立たせます。利用可能なシャドウ プリセットから選択するか、カスタマイズされたシャドウ効果を作成して美的魅力を高めます。

• コーナー: コーナーオプションを使用して、アコーディオン項目の全体的な外観を調整します。正方形や丸みを帯びた角などの事前定義されたスタイルを選択したり、視覚的な好みに合わせて角の半径を正確に調整したりできます。このオプションでは、独自の設計ニーズに合わせてグローバル スタイルをオーバーライドすることもできます。ヘッダーの角 または ボディの角 を設定しない限り、ヘッダーとボディはこの設定に従います。

ボディパディング

各アコーディオン本体内の内部間隔を調整して、最適なコンテンツ表示を実現します。上部、下部、側面のパディングを個別に制御して、読みやすさと視覚的な快適さを確保します。デスクトップとモバイルのアイコンをクリックして、デスクトップとモバイルの両方のディスプレイのパディングを変更します。 パディング値は、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルで個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル ( px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ間で一貫した間隔を作成します。

ボディ背景

色 ピッカーを使用してアコーディオン項目のコンテンツ領域の背景を選択すると、コンテンツセクションを視覚的に区別できます。単色またはグラデーションを選択できます。

ボディの角

アコーディオンアイテムのボディ (コンテンツ領域) の角を、アイテムとは別に丸めます。すべての角 で 4 つの角すべてに同じ半径を設定するか、エッジを分ける を 有効 にして 左上、右上、左下、右下 の角を個別に設定します。値はピクセル (px) またはパーセンテージ (%) で入力します。設定しない場合、ボディの下側の角はアイテムの コーナー 設定に従います。

ヘッダーのパディング

ヘッダー テキストの上部、下部、側面のパディングを個別に調整して、間隔を管理し、明確な読みやすさを確保します。デスクトップとモバイルのアイコンをクリックして、デスクトップとモバイルの両方のディスプレイのパディングを変更します。 パディング値は、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルで個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル ( px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ間で一貫した間隔を作成します。

ヘッダーの色

アコーディオンヘッダーの色をカスタマイズして、さまざまなインタラクション状態を示します。各状態を選択し、その 背景 (単色またはグラデーション) と テキスト の色を設定します。

• デフォルト: 標準の外観。

• ホバー: カーソルがヘッダーの上を移動するとき。

• アクティブ: アコーディオン項目が展開されたとき。

ヘッダーの角

アコーディオンアイテムが閉じているときと開いているときで、ヘッダーの角を別々に設定できます。閉じた状態 または 開いた状態 を選択し、すべての角 で 4 つの角すべてに同じ半径を設定するか、エッジを分ける を 有効 にして、その状態の 左上、右上、左下、右下 の角を個別に設定します。閉じた状態 または 開いた状態 を選択すると、エディター内のアコーディオンも閉じたり開いたりするため、調整している角を確認できます。

これらの設定をしない場合、ヘッダーはアイテムの コーナー 設定に従います。また、アイテムが開いている間は、ボディとつながるようにヘッダーの下側の角は四角のままになります。

スタイルガイドオプション

ベーススタイルガイドを選択して、ページ上で選択したスタイルガイドと一致するようにします。タイポグラフィ設定では、基本スタイルの選択に基づいてフォントのプロパティが自動的に調整されます。たとえば、[サブ見出し] を選択すると、ページ スタイル ガイドの [サブ見出し] に関連付けられたプロパティが [タイポグラフィ] 設定に適用されます。タイポグラフィセクションでさらに調整を行うことができます。

タイポグラフィ

アコーディオンヘッダーのフォントファミリー、太さ、サイズ(デスクトップとモバイル)、文字間隔、行の高さ、テキストの大文字と小文字の区別、装飾、不透明度をカスタマイズして、テキストの外観を洗練し、明瞭さと視覚的なインパクトを向上させます。グローバルスタイルガイドを利用するには、定義済みのスタイルを選択するか、「オーバーライド」(Override) をクリックしてデフォルト設定を変更します。

アイコン設定

アコーディオンヘッダーを視覚的な手がかりのためのアイコンで強化します。

• アイコンの前: アイコンの前 機能を使用すると、ヘッダー テキストの先頭にアイコンを追加して、コンテンツを効果的に表現できます。アイコンを選択すると、サイズ前 と 右マージン の設定が表示されます。サイズ前 でアイコンのサイズを調整し、右マージン でアイコンとヘッダーテキストの間隔を微調整して、適切な配置と視覚的なバランスを確保します。

• アイコンの後: アイコンの後の設定では、ヘッダーテキストの最後にアイコンが追加され、アコーディオン項目を展開または折りたたむことができることを示します。Arrow (デフォルト。右向きの矢印で、アイテムが開くと下向きになります)、インタラクティブ性を強調する Plus、ミニマリスト スタイルを好む場合は None から選択できます。サイズ後 を使用してデスクトップとモバイル ビューのアイコン サイズを調整でき、一貫した応答性の高いユーザー エクスペリエンスが保証されます。

デバイス アイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの前後のアイコン サイズを個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。

サイズ & スペーシング

サイズ & スペーシング 設定は、コンテンツとそのコンテナの内側の端 (セクション、行、列、要素など) の間のスペース、およびアコーディオンアイテム間のスペースを制御します。この内部間隔により、コンテンツに呼吸する余地を確保し、視覚的にバランスが取れているように見えます。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。

パディングオプション:

• 上: 要素コンテナの上部とそのコンテンツの間にスペースを追加します。

• 下部: 要素コンテナの下部とそのコンテンツの間にスペースを追加します。

• 左 + 右: 要素コンテナとそのコンテンツの間の水平方向の間隔を調整します 。

• ギャップ: アコーディオンアイテム間のスペースを 0～100 ピクセル (px) で設定します。上下にパディングを定義せずに、アイテム間の間隔を調整できます。

デスクトップとモバイル(🖥️ & 📱)カスタマイズ:

パディング設定を使用すると、 デスクトップ ビューと モバイル ビューに別々の値を定義できます。パディングコントロールの上部にある デバイストグル を使用して、画面モードを切り替え、それに応じて間隔を調整します。 モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。

この機能により、レイアウトがさまざまな画面サイズに合わせて最適化された状態が維持され、モバイルとデスクトップのエクスペリエンスが向上します。

ボーダー

ボーダー 設定を使用すると、要素の周囲にボーダーを追加してスタイルを設定し、ページ上の視覚的な定義と分離を強化できます。

1. スタイルプリセット(1、2、3): スタイルガイドで定義済みのボーダースタイルから選択します。これらのプリセットは、ページ全体で一貫したボーダースタイルを提供し、要素にすばやく適用できます。

2. スタイルを編集: スタイルガイドでプリセットのボーダースタイルを変更するには(そのスタイルを使用するすべての要素に影響します)、スタイルを編集 を選択して、グローバル設定でデザインを調整します。

3. オーバーライド: オーバーライド オプションを使用して、グローバルスタイルガイド設定に影響を与えることなく、この要素専用のボーダー設定をカスタマイズします。

4. ボーダー: 要素のどの辺にボーダーを表示するかを選択します。オプションには、上、下、左、右のボーダーの任意の組み合わせが含まれます。

5. ボーダースタイル: デザインの好みに合わせて、実線、破線、点線などのボーダーの線のスタイルを選択します。

6. 色: カラーピッカーを使用して、ボーダーの色を選択します。スタイル ガイドから色を選択するか、カスタム色を選択して、ボーダーの色がデザイン スキームに一致するようにすることができます。

7. ストロークサイズ: ボーダーの太さは、ストロークサイズ スライダーを使用するか、特定のピクセル値を入力して調整でき、細い輪郭から太いフレームまであらゆるものを作成できます。

シャドウ

シャドウ の設定では、シャドウ効果を適用して要素に奥行きと強調を加え、視覚的な外観を向上させることができます。シャドウのプロパティをカスタマイズする方法は次のとおりです。

1. スタイル: ページのスタイルガイドから定義済みのシャドウスタイルの1つを選択します。番号付きのスタイル(1、2、または3)をクリックして、スタイルガイドで定義されているプリセットシャドウ設定を適用します。

2. シャドウスタイル: インセット (要素内のシャドウ) と アウトセット (要素の外側のシャドウ) のいずれかを選択して、目的のシャドウ効果を実現します。

3. X方向: シャドウの水平方向の位置を調整します。正の値はシャドウを右に移動し、負の値を指定するとシャドウは左に移動します。

4. Y方向: シャドウの垂直方向の配置をコントロールします。正の値はシャドウを下に押し、負の値はシャドウを上に引っ張ります。

5. ブラー: シャドウのエッジの柔らかさをコントロールします。値を大きくすると、より拡散した柔らかなシャドウが作成され、値を小さくすると、シャドウが鮮明に保たれます。

6. スプレッド: シャドウのサイズを調整します。正の値はシャドウを広げ、負の値はシャドウを狭くします。

7. カラー: カラーピッカーを使用して、シャドウの色の設定を選択します。

コーナー

コーナー設定では、要素のコーナーの丸み(境界線半径)を調整でき、丸みを帯びたエッジまたはシャープなエッジを柔軟に作成できます。

1. スタイルプリセット(1、2、3): スタイルガイドで設定されている定義済みのコーナースタイルから選択します。これらのプリセット (1、2、または 3) は、ページ全体のデザインに合わせたクイック スタイリング オプションを提供します。

2. スタイルを編集: スタイルガイドでスタイルを直接変更するには(そのスタイルを使用するすべての要素に影響します)、スタイルを編集 をクリックして、グローバル設定でプリセットを調整します。

3. オーバーライド: スタイルガイドを変更せずにカスタムコーナー設定を適用するには、オーバーライド をクリックします。これにより、この特定の要素に対してのみコーナー半径を調整できます。

4. すべてのコーナー: スライダーを調整するか、特定の値をピクセルまたはパーセンテージで入力して、四隅すべてに均一な境界線の半径を設定します。

5. エッジを分ける: エッジを分ける を有効にして、各コーナーを個別に調整します。左上、右上、左下、右下 の各コーナーに異なる値を設定して、独自の形状を実現できます。

コントロールパネル

コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。

• すべて: コンテナはすべてのデバイス（デスクトップ、タブレット、モバイル）で表示されます。

• デスクトップ (🖥️) アイコン: コンテナはデスクトップ表示（幅771px以上の画面）でのみ表示されます。

• モバイル (📱) アイコン: コンテナはモバイル表示（幅770px以下の画面）でのみ表示されます。

• 目 (👁️) アイコン: すべてのデバイスでコンテナを非表示にします。コンテナは削除されません。再表示するには、このパネルで すべて、デスクトップ、または モバイル を選択するか、上部バーの レイアウト を開いて、そのコンテナのデスクトップまたはモバイルの切り替えをオンに戻します。

• コード (</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。

• ごみ箱 (🗑️) アイコン: ページ エディターからコンテナーを完全に削除します。

詳細設定

コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリング ロジックを制御できる 詳細 設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。

• 詳細設定 - スタイルのカスタマイズ: コンテンツを動的に入力し、コンテナーを配置し、z-index を適用する方法について説明します。

• 詳細設定 - アニメーションのカスタマイズ: アニメーションの追加方法、出入り効果の制御方法、アニメーション遅延の調整方法 を学習 します。

• 詳細設定 - ロジックのカスタマイズ: 条件付きロジックを要素に適用し、カスタム属性を追加する方法を学習します。