コンポーネントアイコンのカスタマイズ

コンポーネントアイコンを使用すると、オーサーはアイコンや意味のある略語でコンポーネントをすばやく識別できます。オーサーは、web エクスペリエンスを構築するのに必要なコンポーネントを、以前よりも迅速に見つけることができるようになりました。

コンポーネントブラウザーが一貫したグレーのテーマで表示され、次の項目が表示されるようになりました。

  • コンポーネントグループ
  • コンポーネントのタイトル
  • コンポーネント説明
  • コンポーネントアイコン
    • コンポーネントタイトルの最初の 2 文字​（デフォルト）
    • カスタム PNG 画像​（開発者が設定）
    • カスタム SVG 画像​（開発者が設定）
    • CoralUI アイコン​（開発者が設定）

コンポーネントアイコンの設定オプション

略語

デフォルトでは、コンポーネントタイトルの最初の 2 文字（[cq:Component]@jcr:title）が略語として使用されます。例えば、[cq:Component]@jcr:title=Article List の場合、略語は「Ar」と表示されます。

略語は、[cq:Component]@abbreviation プロパティでカスタマイズできます。この値は 2 文字より長くすることもできますが、視覚的な障害を避けるために、略語は 2 文字に制限することをお勧めします。

/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  - abbreviation = "AL"

CoralUI アイコン

AEM が提供する CoralUI アイコンは、コンポーネントアイコンに使用できます。CoralUI アイコンを設定するには、[cq:Component]@cq:icon プロパティを目的の CoralUI アイコンの HTML アイコン属性値に設定します（CoralUI ドキュメントに列挙されています）。

/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  - cq:icon = "documentFragment"

PNG 画像

PNG 画像は、コンポーネントアイコンに使用できます。PNG 画像をコンポーネントアイコンとして設定するには、目的の画像を cq:icon.png という名前の nt:file として [cq:Component] に追加します。

PNG の背景は透明にするか、背景色を #707070 に設定する必要があります。

PNG 画像は、20ピクセル x 20ピクセル​にサイズが調整されます。ただし、Retina ディスプレイに対応するには、40ピクセル x 40ピクセル​が望ましい場合があります。

/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  + cq:icon.png
     - jcr:primaryType = "nt:file"

SVG 画像

SVG 画像（ベクトルベース）は、コンポーネントアイコンに使用できます。SVG 画像をコンポーネントアイコンとして設定するには、目的の SVG を nt:file という名前の cq:icon.svg として [cq:Component] に追加します。

SVG 画像の背景色は #707070 に設定し、サイズは 20ピクセル x 20ピクセル​にする必要があります。

/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  + cq:icon.svg
     - jcr:primaryType = "nt:file"

その他のリソース

このページ