STUDIOの便利な画像操作5本ノック！
STUDIOでの画像の配置は、いったん覚えてしまえば使いやすく便利ですが、操作ルールがわからないとストレスですよね…。
そこで、本記事ではSTUDIOの便利な画像操作を５つ厳選してご紹介します。
- STUDIOでの画像の重ね方
- STUDIO で画像の上にテキストを配置する方法
- STUDIOで 画像のスライド（カルーセル）を入れる方法
- STUDIOでの画像のトリミング方法
- STUDIOで画像を切り替え方法
STUDIOでの画像の重ね方
WEBサイト内では、下記の例のように、画像の一部が重なったデザインをわりとよく見かけると思います。本記事では、まずSTUDIOで画像の一部を重ねるにはどのような操作をすればよいか、解説していきます。
まず、親要素となるボックス①と、画像②および画像③を配置します。（親要素には、わかりやすくするために、あえて色をつけておきます）。
次に、画像②を選択し、マージンをつけます（100pxくらいでよいでしょう）。
もし、この時点で操作に不安がある場合は、前記事**「STUDIO基本操作② 画像の設定と編集をマスターしよう！」**をご参照ください。
画像③を選択し、先ほどと同じように、上側にマージンをつけます。そして、向かって左側（画像が重なっている部分）には、**「マイナス マージン」**をつけます。
通常のマージンは、要素と要素の間に余白をあける働きをします。これに**「マイナス」をつけることで、その逆の意味の、要素の「重なり」**を表現することができるのです。
最後に、親要素の色を「透明」に設定して完成です！
実践編 〜STUDIO で画像＆ボックスを重ねる〜
今ご紹介した「マイナス マージン」を使うと、WEBサイトによくある、以下のようなデザインも簡単にできます!
通常通り、画像①、ボックス②を縦並びに配置し、ボックス②の中央にボックス③を入れます。このボックス③の上側にマイナスマージンを設定すればよいのです。
ボックス③の上部にタイトルとなる文字を入れて完成です。
STUDIO で画像の上にテキストを配置する方法
画像やボックスの上にテキストを配置するのは簡単です。画像の上に、文字ボックス（画面左サイドの ”T” のアイコン）をドラッグ＆ドロップするだけでOKです。
しかし、STUSIOユーザーから「画像の上に文字を乗せることができなくて困った」という声をしばしば耳にします。
…そんなときは、画像が「Box」モードではなく「Img（=Image)」モードになっていないかチェックしてみてください！「Img」モードの画像の上に文字を入れることはできない仕様になっています。
画像の各モード（「Box」or「Img」）の違いが気になる方は、前記事**「STUDIO基本操作② 画像の設定と編集をマスターしよう！」**ご参照ください。
STUDIOで 画像のスライド（カルーセル）を入れる方法
WEBサイトのトップに複数の画像をスライドショーで入れられたら素敵ですよね。STUDIOでも、こういった「カルーセル」の機能を使うことができます。
では、さっそくカルーセルの設定方法を見ていきましょう。
まず、画面左のアイコンから、メニューを展開します。「追加」タブから、「ボックス」を選びスクロールしていくと、一番下の「Component Parts」の中に「Carusel」があります。
これをドラッグ＆ドロップで、制作中のページの希望する場所に配置します。上にお示ししましたのは、このようにカルーセルを挿入した場合のデフォルトの状態です。
続いて、カルーセルの内容をカスタマイズしていきましょう。カルーセルが選択されている状態で画面右の設定メニューを展開します（メニューを展開してから、カルーセルを選択してもOKです）。
※カルーセルの設定メニューは、各画像ごとの**「リスト」になっています。このリストメニューが現れない場合は、しっかりとカルーセルが選択されているかどうか**をご確認ください。カルーセルを選択したあとでも、他の場所をクリックしてしまうと、その場所（他のボックスやページ全体）の設定メニューに切り替わってしまいます。
カルーセルに表示する内容は、順番に「１、 ２、 ３…」と番号が振られており、この順に表示されます。
リストは、各画像ごとに「title（タイトル）」「cover（画像）」「discription（コメント）」「publishedAt（日付）」がデフォルトで設定されています（横スクロールで次の項目が現れます）。これらの分類は、変更することも、追加・削除することもできます。
また、表示する文字は、通常の文字ボックスと同様に、ドラッグ＆ドロップやマージンの設定で位置を変更することもできます。
画像を変更したい場合は、設定メニューの「cover（画像）」の画像アイコンをクリックしましょう。通常画像の変更と同じように画像選択（or アップロード）画面が現れます。
残念ながら、STUDIOのカルーセルは画像が自動的に移り変わる機能がなく、ページを訪れたユーザーが自分で両端のアイコンをクリックしなければなりません。
この他、CMS機能を使っている場合、CMSに付随する機能を使ってカルーセルを設定することができます。ですが、これは本来、CMSにある記事内容を画像＆コメントのスライドショー形式で紹介するものですので、今回は割愛します。
STUDIOでの画像のトリミング方法
縦長/横長の画像の一部を表示させたい…そんなときはどうすればよいでしょうか？
前記事**「STUDIO基本操作② 画像の設定と編集をマスターしよう！」**でご紹介した通り、画像は（「Img」でなく「Box」にしておく）「画像タブ」➔「配置」から、画像のどの部分を基準に表示するかを大雑把に決めることができます。
しかし、上記の方法よりもうちょっと細かく設定したいものですよね。そんなときは「マイナス マージン」と「はみだし」設定をうまく使っていきましょう。
まず、親要素となるボックス（このボックスの範囲に画像を収めます）を用意し、その中に画像を入れます。そして、画像にマイナスマージンを設定してみましょう（今回は、上側に-100pxを設定しています）。画像がはみ出しましたね。
次は、親要素であるボックスを選択した状態で、スタイルバーの**「はみ出し」から「切り取り」**を選択します。すると、画像がボックスからはみ出た部分がカットされました。
これを上下左右うまく用いることで、画像をトリミングすることができます。トリミング完了後、背景のボックスを透明にしておけば、サイズ変更された画像のみが表示されている状態にできます。
STUDIOで画像を切り替え方法
STUDIOでは、カーソルが「ホバーしているときのスタイル」を設定することができます。例えば、ボタンにカーソルを合わせると（ホバー中）ボタンを押しているような動作に見せることができます。
（※今回、画像はこちらで用意したものをアップロードしております。）
ただし、「クリックしたときのスタイル」はなく、設定できるのは「ホバーしているとき」のスタイルであることに注意してデザインしましょう。
まず、ホバーしているときに現れる画像を配置します（今回であれば、「ありがとうございます！」と書かれたボタンです）。
そして、この画像の上に、ちょうどぴったり重なるように、ホバー時以外の画像を乗せます（今回は「ここをクリック」と書かれたボタンです）。
次に、ホバー時に消える方の画像（今回は、「ここをクリック」と書かれたボタンです）を選択して、画面左の設定から**「条件付きスタイル」➔「ホバー」**を選びます。そして、**透明度を「１（デフォルト）➔０」**に設定します。
※透明度は「１」のとき透過なし、「０」で完全に透明になる設定です。
こうすると、ホバーするとボタンが押されたような動きをつくることができます。ただし、画像が切り替わる速度など、細かい設定はできないので注意しましょう。
プレビューはこちら（https://preview.studio.site/live/nBW2k56yOv/1）
いかがでしたか？ノーコードでは、できるデザインに制限もありますが、工夫次第でかなり「動き」をつけられることが実感できたかとおもいます。アニメーション編と合わせると、もっと自由度の高いスタイリッシュなデザインも可能になりますよ！
