デザインコンポーネント

ECHOPFには、CSSやJavaScriptもテンプレートとして扱えるデザインコンポーネントと呼ばれる仕組みが用意されています。
デザインコンポーネントは、Webサイトのデザインを司る以下のテンプレートにおいて採用されています。

デザインコンポーネントの構成要素には、ベースエレメント・CSSエレメント・JavaScriptエレメントの3種類があります。

ベースエレメントには、HTML等を使用してレイアウトをマークアップします。
そして、ベースエレメントに適用したいデザインや機能は、CSSエレメントやJavaScriptエレメントとして個別に定義します。

管理画面上での各エレメントの定義や管理方法は、以下をご参照ください。

デザインコンポーネントには、核となるひとつのベースエレメントと、それに対して適用する複数のCSSエレメントやJavaScriptエレメントとの結合を定義します。
出来上がったデザインコンポーネントは、テンプレートとしてサイトデザインの指定に使用することができます。

下図のように、同じエレメントを異なるデザインコンポーネントに対し適用することが可能なため、様々なバリエーションのデザインコンポーネントを簡単に生成することができます。

管理画面上でのデザインコンポーネントの定義や管理方法は、以下をご参照ください。