デザインコンポーネントの仕組み

ECHOには、CSSやJavaScriptといったレイアウトの関連要素もテンプレートとして統合的に扱えるデザインコンポーネントと呼ばれる仕組みが用意されています。
Webサイトのデザインを司る以下のテンプレートでは、このデザインコンポーネントの仕組みが採用されています。

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

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

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

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

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

なお、実際のWebサイト上でのCSSやJavaScriptの読み込みは、システム側が自動的に行います。

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