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

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

必要条件

アクティブなClickFunnelsアカウント
ワークスペースで作成されたページ

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

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

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

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

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

よくある質問(FAQ)
製品の詳細または仕様
ポリシーと条件
ステップバイステップの指示またはプロセス

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

ページエディタ内で、要素を 配置するセクション を追加します。
そのセクション内に行を追加します。
行内のオレンジ色の + プラスまたは [新しい要素を追加 ] ボタンをクリックして、新しい要素を挿入します。
その他(その他)カテゴリから、アコーディオン要素を選択します。

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

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

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

ヘッダーの編集

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

本文コンテンツの追加

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

新しいアイテムの追加

[+ アイテムを追加] ボタンをクリックして、アコーディオン要素に新しいアイテムを追加します。既定では、ClickFunnels には 3 つの項目が含まれており、それぞれにヘッダーと本文が含まれています。

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

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

アイテムの削除

ゴミ🗑️箱アイコンをクリックして、アコーディオン項目を削除します。

アイテムの配置

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

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

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

上マージン

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

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

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

プレビュー

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

アイテムの境界線、影、およびコーナー

アコーディオンアイテムの視覚的な外観を向上させるには、境界線、影、コーナーの設定を使用します。

罫線: 罫線を有効にして、アコーディオン項目を明確に定義および強調します。プリセットのスタイルから選択するか、スタイル (実線、破線、点線)、位置、色、ストロークサイズなどの個々の境界線属性をカスタマイズして、デザインに完全に合わせます。
影: 影をアクティブにして奥行きと立体感を加え、アコーディオンアイテムを視覚的に際立たせます。利用可能なシャドウプリセットから選択するか、カスタマイズされたシャドウ効果を作成して美的魅力を高めます。
コーナー: コーナーオプションを使用して、アコーディオン項目の全体的な外観を調整します。正方形や丸みを帯びた角などの事前定義されたスタイルを選択したり、視覚的な好みに合わせて角の半径を正確に調整したりできます。このオプションでは、独自の設計ニーズに合わせてグローバルスタイルをオーバーライドすることもできます。

ボディパッド

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

ボディの背景

アコーディオン項目のコンテンツ領域の背景色を選択すると、コンテンツセクションを視覚的に区別できます。

ヘッダーのパディング

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

ヘッダーの色

アコーディオンヘッダーの色をカスタマイズして、さまざまなインタラクション状態を示します。各状態を選択し、好みに応じて色を調整します。

既定値: 標準外観。
ホバー: カーソルがヘッダーの上を移動するとき。
アクティブ: アコーディオン項目が展開されたとき。

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

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

タイポグラフィ

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

アイコン設定

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

アイコンの前: [前のアイコン] 機能を使用すると、ヘッダーテキストの先頭にアイコンを追加して、コンテンツを効果的に表現できます。アイコンを選択した後、[前のサイズ] と [モバイル前のサイズ前] 設定を変更してアイコンのサイズを調整したり、[右余白] プロパティを使用して適切な間隔を微調整して、適切な配置と視覚的なバランスを確保することもできます。
アイコンの後: アイコンの後の設定では、ヘッダーテキストの最後にアイコンが追加され、アコーディオン項目を展開または折りたたむことができることを示します。下向き矢印 (拡張可能なコンテンツを提案するために一般的に使用されます)、インタラクティブ性を強調するプラス記号、ミニマリストスタイルを好む場合はアイコンなしなどのオプションから選択できます。さらに調整することで、デスクトップとモバイルビューのアイコンサイズをカスタマイズできるようになり、一貫した応答性の高いユーザーエクスペリエンスが保証されます。

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

心地

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

パディングオプション:

上: 要素コンテナの上部とそのコンテンツの間にスペースを追加します。
下部: 要素コンテナの下部とそのコンテンツの間にスペースを追加します。
左 + 右: 要素コンテナとそのコンテンツの間の水平方向の間隔を調整します。
ギャップ：アコーディオンなどの特定の要素では、コンテナ内のアイテム間の間隔を設定するために gap プロパティが追加されます。たとえば、上下にパディングを定義せずに、アコーディオン要素内の各アコーディオン項目間のギャップを調整できます。

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

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

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

境

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

