GutenKit アコーディオン ブロックは、長い形式のコンテンツに視聴者が簡単にアクセスできるようにするのに最適なソリューションです。WordPress の Web サイトに折りたたみ可能なセクションを追加するとともに、アクティブと非アクティブの両方の段階でアコーディオン セクションを装飾する機能も提供します。

このドキュメントでは、デフォルトの Gutenberg エディターでアコーディオン セクションを作成する方法を説明します。

Gutenberg ウェブサイトにアコーディオン ブロックを追加する方法 #

プロセスを開始するには、GutenKit プラグインをインストールする必要があります。完了したら、以下の手順に従ってください。

ステップ1: GutenKitアコーディオンブロックを追加する #

WordPress ダッシュボードから、 

• フォローする ページ > 新しいページを追加 または既存のページの編集を開始します。
• 新しいブロックを追加するには、「+ブロックエディター画面の上部にある「 」アイコンをクリックします。
• を検索してください GutenKit アコーディオン.
• 表示されたら、アイコンをクリックするか、ドラッグアンドドロップします。

ステップ2: アコーディオンアイテムを追加する #

ブロック設定を開き、アコーディオンのタイトル、説明、アイコンを追加します。

アコーディオン： #

デフォルトでは、アコーディオンブロックには3つの項目が読み込まれます。いずれかの項目をクリックして編集します。 タイトル そして 説明 テキスト。このスライドを開いたままにする」オプションを有効にすると、このスライダーまたはアイテムが常に訪問者に対して開いたままになります。

さらに、「新しく追加する” ボタンをクリックして新しいアコーディオンアイテムを追加します。また、“ ” をクリックして既にカスタマイズしたアイテムをコピーすることもできます。アイテムの複製”アイコンをクリックします。アイテムを保存したくない場合は、”バツ" ボタン。

スタイルの選択: 5 つの既成スタイルから希望のアコーディオン レイアウトを選択します。

アイコン： #

• アイコンの位置: アイコンの配置を左右で定義します。または、両側にアイコンを表示することもできます。
• ループ回数を表示: このトグル ボタンを有効にすると、アコーディオン項目に数字のカウントが表示されます。前の設定で「両側」オプションを選択すると、この設定は消えることに注意してください。
• 右/左アイコン: 訪問者がアコーディオン スライダーを開くためのインジケーター アイコンを追加します。
• 右/左アイコンがアクティブ: アクティブなアコーディオン スライダーのアイコンを表示します。

*アイコン ライブラリから選択するだけでなく、自分のデバイスから SVG アイコン ファイルをアップロードすることもできます。

ステップ3: アコーディオンテキストコンテンツのスタイル設定 #

タイトル： #

• タイポグラフィ: この設定領域を使用して、フォント ファミリ、サイズ、太さ、スタイル、装飾、行の高さなどのすべてのタイポグラフィのカスタマイズ オプションを適用します。

次に、次のオプションが両方で利用可能です 開ける そして 閉まっている オプション。つまり、アクティブなステージと非アクティブなステージのタイトル テキストを個別にカスタマイズできます。

• 色: タイトルテキストの色を設定します。
• 背景の種類: タイトルの背景に単色とグラデーション背景のいずれかを選択します。

• 国境: タイトルの境界線の幅、色、スタイルを制御します。
• 境界半径: タイトルの境界線の丸みを定義します。
• ボックスシャドウ: これらのコントロールを使用して、タイトルの境界線の周囲にボックスの影を設定します。
• パディング: アコーディオン項目のタイトルの余白を調整します。
• マージンボトム: スライダーを使用するか、カスタム値を追加して、アコーディオン項目間のギャップを設定します。

説明： #

• 色: アコーディオン項目の説明テキストの色を選択します。
• タイポグラフィ: ここでは、説明テキストのフォント ファミリ、サイズ、太さ、スタイル、間隔などを変更するためのオプションがあります。
• 背景の種類: 背景の種類を単色とグラデーションから選択します。
• 境界半径: 説明領域の境界の丸みを定義します。
• パディング: 説明エリアの内部スペースを調整します。

ステップ3: アコーディオンの枠線とアイコンをカスタマイズする #

国境： #

タイトルオプションと同様に、両方の境界線を個別にカスタマイズすることもできます。 開ける そして 閉まっている モード。

• 国境: アコーディオン項目の境界線の幅、色、スタイルを制御します。
• 境界半径: アコーディオン項目の境界の丸みを定義します。
• ボックスシャドウ: これらのコントロールを使用して、アコーディオン項目の境界の周囲に影の効果を適用します。
• 最後の要素の境界線を無効にする: このトグル ボタンを有効にすると、最後のアコーディオン項目の境界線が無効になります。

