<p>名前：<baby_name></p>
<p>
名前：<baby_name>
</p>
の部分を書き換えるのですが
<p class="name name_A">名前：キャラ名1</p>
<p class="name name_B">名前：キャラ名2</p>
<p class="name name_C">名前：キャラ名3</p>
このように書き換えて下さい
次に、ワードを一つ作ります
・キーワードは空欄
・クラスタの数値は0以外（とりあえず100とかに）
・本文は下記参照
・変数は空欄
のようなワードを登録します
このように（キーワード空欄&クラスタ0以外）設定すると
どのワードがヒットした場合でも
それにくっついてこのワードが一緒に表示されるようになります
そして本文は
<head><style type="text/css"><!--
{} p.name { display:none; }
{} p.name_<[Mode]> { display:inline-block!important; }
--></style></head>
の4行を書きます
このワードを登録することで、何かを話しかけた時に、↑のCSS構文が毎回、HTML内に書かれるようになります
（CSS構文なので、実際にブラウザ上に見えるように表示はされません)
しかし、これだけではトップページでは表示されません
なので、キーワードをtoppageに変えて他のクラスタや本文は↑と同じワードをもう一つ登録します
次に、本文に使っている変数（↑の場合は<[Mode]>なので、変数名は Mode ）を変数設定から登録します
この時、初期値は画面デザインで書き換えた時の
キャラ名1を初期状態にしたい場合は A
キャラ名2を初期状態にしたい場合は B
にします
（同じ行の、 name_A ← この部分の1文字)
そして、ベイビーでモード変更などをした時に、その変数に別の文字（AとかBとか）を代入すれば、表示される名前が切り替わります
- 解説 -
ワード本文の書いたものはCSSというもので、HTML内の特定の要素や属性付き要素に何らかの処理をするための構文です
例えば、画面デザインで書き換えた1行目の
<p class="name name_A">名前：キャラ名1</p>
という部分は
p という要素に name と name_A という属性が付けられていることを表します
（属性は半角スペース区切りで複数指定可能）
</p>はそのp要素の終わりを意味します
ワード本文に書いた
p.name { display:none; }
は、name という属性が付けられた p要素を非表示するという意味です
p.name_<[Mode]> { display:inline-block!important; }
は、まず、変数を使用しているので、その変数の内容によって実際に表示される（CSS構文なので、実際にブラウザに見た目上では表示はされません）文字が変わります
例えば変数 Mode に A が代入されている時は
p.name_A { display:inline-block!important; }
となります
これは、name_A という属性が付いたp要素を、inline-block という形式で表示するという意味になります
!important はCSSによる指定が複数あった場合に、これが付いたものを最優先するという意味です
つまり
<p class="name name_A">名前：キャラ名1</p>
は、p要素であり、name と name_A の属性があるので
① name属性により非表示になりますが
② name_A属性によりやっぱり表示する
という事になります
!importantが付いているので②が優先されて適用されます
他の行のものは、name属性によって①で非表示になりますが
name_B や name_C なので、変数 Mode の中身が A の時は②によって表示されるようにはなりません
ちなみに、本文に書いた2行目、3行目の先頭にある{} は
本来CSSを書く時には必要ないのですが、ai広場のワード登録時の仕様で、改行が<br>という改行タグに置き換わるので
それがCSS構文に影響を与えないようにするための小細工です
- 【リンク】