logo

アンサー内画像の横幅を調整する方法

RightSupportではアンサーに画像を埋め込むことが可能ですが、表示される画像は横幅が自動で調整されます。
16:9などの比率の画像であれば問題ありませんが、スマートフォンのスクリーンショットを載せた場合などは、縦に場所を取りすぎてしまいます。
このアンサーでは、アンサーを編集して画像の横幅を調整する方法を記載します。

尚、この方法で修正した画像の幅はサポートアクション・サポートサイト両方に反映されます。

アンサー内画像の初期表示

アンサー内画像の横幅を調整する方法

アンサー編集画面で横幅を調整したい画像のHTMLを修正します。
まず、アンサー編集画面からHTMLエディタを開きます。添付画像のようにエディタの「ソースコード」のアイコンをクリックしてください。

ソースコードを開くと、このようにアンサーのHTMLが表示されます。
この中で、ハイライトしているように「<img src="xxx" />」で囲われている場所を探します。
複数画像をアップロードしている場合このimgタグが複数あるため、前後のテキストなどで場所を特定してください。

対象のimgタグを特定できたら、以下のように「style="max-width: xxxpx"」をタグの中身に追記します(設定する横幅は任意です)。

<img src="https://cdn-issues.karte.io/xxx.png" style="max-width: 300px" height="300px" />

このCSSを付与すると、以下のような見た目になります。

横幅を調整した場合の表示

以下で上記のCSSについて解説します。

style="max-width: 300px"

画像のタグに直接、横幅の最大値を指定する装飾を追加しています。
この場合、「横幅は最大で300pxまで」という指定になります。
そのため、PC画面でアンサーを開いた時など、横幅が過度に広がることを防ぐことができます。
逆に、最大値の指定であるため、スマホ表示では横幅はほぼ全画面になります。
指定する値は「50%」などの相対値指定でも構いませんが、その場合PC・スマホ両方で50%になってしまう(スマホ時に画像が小さくなりすぎる)可能性があるため、基本的に絶対値での指定を推奨します。
また、これをmaxを抜いて「width: 300px」にしてしまうとiPhoneSEなどの小さい画面で画像が幅を突き抜けてしまう可能性があるため注意してください。

役に立ちましたか?
解決しない場合はお問い合わせください