アイコン： #

以下のアイコンスタイル設定は、両方に適用されます。 閉じたアイコン そして 開くアイコン. 

• アイコンサイズ: アイコンのサイズを定義します。
• 色: カラーピッカーを使用してアイコンに色を追加します。
• 背景の種類: 背景の種類を単色とグラデーションから選択します。

• 国境: この設定領域を使用して、アイコンの周囲の境界線の色、スタイル、幅を適用します。
• 境界半径: この設定はアイコンの境界の丸みを定義します。
• パディング: アイコンのパディングを調整します。
• マージン: アイコンの周囲の余白を調整します。

ステップ4: 詳細設定 #

[詳細設定] タブでは、アコーディオン ブロックのレイアウト、背景、境界線のスタイルを構成し、その表示を制御できます。

レイアウト： #

• マージン: ブロックレイアウトの周囲のスペースを定義します。他のブロック間のギャップを設定するのに役立ちます。
• パディング: レイアウト内のブロックの周囲のスペースを設定する値を入力します。
• 幅: デフォルトのレイアウト幅を維持すること以外は。
  • 全幅: これを選択すると、レイアウトが画面の幅全体に広がります。
  • インライン（自動）: 適用するとブロック要素と同じ幅になります。
  • カスタム: このオプションを選択すると、ブロック レイアウトの水平方向のスペースを定義するスライダーが表示されます。
• Z インデックス: スライダーを使用して、ブロックと他のブロックのスタック順序を指定します。

位置： #

ドロップダウンの下に、3 つのオプションが表示されます。 デフォルト, 絶対、 そして 修理済み. 

• 絶対: このオプションを選択すると、ブロックの絶対位置が指定され、要素がコンテナー内に収まるようになります。
• 修理済み: 固定位置オプションを選択すると、要素がビューポートまたは画面全体に収まります。

絶対オプションと固定オプションの両方に、以下のような同様の設定があります。

• 水平方向: 配置方向を左または右から選択します。
• オフセット: スライダーを使用するか、手動で値を入力して、ブロックの水平位置を調整します。
• 垂直方向: 配置方向を上または下から選択します。
• オフセット: スライダーを使用するか、手動で値を入力して、ブロックの垂直位置を調整します。 

背景： #

• 背景: 背景オプションを単色、グラデーション、または画像から選択します。

ホバーオプションの下:

• 画像： 画像オプションを選択すると、次のオプションが開きます。
  • 画像: メディア ライブラリから画像を選択するか、独自の画像をアップロードします。
  • 画像サイズe: サムネイル、中、大、フルの中から画像サイズを選択します。

• 位置: 10 種類のオプションから位置を選択します。
• アタッチメント: ブラウザ画面の残りの部分と固定またはスクロール背景画像の関係を指定します。
• 繰り返す: 背景画像の繰り返し方法を設定するオプションを選択します。
• ディスプレイサイズ: 4 つの異なるオプションから表示サイズを選択します。

• 移行期間: スライダーを使用して、背景の遷移を通常状態からホバー状態まで調整します。

国境： #

• 国境: この設定オプションでは、幅、スタイル、色などの境界線の設定オプションが表示されます。
• 境界半径: 値を入力して境界線の丸みを設定します。
• ボックスシャドウ: 色、水平/垂直、ぼかし、広がりなどのすべての設定を取得して、境界に影の効果を与えます。 

ホバーオプションの下:

• 移行期間: 手動で値を追加するか、スライダーを使用して、ホバー状態の境界線のデザインを変更する時間を設定できます。

可視性: #

表示モジュールを使用すると、デバイスの種類に応じてブロック デザインの表示を制御できます。トグル ボタン付きの 3 つのデバイス オプション (デスクトップ、タブレット、モバイル) があります。トグル ボタンをオンにすると、そのデバイスのブロック デザインが非表示になります。

ただし、エディター ビューでは引き続き表示されます。

高度な： #

• ブロック名: ブロックにリンクしたり、スクリプトを実行してスタイルを設定するときに、このブロックを一意に識別するための名前を付けます。
• HTML アンカー: ウェブサイトのページにリンクする URL を追加します。

• 追加の CSS クラス: ブロックに追加の CSS クラスを割り当てると、カスタム CSS を使用してブロックを希望どおりにスタイル設定できるようになります。 

注意: スペースを使用して複数のクラスを個別に追加できます。

以上です。このガイドが、WordPress ウェブサイトにアコーディオン デザインを追加する方法を学ぶのに役立つことを願っています。