参考ワードを拝見させていただきました。
ですが、一つ問題があって
画面デザインでの対応は今のところ出来ないので、別の方法を提案させていただきます。
その問題とは、現在phantomのベイビーに、新しく作成した画面デザインが適用できないという不具合が発生しているようです。
（何かのタイミング以前に作成されていたものは適用出来るようですが）
一応不具合報告は送ったのですが、ai広場の管理者の方が忙しくなってきたらしく、不具合を解消して頂けるかどうかわからないので、
とりあえず、画面デザイン以外での解決策を提案させていただきます。
不具合が解消されたら、画面デザインの方でも対応させていただく予定です。
また、参考ワードを拝見させていただき、だいたいの要望は分かりましたが
画像ファイル自体のサイズが、画面サイズより大きいか小さいかで挙動をどうするかが分からなかったので、二通りのパターンを用意しました。
① まず、新規に以下のようなワードを登録します。
・キーワードは空欄（ランダムアンサーを作る時のように）
・本文はとりあえず空欄（後で書きます）
・クラスタの数値は1以上（1でも2でも100でも構いません）
② ①のキーワードのみを toppage に変えたものをもう一つ登録します。
・ ①は話しかけた時用、②はトップページ用となります。
③ ①、②の本文に、それぞれ以下AかBどちらかの【】内の文字列をコピペします。（【】は不要）
- パターンA -
・画像ファイルの横幅が画面横幅より大きい場合、画面横幅いっぱいに合わせて表示
・画像ファイルの横幅が画面横幅より小さい場合、画像ファイルの元々のサイズで表示
【<style type="text/css"><!-- .pic_box>img { max-width:100%; max-height:initial; } --></style>】
※ 以下のサンプルは、別ベイビーに飛びます。
【サンプル1】
【サンプル2】
- パターンB -
・画像ファイル自体の大きさに関係なく、常に画面横幅いっぱいに合わせて表示
・元のサイズより拡大されるのはスマホで見た場合のみ
※小さい画像ファイルがあった場合、無理やり横幅いっぱいに拡大されるため画質が荒くなると思います。
【<style type="text/css"><!-- .pic_box>img {max-width:100%; max-height:initial;} @media screen and (max-width:800px){ .pic_box>img {width:100%} } --></style>】
【サンプル_1】
【サンプル_2】
以上です。
- 補足・解説 -
パターンBの方で、スマホの場合のみとしているのは、PCで見た場合に全て画面横幅に合わせると大変なことになるからです。
スマホかどうかの判断は、見ている端末の画面の横幅が800pxより大きいかどうかで判断しています。
コピペする際に、文字列の前後に改行が入ってしまうと、表示上に不自然な空白行が出てしまったりするので注意して下さい。
①で用意したクラスタ付き、キーワード無しのワードは、どのワードがヒットした場合でも付属して一緒に表示されるワードになります。
このワードを使えば、毎回同じ文章を表示したり、同じ変数の処理を行うことができます。
今回の場合は、CSSというものを書いたので、見た目上では書いた文章は表示されません。
CSSとは、HTMLタグと似たようなものですが、更に細かく装飾などを指定できるものです。
このCSSを使って、画像の表示のされ方を制御するようにしたというわけです。
もし、うまくいかない、思ってたのと違う、などがありましたらまたご報告下さい。
- ついでに更に詳しい解説 -
今回使用したCSSについても一応解説しておきます
画像が縮小表示されていたのは、デフォルトのCSSの設定で画像ファイルのサイズに上限が設定されていたからです。
そこで今回使用したCSSでそれらの設定を上書きして変更しています。
max-width:100%
横幅の上限の設定を画面の横幅いっぱいまでにしています。
max-height:initial;
縦幅の上限を無効化しています。
@media screen and (max-width:800px)
この指定をされたものは、画面の横幅が800pxより小さい場合にのみ適用されます。
width:100%
横幅のサイズを強制的に親要素（今回の場合は画面横幅）に合わせています。
ですが、一つ問題があって
画面デザインでの対応は今のところ出来ないので、別の方法を提案させていただきます。
その問題とは、現在phantomのベイビーに、新しく作成した画面デザインが適用できないという不具合が発生しているようです。
（何かのタイミング以前に作成されていたものは適用出来るようですが）
一応不具合報告は送ったのですが、ai広場の管理者の方が忙しくなってきたらしく、不具合を解消して頂けるかどうかわからないので、
とりあえず、画面デザイン以外での解決策を提案させていただきます。
不具合が解消されたら、画面デザインの方でも対応させていただく予定です。
また、参考ワードを拝見させていただき、だいたいの要望は分かりましたが
画像ファイル自体のサイズが、画面サイズより大きいか小さいかで挙動をどうするかが分からなかったので、二通りのパターンを用意しました。
① まず、新規に以下のようなワードを登録します。
・キーワードは空欄（ランダムアンサーを作る時のように）
・本文はとりあえず空欄（後で書きます）
・クラスタの数値は1以上（1でも2でも100でも構いません）
② ①のキーワードのみを toppage に変えたものをもう一つ登録します。
・ ①は話しかけた時用、②はトップページ用となります。
③ ①、②の本文に、それぞれ以下AかBどちらかの【】内の文字列をコピペします。（【】は不要）
- パターンA -
・画像ファイルの横幅が画面横幅より大きい場合、画面横幅いっぱいに合わせて表示
・画像ファイルの横幅が画面横幅より小さい場合、画像ファイルの元々のサイズで表示
【<style type="text/css"><!-- .pic_box>img { max-width:100%; max-height:initial; } --></style>】
※ 以下のサンプルは、別ベイビーに飛びます。
【サンプル1】
【サンプル2】
- パターンB -
・画像ファイル自体の大きさに関係なく、常に画面横幅いっぱいに合わせて表示
・元のサイズより拡大されるのはスマホで見た場合のみ
※小さい画像ファイルがあった場合、無理やり横幅いっぱいに拡大されるため画質が荒くなると思います。
【<style type="text/css"><!-- .pic_box>img {max-width:100%; max-height:initial;} @media screen and (max-width:800px){ .pic_box>img {width:100%} } --></style>】
【サンプル_1】
【サンプル_2】
以上です。
- 補足・解説 -
パターンBの方で、スマホの場合のみとしているのは、PCで見た場合に全て画面横幅に合わせると大変なことになるからです。
スマホかどうかの判断は、見ている端末の画面の横幅が800pxより大きいかどうかで判断しています。
コピペする際に、文字列の前後に改行が入ってしまうと、表示上に不自然な空白行が出てしまったりするので注意して下さい。
①で用意したクラスタ付き、キーワード無しのワードは、どのワードがヒットした場合でも付属して一緒に表示されるワードになります。
このワードを使えば、毎回同じ文章を表示したり、同じ変数の処理を行うことができます。
今回の場合は、CSSというものを書いたので、見た目上では書いた文章は表示されません。
CSSとは、HTMLタグと似たようなものですが、更に細かく装飾などを指定できるものです。
このCSSを使って、画像の表示のされ方を制御するようにしたというわけです。
もし、うまくいかない、思ってたのと違う、などがありましたらまたご報告下さい。
- ついでに更に詳しい解説 -
今回使用したCSSについても一応解説しておきます
画像が縮小表示されていたのは、デフォルトのCSSの設定で画像ファイルのサイズに上限が設定されていたからです。
そこで今回使用したCSSでそれらの設定を上書きして変更しています。
max-width:100%
横幅の上限の設定を画面の横幅いっぱいまでにしています。
max-height:initial;
縦幅の上限を無効化しています。
@media screen and (max-width:800px)
この指定をされたものは、画面の横幅が800pxより小さい場合にのみ適用されます。
width:100%
横幅のサイズを強制的に親要素（今回の場合は画面横幅）に合わせています。