記事やページの画像に、スマホで見たときだけ表示する別の画像（スマホ用画像）を設定できます。横長の画像をスマホでは縦長の画像に差し替える、といった使い分けができます。
しくみ
- 画面の幅が切り替える幅（既定は 699px）以下のときはスマホ用画像が、それより広いときは元の画像（PC 用）が表示されます。
- どちらを表示するかは見る人のブラウザが決めます。記事には両方の画像を入れておくだけで済みます。
スマホ用画像を付ける
- 記事またはページのエディタで、PC 用の画像をクリックして選びます。画像の上にスマホ用画像のボタンが出ます。
画像を選ぶと出るボタン。「スマホ用画像を外す」は、スマホ用画像を付けたあとに押せるようになります。 - スマホ用画像を押します。
- メディアを選択の画面で、スマホ用の画像を選びます。アップロードから新しい画像を追加することもできます。
スマホ用の画像を選びます。検索欄で名前を入れて絞り込むこともできます。 - 記事を保存（または下書き保存）で保存します。
エディタの目印
スマホ用画像を付けた画像には、エディタの中だけに目印が付きます。公開ページには表示されません。どちらの画像が見えているかは、エディタの幅で変わります。
- PC用を表示中・スマホ用あり（青）— エディタの幅が切り替える幅より広いので、PC 用の画像を表示しています。スマホ用画像も設定されています。
- スマホ用を表示中（緑）— エディタの幅が切り替える幅以下なので、スマホ用の画像を表示しています。ブラウザの幅を広げると PC 用の表示に戻ります。
スマホでの見え方を確認する
- エディタの下書きをプレビューを押します。まだ保存していない変更も表示されます。
- プレビューの上にあるスマホを押すと、スマホの幅で表示されます。PCを押すと元の幅に戻ります。
スマホ用画像を変える・外す
- 別の画像に変える — 画像を選んでスマホ用画像を押し、新しい画像を選びます。
- 外す — 画像を選んでスマホ用画像を外すを押します。PC 用の画像だけに戻ります。
切り替える幅を変える
切り替える幅は、チャンネルのテーマ › Theme › レイアウトにあるスマホ用画像に切り替える幅で変えられます。既定は 699px です。サイトのデザインがスマホ向けに切り替わる幅と合わせてください。カスタムレイアウトを使っているチャンネルでも、この設定は効きます（幅は、スマホ用画像を付けるときに画像の HTML へ書き込まれるためです）。
変えた幅は、これから付けるスマホ用画像に使われます。すでに付けたスマホ用画像は、付けたときの幅のままです。
うまくいかないとき
- 「スマホ用画像」のボタンが出ない — 画像をクリックして選んでいるか確かめてください。CSS の背景画像（background-image）として表示している画像には使えません。
- スマホで画像が横に伸びて見える — 元の画像に幅と高さ（width と height）が指定されていると、サイトの CSS によっては、スマホ用画像もその大きさで表示されます。画像の幅と高さの指定を外すか、サイトの CSS で画像に height: auto を指定してください。