カスタムプロパティ

HTMLプロパティはHTML要素の属性（動作や外観）を定義します。例えば、 category は、類似の要素を分類する方法を提供する HTML 特性であり、category を共有する要素にスタイルを追加するため CSS で使用されます。 URL リンクのターゲット URL を指定する別の HTML 特性です。

ネイティブのWebflow要素、スタイル、設定（リンク、カテゴリ、IDなど）を使用して、いくつかのHTMLプロパティを作成できます。 カスタムプロパティこれらは、ツールチップの構築、ARIA 特性によるサイトのアクセシビリティの向上、CMS データによるカスタム コードとページ スタイル機能の拡張など、さまざまな目的に役立ちます。

このチュートリアルを通じて、次のことを理解できるようになります。

1. カスタムプロパティを作成する方法
2. カスタムプロパティでCMSデータを活用する方法
3. カスタムプロパティでコンポーネント機能を活用する方法
4. categoryプロパティを使用してコンポーネントとCMSデータを設計する方法
5. カスタムプロパティを制御する方法

覚えて： 一部のカスタムプロパティは、ネイティブのWebflow要素、スタイル、構成を使用して生成できるため、予約されています。たとえば、 URL 既存の要素にカスタム プロパティとして追加してリンクを模倣することもできますが、リンク設定を使用してリンク要素にリンク ターゲット URL を定義することもできます。

カスタムプロパティを作成する方法

新しいカスタム プロパティを作成するには:

1. カスタムプロパティを作成する要素を選択します
2. へお越しください 要素設定パネル > カスタムプロパティ
3. 「プラス” アイコン
4. を入力 タイトル カスタムプロパティ（例： ツールチップ, ariaラベルなど）とその コンテンツ

プロのヒント: HTML属性の完全なリストは、 Mozilla HTML 属性リファレンス.

カスタムプロパティでCMSデータを活用する方法

CMS データをカスタム プロパティにリンクして、デザイン、コード、動的データ間の接続を形成し、デザインの強度と柔軟性を高めることができます。これにより、HTML データ プロパティ (マップやソーシャル ウィジェットのプレビューなど) を利用する統合やウィジェットを管理したり、カスタム CSS を使用して CMS フィールドの値に基づいてページのスタイルを調整したり、CMS データを使用して ARIA プロパティに入力することでサイトのアクセシビリティを強化したりすることができます。

不可欠： CMS データをコレクション ページまたはコレクション リスト内のカスタム プロパティにのみリンクできます。

CMS データをカスタム プロパティにリンクするには:

1. カスタムプロパティを作成する要素を選択します
2. 訪問 要素設定パネル > カスタムプロパティ
3. クリック "プラス” アイコン
4. を入力 タイトル カスタムプロパティ（例： ツールチップ, ariaラベルなど）
5. 紫色の「ドット”アイコンをクリックすると コンテンツ 分野
6. カスタムプロパティにリンクするコレクションフィールドを選択します

プロのヒント: CMSデータをIDプロパティに添付することもできます。IDプロパティは、 要素設定パネルこれにより、特定の CMS アイテムを認識するための一意の ID を設定できるようになり、カスタム コードを使用してそれらのアイテムをターゲットにすることができます。

カスタムプロパティでコンポーネント属性を活用する方法

カスタム プロパティをコンポーネント属性に関連付けることもできます。これらを使用すると、たとえば、複雑なスタイル設定や CMS フィールドを容易にしたり、制御したりできます。コンポーネント属性の詳細をご覧ください。

コンポーネント属性をカスタム プロパティに接続するには:

1. カスタムプロパティを作成する要素を含むプライマリコンポーネントを変更します。
2. カスタムプロパティを作成する要素を選択します
3. へ移動 要素設定パネル > カスタムプロパティ
4. クリック "プラス” アイコン
5. を入力 タイトル カスタムプロパティ（例： ツールチップ, ariaラベルなど）
6. 紫色の「ドット”アイコンをクリックすると コンテンツ 分野
7. (オプション) 新しいコンポーネント属性を確立する
8. カスタムプロパティにリンクするコンポーネント属性を選択します

CMSデータとコンポーネントを設計する方法 category 属性

適用できるのは category 属性を使用すると、カスタムコードクラスまたはWebflowで確立したクラス（つまり、スタイリングパネルで作成したクラス）を使用して、CMSデータとコンポーネントのスタイルバリエーションを生成できます。たとえば、 category サイト全体のカード コンポーネントに明るいテーマと暗いテーマを適用する属性です。

覚えて： の category 属性は、テキストベースの CMS データおよびコンポーネント属性でのみ使用できます。

Webflowで作成するクラスは小文字でスペースを含まないことに注意してください。たとえば、スタイリングパネルでクラスを生成する場合、 私の素晴らしいクラス派生クラスは 私の素晴らしいクラス —そのスタイルを参考にして category 属性を入力すると、 私の素晴らしいクラス.

さらに、Webflowは、デザイナーで作成された1文字のクラス（例： c になる _c).

不可欠： の スタイルセレクタパネル CMSデータまたはコンポーネント属性で参照されているクラスを認識しません。未使用のスタイルをクリアする前に、 スタイルセレクターのパネルただし、Web サイト上のカスタム属性では使用されません。

コンテンツ管理システムのデータ

CMSデータをカスタマイズするには クラス 属性：

1. 特殊な属性を生成したい要素を選択します
2. に行く 要素設定パネル > 特別な属性
3. 「追加” 記号
4. 入れる クラス に 識別子 セクション
5. 紫色の「ドット” 記号は 価値 セクション
6. リンクしたいコレクションセクションを選択します。 クラス 属性

リマインダー： CMS データは、コレクション ページまたはコレクション リスト内のカスタマイズされた属性にのみ関連付けることができます。

要素

コンポーネントをカスタマイズするには クラス 属性：

1. 含めたい要素を囲むプライマリコンポーネントを編集します。 クラス 属性
2. 組み込みたい要素を選択します クラス 属性
3. 進む 要素設定パネル > 特別な属性
4. 「追加” 記号
5. 入れる クラス に 識別子 セクション
6. 紫色の「ドット”記号が 価値 セクション
7. （オプション）コンポーネントの新しい側面を形成する
8. 接続したいコンポーネントの機能を選択します。 クラス 属性（例：「テーマ」）

その後、コンポーネント インスタンス内でこの要素にスタイルを適用するには、次の手順を実行します。  

1. キャンバス上のコンポーネントインスタンスを選択する
2. アクセス 小道具のパネル
3. コンポーネント機能のコンテンツとして、クラスタイトル（Webflowまたはカスタマイズされたコードで指定したもの）を挿入します。 クラス 属性（例えば、 暗い 「テーマ」コンポーネント機能のコンテンツとして）

コンポーネントの側面をさらに詳しく調べます。

特注属性を扱うテクニック

カスタマイズされた属性を修正するには:

1. カスタマイズした属性を修正する必要がある要素を選択します
2. に行く 要素設定パネル > 特別な属性
3. 修正したいカスタマイズ属性をタップします
4. 更新する 識別子 および/または コンテンツ カスタマイズされた属性の

カスタマイズされた属性を消去するには:

1. カスタマイズされた属性を削除したい要素を選択します
2. アクセス 要素設定パネル > 特別な属性
3. 「ゴミ箱削除するカスタマイズ属性の隣にある「」記号