本文に入れた写真のサイズを変更する方法
旧マニュアル番号: No.27
リッチテキストに挿入した画像は、デフォルトでは記事エリアの横幅いっぱいに表示されることが多いですが、レイアウトや意図に応じて、画像の表示サイズを簡単な操作で変更することができます。
1. 画像サイズの変更オプション
Webflowのリッチテキストエディターでは、主に3段階のサイズ変更が可能です。
- 幅いっぱいに表示（デフォルト）
- 少し小さく、文章を回り込ませて表示（左右どちらか）
- 元の画像サイズで表示
2. 画像サイズを変更する手順
-
サイズを変更したい画像をクリック: リッチテキストフィールド内にある、サイズを変更したい画像をクリックして選択します。選択されると、画像の周りに青い枠が表示されます。
-
画像専用のフローティングメニューを表示: 画像を選択すると、その画像の上部または下部に、画像専用のフローティングメニューが表示されます。
-
サイズ変更アイコンを選択: メニューの中には、画像の表示方法を変更するためのいくつかのアイコンが並んでいます。これらのアイコンをクリックすることで、画像のサイズとレイアウトが即座に切り替わります。
アイコンの機能（一般的な例）:
- 長方形のアイコン（Align Left）: 画像が左に寄り、右側に文章が回り込みます。画像サイズは少し小さくなります。
- 中央揃えの長方形アイコン（Align Center）: 画像が中央に配置されます。通常は幅いっぱいの表示になります。
- 右揃えの長方形アイコン（Align Right）: 画像が右に寄り、左側に文章が回り込みます。画像サイズは少し小さくなります。
- 枠のみのアイコン（Original Size）: アップロードされた画像の元のピクセルサイズで表示しようとします。大きな画像の場合は、記事エリアの幅に制限されます。
-
最適な表示を選択: いくつかのアイコンを試してみて、記事の内容やデザインに最も合った表示方法を選択してください。
3. 注意点
- 画像の回り込み: 画像の左右に文章を回り込ませる設定は、文章の途中に画像を挿入する場合に効果的です。ただし、スマートフォンなどの狭い画面で見た場合には、回り込みが解除され、画像の下に文章が表示されるレイアウトに自動的に変わることがあります。
- 画像の鮮明さ: 小さな画像を無理に大きく表示させようとすると、画質が荒れてしまう原因になります。必ず十分な大きさの元画像を使用してください。
次のステップ: 画像のサイズ調整はできましたね。次は、さらに表現力を高めるために「No.28 本文にYouTube動画を埋め込む方法」をマスターしましょう。