スタイルプリセット(1、2、3): スタイルガイドで定義済みの境界線スタイルから選択します。これらのプリセットは、ページ全体で一貫した境界線スタイルを提供し、要素にすばやく適用できます。
スタイルを編集: スタイルガイドでプリセットの罫線スタイルを変更するには(そのスタイルを使用するすべての要素に影響します)、スタイル を編集 を選択して、グローバル設定でデザインを調整します。
オーバーライド： [ オーバーライド ]オプションを使用して、グローバルスタイルガイド設定に影響を与えることなく、この要素専用の境界線設定をカスタマイズします。
国境： 要素のどの辺に境界線を表示するかを選択します。オプションには、上、下、左、右の境界線の任意の組み合わせが含まれます。
ボーダースタイル: デザインの好みに合わせて、実線、破線、点線などの境界線の線のスタイルを選択します。
色：カラーピッカーを使用して、境界線の色を選択します。スタイルガイドから色を選択するか、カスタム色を選択して、境界線の色がデザインスキームに一致するようにすることができます。
ストロークサイズ: 境界線の太さは、[ ストロークサイズ] スライダーを使用するか、特定のピクセル値を入力して調整でき、細い輪郭から太いフレームまであらゆるものを作成できます。

影

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

スタイル: ページのスタイルガイドから定義済みのシャドウスタイルの1つを選択します。番号付きのスタイル(1、2、または3)をクリックして、スタイルガイドで定義されているプリセットシャドウ設定を適用します。
シャドウスタイル: インセット (要素内の影) と アウトセット (要素の外側のシャドウ) のいずれかを選択して、目的のシャドウ効果を実現します。
X方向: 影の水平方向の位置を調整します。正の値は影を右に移動し、負の値を指定すると影は左に移動します。
Y方向: シャドウの垂直方向の配置をコントロールします。正の値は影を下に押し、負の値は影を上に引っ張ります。
ぼかし: シャドウのエッジの柔らかさをコントロールします。値を大きくすると、より拡散した柔らかな影が作成され、値を小さくすると、影が鮮明に保たれます。
スプレッド: 影のサイズを調整します。正の値は影を広げ、負の値は影を狭くします。
色: カラーピッカーを使用して、影の色の設定を選択します。

隅

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

スタイルプリセット(1、2、3): スタイルガイドで設定されている定義済みのコーナースタイルから選択します。これらのプリセット (1、2、または 3) は、ページ全体のデザインに合わせたクイックスタイリングオプションを提供します。
スタイルを編集: スタイルガイドでスタイルを直接変更するには(そのスタイルを使用するすべての要素に影響します)、スタイル を編集 をクリックして、グローバル設定でプリセットを調整します。
オーバーライド： スタイルガイドを変更せずにカスタムコーナー設定を適用するには、[ オーバーライド]をクリックします。これにより、この特定の要素に対してのみコーナー半径を調整できます。
すべてのコーナー: スライダーを調整するか、特定の値をピクセルまたはパーセンテージで入力して、四隅すべてに均一な境界線の半径を設定します。
エッジを分離する: エッジ を分離(Separate Edges )を有効にして、各コーナーを個別に調整します。左上隅、右上隅、左下隅、右下隅に異なる値を設定して、独自の形状を実現できます。

コントロールパネル

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

ALL: コンテナはすべてのデバイス (デスクトップ、タブレット、モバイル) に表示されます。
デスクトップ (🖥️) アイコン: コンテナはデスクトップビューでのみ表示されます。
モバイル(📱)アイコン:コンテナはモバイルビューでのみ表示されます。
目 (👁️) アイコン: これを使用して、ページからコンテナを非表示にします。クリックすると、コンテナはエディターで非表示になりますが、削除されません。上部のナビゲーションバーの [レイアウト] メニューをクリックして、非表示のコンテナーを見つけることができます。[すべて]、[デスクトップ]、または[モバイル]アイコンを選択して、エディターで再表示します。
コード (</>) アイコン: このアイコンはコードエディターを開き、カスタム CSS または JavaScript コードを挿入してコンテナの動作やスタイルを変更できます。
ごみ箱 (🗑️) アイコン: ページエディターからコンテナーを完全に削除します。

詳細設定

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

Advanced Settings - Customize Styles: コンテンツを動的に入力し、コンテナーを配置し、z-index を適用する方法について説明します。
Advanced Settings - Customize Animation: アニメーションの追加方法、出入り効果の制御方法、アニメーション遅延の調整方法を学習します。
詳細設定 - ロジックのカスタマイズ: 条件付きロジックを要素に適用し、カスタム属性を追加する方法を学習します。