「実験CSS」の使い方 | Optimizely 正規代理店イー・エージェンシー
  • 最終更新日:2017年02月24日

「実験CSS」の使い方

「コードの編集」に記述できるのは JavaScript ( 以下 JS ) のみの為、CSS についても JS で記述する必要があります。

ですが、「実験CSS」を利用する事で CSS の記法で記述する事が可能となります。

まず、「実験 CSS」には以下の特徴があります。

  1. 記述された内容は Original も含めた全てのテストパターンに適用される
  2. テスト用コードを CSS の記法で記述できる

大抵の場合はバリエーションごとに違いを設ける為、1 の特徴については少し扱いづらくあります。そこで「コードの編集」の出番です。

body タグ等へバリエーションごとにユニークな id または class を追加することにより、バリエーション別に CSS 書き分けられるようにします。

下記は body タグに variation01 という id を追加するサンプルコードです。二つ目のバリエーションに適用する場合は、variation02 という風に値を変更してください。

$('body').attr('id', 'variation01');

上記のサンプルを適用したバリエーションへ適用する CSS は次のようになります。

body#variation01 ul li { ・・・ }

追加する際に、既に利用中の id 及び class を上書きしてしまわないようにご注意下さい。

Optimizelyのサポートに関するお問い合わせはこちらまで

ヘルプの関連記事

アカウント作成後にメールアドレスやパスワード、ユーザーネームは変更できますか?(Optimizely X)
投稿日: 2017年02月24日
複数アカウントのコラボレーターに登録された場合、どうやって切替できますか?(Optimizely X)
投稿日: 2017年02月24日
過去に使用した実験をコピーすることはできますか?(Optimizely X)
投稿日: 2017年02月24日
目標の設定(Optimizely X)
投稿日: 2017年02月24日
テスト開始(Optimizely X)
投稿日: 2017年02月24日

ヘルプのよく読まれている記事