このページでは、Confitのトップページや開催情報ページを装飾するための、少し高度な手法について説明しています。ここに書かれている内容はすべてソースコードの編集 からHTMLタグを入力する必要があります。

ソースコードの編集以外の基本的なテキストエディターの使用方法については以下をご確認ください。

テキストエディターの使い方

<aside> ❗ ここで紹介しているコードは、Confitのシステム既存のレイアウトを利用したものです。そのため、Confitのデザイン方針の変更によりレイアウトや配色が変更される可能性があります。予めご了承ください。

</aside>

ソースコードの編集モード

テキストエディタにはソースコードの編集画面があります。この画面を利用すると、HTMLタグを直接入力して画面を作成することができます。

• メニューの「表示 > ソースコード」を選択する、またはソースコードアイコンをクリックすると、ソースコードの編集画面が開きます。

  

• ソースコード編集画面を開くと以下のような画面が開き、HTMLタグが入力できるようになります。

  

• 保存をクリックすると、変更内容を保存してもとの画面に戻ります。

カラーテーマを使用する

親要素にカラーテーマを指定することで、基本のスタイルを上書きして子要素の配色を変更することができます。

例えば、基本の見出しスタイルは以下のようにグレーをベースにしたものとなっていますが

グレーベースの配色

テーマを適用することで以下のように配色を変更することが出来ます。このカラーパターンは見出しやテーブル、リストなどの装飾に反映されます。

Confitカラーの配色

カラーテーマの適用方法

適用したい要素をdiv で囲い、そのdivにテーマ用のクラスを指定することでテーマが適用できます。