ドキュメントAEMコアコンポーネントガイド

ボタンコンポーネント

最終更新日: 2025年6月24日
  • トピック:
  • コアコンポーネント

作成対象:

  • 開発者
  • 管理者
  • ユーザー

コアコンポーネントのボタンコンポーネントを使用すると、ページ上にボタンアイテムを設定および表示することができます。

ヒント
AEM 向け Edge Delivery Servicesについて検討したことはありますか?
既存のプロジェクトでは、このドキュメントで説明されている方法を引き続き使用できます。ただし、新規プロジェクトの場合は、Edge Delivery Services を利用することをお勧めします

使用方法

コアコンポーネントのボタンコンポーネントを使用すると、ページにボタンを含めることができます。

  • ボタンのプロパティは、設定ダイアログで選択できます。
  • ボタンコンポーネントのスタイルは、デザインダイアログで定義できます。

バージョンと互換性

このドキュメントでは、ボタンコンポーネントの現在のバージョン(2022年2月にコアコンポーネントのリリース 2.18.0 で導入された v2)について説明します。

コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。

コンポーネントのバージョンAEM 6.4AEM 6.5AEM 6.5 LTSAEM as a Cloud Service
v2-互換性あり互換性あり互換性あり
v1互換性あり互換性あり-互換性あり

コアコンポーネントのバージョンとリリースについて詳しくは、コアコンポーネントのバージョンを参照してください。

コンポーネント出力のサンプル

ボタンコンポーネントを体験し、その設定オプションや HTML および JSON 出力の例を確認するには、コンポーネントライブラリを参照してください。

技術的詳細

ボタンコンポーネントに関する最新の技術ドキュメントについては、GitHub を参照してください。

コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントを参照してください。

設定ダイアログ

設定ダイアログでは、ボタンそのものと、ページの訪問者に対するボタンの動作および表示をコンテンツ作成者が定義できます。

「プロパティ」タブ

ボタンコンポーネントの編集ダイアログの「プロパティ」タブ

  • テキスト - ボタンに表示するテキスト

  • リンク - AEM 内のコンテンツページ、外部リソース、アンカーへのリンク

    • 選択ダイアログ ​を使用して、AEM 内のパスを選択します。
  • リンクを新しいタブで開く - オンにすると、リンクは新しいブラウザータブで開きます。

  • アイコン - ボタンにアイコンを表示するための識別子

  • ID - このオプションを使用すると、HTML 内およびデータレイヤー内のコンポーネントの一意の識別子を制御できます。

    • 空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
    • ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
    • ID を変更すると、CSS、JS、およびデータレイヤーのトラッキングに影響を与える可能性があります。

「アクセシビリティ」タブ

ボタンコンポーネントの編集ダイアログの「アクセシビリティ」タブ

「アクセシビリティ」タブでは、コンポーネントの「ARIA アクセシビリティ」ラベルの値を設定できます。

  • ラベル - コンポーネントの ARIA ラベル属性の値

「スタイル」タブ

ボタンコンポーネントの編集ダイアログの「スタイル」タブ

ボタンコンポーネントでは、AEM スタイルシステムをサポートしています。

ドロップダウンを使用して、コンポーネントに適用するスタイルを選択します。編集ダイアログでの選択項目は、コンポーネントツールバーから選択した項目と同じ効果があります。

ドロップダウンメニューを使用するには、デザインダイアログでこのコンポーネントのスタイルを設定する必要があります。

デザインダイアログ

「スタイル」タブ

ボタンコンポーネントでは、AEM スタイルシステムをサポートしています。

アドビクライアントデータレイヤー

ボタンコンポーネントは、アドビクライアントデータレイヤーをサポートしています。

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c