タイトルコンポーネント title-component
コアコンポーネントのタイトルコンポーネントは、インプレース編集機能を備えたセクション見出しコンポーネントです。
使用方法 usage
タイトルコンポーネントは、コンテンツのセクションのタイトルまたは見出しとして使用するためのものです。使用可能な見出しレベルは、デザインダイアログでテンプレート作成者が定義できます。コンテンツ編集者は、編集ダイアログで、使用可能な見出しレベルから選択できます。利便性の向上のため、見出しテキストの簡単なインプレース編集も可能です。
バージョンと互換性 version-and-compatibility
このドキュメントでは、タイトルコンポーネントの現在のバージョン(2022年2月にコアコンポーネントのリリース 2.18.0 で導入された v3)について説明します。
コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。
コアコンポーネントのバージョンとリリースについて詳しくは、コアコンポーネントのバージョンを参照してください。
コンポーネント出力のサンプル sample-component-output
タイトルコンポーネントを体験し、その設定オプションや HTML および JSON 出力の例を確認するには、コンポーネントライブラリを参照してください。
技術的詳細 technical-details
タイトルコンポーネントに関する最新の技術ドキュメントについては、GitHub を参照してください。
コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントを参照してください。
編集ダイアログ edit-dialog
編集ダイアログでは、コンテンツ作成者がタイトルテキストを定義したり、見出しレベルを選択したりできます。
-
タイトル - 空白の場合、ページタイトルが使用されます
-
種類 / サイズ - タイトルの見出しレベルを定義します
-
リンク - タイトルのリンク先のコンテンツを定義します。コンテンツページへのパス、外部 URL、ページアンカーのいずれかを指定できます。
-
リンクを新しいタブで開く - オンにすると、リンクは新しいブラウザータブで開きます。
-
ID - このオプションを使用すると、HTML 内およびデータレイヤー内のコンポーネントの一意の識別子を制御できます。
- 空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
- ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
- ID を変更すると、CSS、JS、およびデータレイヤーのトラッキングに影響を与える可能性があります。
インプレースエディターを使用して、タイトルコンポーネントのテキストを編集することもできます。
「スタイル」タブ styles-tab-edit
タイトルコンポーネントでは、AEM スタイルシステムをサポートしています。
ドロップダウンを使用して、コンポーネントに適用するスタイルを選択します。編集ダイアログでの選択項目は、コンポーネントツールバーから選択した項目と同じ効果があります。
ドロップダウンメニューを使用するには、デザインダイアログでこのコンポーネントのスタイルを設定する必要があります。
デザインダイアログ design-dialog
デザインダイアログでは、コンテンツ作成者が使用する際のタイトルコンポーネントのデフォルト見出しレベルをテンプレート作成者が定義できます。
「サイズ」タブ sizes-tab
- 作成者に許可されたタイプ / サイズ - コンテンツ作成者がタイトルコンポーネントを使用する際に選択できる見出しタイプを有効または無効にします。
- デフォルトのタイプ / サイズ - コンテンツ作成者がタイトルコンポーネントをページに追加したときに自動的に割り当てられる見出しタイプを定義します。
- リンクを無効化 - タイトルコンポーネントでのリンクのサポートを無効にして、コンテンツ作成者がタイトルからリンクできないようにします。
「スタイル」タブ styles-tab
タイトルコンポーネントは、AEM スタイルシステムをサポートしています。
Adobe Client Data Layer data-layer
タイトルコンポーネントは、Adobe Client Data Layer をサポートしています。