登録ページにロゴ画像を掲載するには?

登録フォームに、登録してもらうサービスのアイコンやロゴ画像などのイメージを掲載してみましょう。
メインカラーやデザインの統一感で、利用者からより信頼を得やすい表現をすることができます。

オレンジフォームのヘッダ&フッダ編集から、追加することができます。

登録フォームにアイコンやロゴ画像を掲載する方法

1. 使用する画像のリンクを取得します

ウェブページで公開済の画像を用意します。

登録してもらうメルマガやサービスのアイコンなどに、使用したいイラストやロゴ画像をご用意ください。
既にご自身で作成済のものや著作権フリーの画像ファイルを使用します。
素材を加工する場合は、再配布など禁止されていることに注意しましょう。

画像ファイルは、公開していて外部からアクセスできる(ブラウザで見られる)ならば、その画像のアップロードされている場所のURLを取得してimgタグとともにヘッダ&フッタ編集に記載すると、フォーム上に表示することができます。

ランディングページやホームページなどで既に作成しご自身で運用・公開しているものや、ダウンロードしウェブ表示用にサイズなどを加工済のフリー素材を、公開できるファイル共有サーバーにアップロードして準備しておきます。

オレンジスピリッツのロゴ画像を例にご説明します。

 

ご自身のサイトやなどの画像の中から、フォームに使用したい画像の上で右クリックをします。

表示されるメニューから「画像アドレスをコピー」を選んで、画像のURLをクリップボードにコピーします。
テキストエディタなどに貼り付けてください。

※「リンクのアドレスをコピー」を選択してしまうと、クリックして開かれるリンク先の別ページのURLがコピーされます。
「画像アドレスをコピー」を選択して、画像がアップロードされている場所のURLを取得します。

 

2. ヘッダ&フッタ編集を開きます

フォーム設定>[登録ページ (ヘッダ&フッタ編集)]をクリックして開きます。

ロゴ画像やアイコンを、今回はヘッダーに追加します。

 

3. ヘッダーに画像を表示します

フォーム設定>[登録ページ (ヘッダ&フッタ編集)]の「ヘッダー」部分に画像ファイルのHTMLソースを追記します。

<img src="https://使用したい画像のURL/">
  • 「<img」から始まるimg要素の中の「src="」以降に、クリップボードにコピーした画像アドレスを貼り付けます。
    画像アドレスは、「"」(ダブルクォーテーション)で囲んでください。
  • 今回はフォームの上部、一番上に設定します。

編集が完了したら、「更新」ボタンを押して保存します。

 

「登録ページを更新しました。」(①)と表示されるのを確認します。

 

「フォーム表示」(②)をクリックして、登録フォームを表示し確認します。

ロゴ画像が登録フォームの上部、ヘッダーの一番上に表示されます。

 

【まとめ】

公開済の画像アドレスを取得し、登録フォームのヘッダーにHTMLタグを使って表示する方法をご説明しました。
サービスやメルマガを覚えてもらいやすくなりますね。


お問い合わせは、お問い合わせフォームよりお願いいたします。

記事はいかがだったでしょうか?
ご意見・ご感想をお聞かせください




Powered by このフォームは『オレンジフォーム』で作成しています