メインコンテンツにスキップ
画像スタイルメニュー

エディタ上で画像を加工する方法を解説します。明るさ、コントラスト、モノクロなどのスタイルや、背景画像のサイズ調整、リピート、位置調整の方法を詳しく説明します。

Saika avatar
対応者:Saika
1か月以上前に更新

画像スタイルメニューの利用

Studioでは、配置した画像に様々なスタイルを適用することができます。以下はその方法と利用可能なスタイルの種類です。

動画での解説は以下URLからご覧ください。

画像スタイルの適用方法

1. Boxモードへ切り替え

画像を選択しBoxモードに切り替えます。

2. スタイルを選択

スタイルバーの[画像]タブを開き、スタイルを適用します。

スタイルの種類

  • 明るさ

  • コントラスト

  • 鮮やか

  • モノクロ

  • セピア

  • ぼかし

  • サイズ調整 (background-size)

  • リピート (background-repeat)

  • 位置調整 (background-position)

※Imgモードでは「ブレンドモード・フィルター・背面フィルター」のみ設定可能です。

サイズ調整 (background-size)

背景画像のサイズを指定する際や、一部を表示したい場合に使用します。以下の4つの方法があります。

1. cover

背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小します。ボックスサイズを横幅100%に設定すると、画像を画面幅最大に設定することができます。

2. contain

背景領域に収まる最大サイズになるように画像を拡大縮小します。

3. px (ピクセル)

画像の比率は変えずに横幅を指定できます。親ボックスよりも画像が大きい場合は、はみ出た部分が切り取られます。

4. %(パーセンテージ)

背景領域に対する画像の幅をパーセンテージで指定します。レスポンシブデザインに対応する際に便利です。

背景画像のリピート機能

画像をタイル状に繰り返して表示する機能です。画像ボックスの「リピート」を選択すると、余白部分に画像が繰り返し表示されます。

背景画像の位置調整

画像の基点位置を調整できます。デフォルトは中央ですが、画像ボックスの「ポジション」から中央、上下左右、四隅のいずれかに変更できます。

image picture filter

イメージ 写真 素材

こちらの回答で解決しましたか?