サイポン 「画像のサイズを変更する方法」

画像のサイズの変更方法についての解説動画です。

サイポンには画像のサイズを直接変える機能が備わっていません。

私の場合、以下の３つの方法で行っています。

・コンテナの余白を調節
・レイアウトの「幅」で調節
・テキストの背景で調節

以下にそれぞれの手順を書きます。

(1)コンテナの余白を調節

「＋コンテナを追加」から画像を追加するの余白（内側部分）の大きさを変える

（出来ること）
細かなサイズの調整ができる
スマホにもサイズが反映される
ALT属性が入力できる

（注意点）
作業が細かいので慣れるまでに時間がかかる
画像を横に並べることが出来ない

(2)レイアウトの「幅」で調節

レイアウトの「幅」から
100%→80%→75%→1/2→1/3→1/4→1/6
と幅を変更する

（出来ること）
横に画像2~6個を並べることが出来る
一番簡単な手順でサイズ変更が出来る

（注意点）
スマホ画面に反映されない
ALT属性が入力できる

(3)テキストの背景で調節

「＋コンテナを追加」からテキストを追加し、
テキストパーツの背景に画像を挿入する。
テキスト文字を全て消して、改行することで背景画像のサイズが変わる

（出来ること）
文字の背景画像としても使える
ロゴを入れるときなど、(1)、(2)で出来なかった微調整が出来る
画像の大きさを変えるだけでなく、背景を「固定」しながらスクロールが出来る

（注意点）
小さすぎると画像が切れてしまう
ALT属性が入力できない


その他、
２列、３列の横並びの画像を作りたい場合は
セクションを追加する時にテンプレートを選択すると、
手っ取り早く作ることが出来ます。

ただし、
細かな調整には上記３つの方法を理解しておくと便利です。

解説動画はこちら↓