ノーコードWeb制作ツール「Studio」で、CMS記事ごとに画像のサイズを変えたい
（例：特定の画像だけ100%で大きく見せ、その他は50%にしたい）と思ったことはありませんか？
Studioの仕様上、1つの画像ボックスのサイズを条件によって直接変えることはできません。
ですが、「100%用の画像」と「50%用の画像」の2つを用意し、ブール値（True/False）で表示・非表示を切り替えることで、理想の動きを簡単に実装できます！
今回はその具体的な手順を分かりやすく解説します。
Saranaプール値を使うと色々なパターンに活用できます
では、早速準備から進めていきましょう！
1. CMSダッシュボードでの事前準備
まずは、サイズを切り替えるための「スイッチ（条件）」をCMS側に作成します。
- CMSダッシュボードを開き、対象のモデル（記事など）を選択します。
- 画面右上の
[+]（プロパティを追加）をクリックします。 - 一覧から
[ブール値]を選択します。 - プロパティ名を「画像サイズ大」など、分かりやすい名前に設定します。
- 画像を大きく表示（100%）したいアイテムのみ、トグルを
ON（青色）にします。
2. デザインエディタでの実装手順
次に、デザインエディタに移動し、CMSの動的リスト（先頭の1マス）の中に設定を組み込んでいきます。
ステップ①：画像を2つ配置する
- リスト内に画像ボックスを2つ並べて配置します。
- どちらの画像ボックスにも、CMSの同じ「画像プロパティ」を紐付けます。
ステップ②：それぞれの画像サイズを設定する
- 1つ目の画像を選択し、右パネルの［ボックス］タブで幅（Width）を
100%に設定します。 - 2つ目の画像を選択し、右パネルの［ボックス］タブで幅（Width）を
50%に設定します。
ステップ③：100%用の画像に「ONのとき表示」を設定する
- 幅
100%の画像を選択します。 - 右パネルの
[設定]タブを開きます。 - ［表示条件を設定］の入力欄をクリックし、先ほど作ったブール値（例：画像サイズ大）を選択します。
- 条件タイプを
[is True]（真である）に設定します。
ステップ④：50%用の画像に「OFFのとき表示」を設定する
- 幅
50%の画像を選択します。 - 同様に、右パネルの
[設定]タブを開きます。 - ［表示条件を設定］で同じブール値を選択します。
- 条件タイプを
[is False]（偽である）に設定します。
3. 最後に表示確認をしよう！
設定が終わったら、エディタ左下のアイテム切り替えで表示を確認するか、ライブプレビューを起動して確認してみましょう。
- CMS側でトグルを
ONにした記事 ➔ 100%の大きさで表示 - CMS側でトグルを
OFFにした記事 ➔ 50%の大きさで表示
このように正しく切り替わっていれば設定完了です！
4. 参考になるStudio公式ヘルプリンク
操作に迷った際や、より高度な条件分岐を試したい場合は以下の公式ドキュメントもあわせてチェックしてみてください。
- ブール値（トグル）を含む、CMSで使える設定項目の一覧は Studio Help：CMSプロパティ をご覧ください。
- 表示条件（If機能）の仕組みや他のデータ型での設定方法は Studio Help：動的リスト・動的ページの表示条件設定 に詳しくまとまっています。
- 応用的な出し分け（画像有無によるテキスト切り替え等）の具体例は Studio Help：画像プロパティの登録状況に応じて画像とテキストを出し分ける も参考になります。
Sarana公式ヘルプは機能アップデートで画面が変わることもあるので、最新の仕様に迷ったら「表示条件（If）」のキーワードで検索し直すのがおすすめです。
まとめ
今回は、StudioのCMSでブール値（トグル）を使って画像のサイズを動的に切り替える方法を紹介しました。
記事のポイントを振り返ると以下の通りです。
- Studioでは1つの画像サイズを直接条件分岐させられない
- 「100%用」と「50%用」の画像ボックスを2つ配置して対応する
- CMSに作ったブール値プロパティをそれぞれの表示条件（is True / is False）に紐付ける
「画像を2つ置く」という少しの工夫で、Studioの表現の幅はぐっと広がります。
サイズ変更だけでなく、特定の記事だけ特別なラベルやレイアウトを表示させたいときにも応用できるテクニックなので、ぜひあなたのブログやWebサイトでも試してみてくださいね！
Sarana_Design.では、あなたに合ったプランをご用意しております！
詳細はお問い合わせフォームよりご連絡ください。
＼ご質問やご相談はお気軽にご連絡ください／
＼ご質問やご相談はお気軽にご連絡ください／
