条件付きスタイルとは
条件付きスタイルは、特定の条件が発生したときだけボックスのスタイル（色やサイズなどの外観やレイアウト）を変更する機能です。 あらかじめ発生条件を選択し、その条件が発生したときのスタイルを個別に設定します。
条件付きスタイルには次の分類があり、選択中のボックスに対して適用可能な発生条件の項目のみが表示されます。
分類 | 発生条件の項目 | 説明 |
(1) カーソル | - ホバー | カーソルを載せたとき・入力中・クリックしたとき |
(2) アニメーション | - 出現時 | 画面の読み込みやスクロールで画面上に現れたとき |
(3) トグル | - クローズ | トグルが閉じた状態のとき |
(4) リンク | - 現在のページ | ページリンク先と閲覧中のページが同じとき |
(5) リスト | - 最初のアイテム | リストアイテムのうち、先頭のアイテムに限ったデザイン |
(6) カスタム | - ブール値（CMSダッシュボードでのプロパティ名が反映） | CMSやリストなどの動的な要素で、ブール値がON（true）状態のスタイル |
Point：一般的には、これらのスタイル変化全般を広く「アニメーション」と呼ぶことがあります。
条件付きスタイルを設定する
条件付きスタイルを設定するボックスを選択します。※条件付きスタイルは、レイヤーパネルの最上位のボックス（Baseレイヤー）には設定できません。
右パネル右上の[条件付きスタイル]をクリックします。パネルが閉じている場合には、右パネルを開いてください。
[カーソル]や[アニメーション]などの発生条件が表示されます。 発生条件を選択するとスタイル編集モードになり、選択した条件名は右パネル右上に表示されます。
条件発生時のスタイルが設定された項目（色やサイズなど）は、右パネル上で色が変わり、通常時との違いを確認できます。
公開中のサイトを編集している場合：設定が完了したら、公開パネルでサイトを更新します。この操作を行うまで、公開サイトには反映されません。
条件付きスタイルを削除する
条件付きスタイルの解除は、発生条件ごとに一括で削除する方法と、一部の項目だけを削除する方法があります。
特定条件下のスタイルを一括で削除する
特定条件下のスタイルの一部を解除する
をクリックします。
条件付きスタイルの種類と用途
ここでは、分類ごとに代表的な用途と注意点を説明します。
(1) カーソル
カーソル分類では、ホバー中や入力中など、閲覧者のカーソル操作やフォーカス状態に応じてスタイルを切り替えます。
ホバー
ホバーは、閲覧者が要素にカーソルを載せたときのスタイルを変更します。
一般的には、クリックできる要素であることを視覚的に示すために使用します。
注意：タッチデバイス閲覧時のホバー表現
スマートフォンやタブレットなどのタッチデバイスではホバー操作がないため、タップ後もホバースタイルが残り続けるなど意図しない挙動が起きる場合があります。タップ操作が必要な箇所では、ホバー以外の表現方法の利用を検討してください。
[ホバー]を選択すると、アニメーションテンプレートが現れます。※いずれも選択せず上部の[カスタム設定]をクリックすると、数値を初期状態から設定できます。
拡大
色の変更
傾ける
影を付ける
いずれかを選択すると、[ホバー]条件付きスタイルの設定画面で[変形]と[アニメーション]の項目に値が反映され、設定済みの値は水色で表示されます。
いずれも選択せずに上部の[カスタム設定]をクリックすると、数値を初期状態から設定できます。
in ホバー
in ホバーを使うと、親ボックスのホバー時に連動して子ボックスのスタイルも変更できます。親ボックスにホバースタイルが設定されていない場合、in ホバーの選択肢は表示されません。
例：ボタン全体のホバー時に内部テキストの色も変える場合
ボタン全体を選択し、[ホバー]の条件付きスタイルを設定します。
ボタン内のテキストを選択し、[in ホバー]の条件付きスタイルでテキスト色を変更します。
フォーカス
フォーカスは、フォームの入力欄や選択肢に対して適用されます。
ユーザーが入力中または選択中の間だけスタイルを変えられるため、入力中のフィールドを明確に示す用途に適しています。
クリック中
クリック中は、ボタンをクリックしている間のスタイルを指定します。
適用できるのは、HTMLタグが<button>の要素のみです。
例：フォーム送信ボタン、トグル開閉ボタン、ビデオwithボタンのボタンなど
一方、HTMLタグが<a>の要素には適用できません。
例：ページ遷移ボタンなど
Tips：フォーム入力欄に[フォーカス]と[ホバー]が設定されている場合、両方の条件発生時には、[フォーカス]のアニメーションが優先されます。
(2) アニメーション
出現時
[出現時]では、画面の読み込みやスクロールによってブラウザ画面内に出現する瞬間のスタイルを設定できます。
[出現時]を選択すると、次のアニメーションテンプレートが表示されます。
下からフェードイン
右からフェードイン
左からフェードイン
ブラーフェードイン
いずれかを選択すると、[出現時]条件付きスタイルの設定画面で[変形]と[アニメーション]の項目に値が反映され、設定済みの値は水色で表示されます。
いずれも選択せずに上部の[カスタム設定]をクリックすると、数値を初期状態から設定できます。
(3) トグル
クローズ
条件付きスタイル[クローズ]は、トグルボックスにのみ設定できます。
トグルが閉じている状態のホバー時やクリック時などのスタイルを定義できます。
(4) リンク
現在のページ
要素に設定されたページリンク先が閲覧中ページと同じ場合のスタイルを設定します。
これにより、サイト内メニューなどで「現在表示中のページ」を視覚的に示せます。
※リンク先がモーダルページまたはリダイレクトページの場合、この設定は利用できません。
[現在のページ]を適用すると、右側に[下層含む]のトグルが表示されます。
[下層含む]をONにすると、リンク先ページの下層ページ閲覧時にも同じスタイルが適用されます。
例：ページリンク /company に対して[下層含む]をONにした場合、 /company/about ページの閲覧時にも同じスタイルが適用されます。
なお、[ホーム]のページには[下層ページも含む]が設定できません。
(5) リスト
最初のアイテム
例えば、ブログの最新記事だけ大きくして目立たせるといった表現が可能です。
in 最初のアイテム
[in 最初のアイテム]は、[最初のアイテム]が条件設定されたリストアイテム内の要素に対して指定します。
先頭の記事のタイトルだけ文字サイズを大きくするなど、先頭アイテム内の一部要素を調整できます。
(6) カスタム
例：以下の図は、スタイル変更の発生条件を「[Newアイコンの色]というブール値プロパティがCMSダッシュボード上でONになっていること」ととし、その条件下で「New」の文字色がピンクに変わるよう設定する様子です。
Tips：条件付きスタイル[カスタム]の名称には、CMSダッシュボードで設定したブール値プロパティの名前が反映されます。
条件付きスタイルが設定されたボックスを確認する
条件付きスタイルが設定されたボックスは、レイヤーパネルから一覧できます。
レイヤーパネルを開きます。
パネル名[レイヤー]の右側にある[条件を確認]アイコン
をクリックします。条件付きスタイルが設定されたボックス（レイヤー）には[・]が表示されます。
各縦列は、同じ分類の条件付きスタイルごとに並びます。
[・]にホバーすると、設定されている条件の詳細を確認できます。
インホバー in:hover ホバーアクション アニメーション解除 focus
inhover マウスオン アニメーション外す