Lステップの回答フォームで画像を挿入すると、「なぜか画像が小さく表示されてしまう」「ヘッダーが見切れてしまって全体が表示されない」といった悩みを抱えていませんか？
回答フォームに画像を挿入すると、読了率が上がるなどメリットがたくさんあります。読み手の印象を左右する画像は、綺麗に表示させたいですよね。
そこで本記事では回答フォームの画像の設定方法や表示の違いなどについて詳しく解説します！
- 回答フォームに画像を挿入するメリット
- 回答フォームに画像を挿入する2つの方法と見え方の違い
- 見切れてしまったヘッダー画像を修正する方法
弊社で作成した回答フォームも紹介しているので、ぜひ参考にしてください！
目次
回答フォームの最適な画像サイズとは？
回答フォームの画像サイズは特に指定がありません。どのサイズでも利用可能です。
ただ、ヘッダー画像はサイズによって見切れる可能性があるので注意しましょう。見切れた場合の対処法については、後ほど解説します。
まずは、本文に画像を挿入する方法をお伝えします！
回答フォームに画像を挿入する2つの方法
本文に画像を挿入するには、「小見出し」「中見出し」どちらかのフォームを選択する必要があります。
「小見出し」「中見出し」どちらを選択しても、画像の設定方法は同じです。
設定には2つのやり方があります。
1．登録メディア
2．URLで指定
「登録メディア」と「URLで指定」では、画像の表示サイズに違いがあります！
それぞれの設定方法と画像表示サイズについて詳しく解説します。
1．登録メディア
「小見出し」もしくは「中見出し」の画像横にある選択タブを【使用しない】→【登録メディア】に変更します。変更すると、【画像選択】というオレンジ色のボタンが表示されるので、そのボタンを押して表示したい画像を選びます。
登録メディアから画像を選択した場合、このように画像が表示されます。
登録メディアでは、画像が画面いっぱいではなく、小さく表示されます。
2．URLで指定
「小見出し」もしくは「中見出し」の画像横にある選択タブを【使用しない】→【URLで指定】に変更します。変更すると、画像URLを入力する欄が表示されます。ここに、登録メディア一覧にアップロードされている画像のURLを入力します。
画像URLの取得方法は、まず【登録メディア一覧】を開いて、挿入したい画像を選択し、その画像の上で右クリックします。すると【画像アドレスをコピー】という項目が出てくるので、それを選択すると取得できます。あとは、先ほどの画像URLを入力する欄に貼り付けるだけです。
URLで画像を挿入した場合、このように画像が表示されます。
「登録メディア」からの画像挿入と比べると、画面いっぱいに大きく画像が表示されています。
本文に画像を挿入する際は、「登録メディア」と「URLで指定」の2つの設定方法と表示の違いを理解した上で、最適な方を選択しましょう！
ヘッダー画像が見切れる場合の対処法
続いて、ヘッダー画像を挿入する方法をお伝えします。
回答フォームの【カラー/デザイン設定】→【カスタムデザインを使用】を選択すると、ヘッダー画像URLを入力する画面が表示されます。ここに登録メディア一覧にアップロードされている画像のURLを入力することで、回答フォームのヘッダーに画像が表示されます。
ヘッダー画像に関しても画像サイズの指定はありません。ただ、「小見出し」「中見出し」の画像表示と違って、ヘッダー画像はサイズによって見切れてしまう可能性があります。
綺麗にヘッダー画像が表示されない場合の対処法は2つです。
1．画像のサイズを変更する
2．カスタムCSSを使用する
1．画像のサイズを変更する
1つ目は、画像そのもののサイズを変更する方法です。画像の縦と横の比率を変更することで、綺麗に表示されるようになります。
ただ、この方法は手間がかかる上、ご自身で作成した画像ではない場合、修正できないという懸念があります。
さらに、パソコンやスマートフォンなど、デバイスの画面サイズによって見え方が異なります。パソコンでは綺麗に表示されていても、スマートフォンで確認すると見切れている可能性があるので注意しましょう！
どのデバイスでも綺麗に表示されるように、画像はあらかじめ余白を作ることをおすすめします。
2．カスタムCSSを使用する
2つ目は、カスタムCSSを使用する方法です。
回答フォームの【カラー/デザイン設定】→【カスタムCSSを使用】を選択すると、CSSのコードを入力する画面が表示されます。ここにヘッダーに関するCSSのコードを入力することで、回答フォームに反映され、ヘッダーが見切れることなく全て表示されるようになります。
カスタムCSSを使用すると、画像サイズの修正も不要なので、手軽に変更することができます。
カスタムCSSを活用した回答フォーム
カスタムCSSは、単にヘッダーのサイズを変更するだけのものではありません。CSSコードを入力することで、既存の機能ではできないカスタマイズが可能になります！
- 文字のサイズや色、フォント、太字、斜体、下線の変更
- ボタンのサイズや色、形の変更
- フォーム部の装飾
- レイアウト変更
- アニメーションの作成
カスタムCSSを使えば、ホームページのWebデザインのように、より自由にデザインをすることができ、おしゃれな申し込みフォームやLPなどが作成できるようになります！
弊社「株式会社REXIL」でも、カスタムCSSを用いた回答フォームを作成しています。
▼カスタムCSSを用いて作成した回答フォーム
カスタムCSSを使いこなすと、このようにハイクオリティな回答フォームを作成することができます！
Lステップは、知識とアイデアを融合することでできることがたくさんあります。せっかくLステップを利用されているのであれば、最大限に活用していただきたいです。
現在、弊社のLINEにご登録いただいた方限定で「Lステップを導入した公式LINEアカウントの事例集」を無料でプレゼントしています！
このプレゼントで、Lステップをさらに活用する方法を解説しています。
Lステップを使ったLINE事例をご紹介しているので、ぜひ受け取ってみてください！
