フォームメーラーをご利用のみなさん、ランディングページ、作ってますか？
フォームメーラーでは有料版の目玉としてランディングページが作れる機能があるんです。知ってましたか？
ランディングページ作成機能の特徴としては
- お手軽操作で短時間に高機能の優れたページが作れてしまう！
- 直感的な操作なのでプログラミングはもちろん、IT技術がなくても誰でも操作可能！
- 用途ごとに用意されたテンプレートを使ってもよし、ゼロから作ってもデザイン性にすぐれたページが作れる！
- Youtube動画やGoogleマップなどをページに簡単に掲載できるのであらゆる情報を伝えられる！
などがあります。
詳しく解説してる記事がありますので是非ご一読ください。
実際にこんな使われ方をしていますよ、という導入事例もあります！
そんな「誰でも簡単にデザイン性の優れたページを作成できる」がウリのランディングページ作成機能ですが、残念なことにどんなデザインでもカンペキに思い通りに作れるほど万能ではありません。
多くの方に使ってもらっている中で、ランディングページ作成機能への様々なご意見、ご要望をいただいています。
そんなご要望の中で特に多いのが、デザインの調整に関わることです。
本格的にランディングページのデザインを突き詰めようとすると、フォームメーラーではできない・・と感じられるお客様も少なくないようです。
フォームメーラーでは、ランディングページのUIツール（WYSIWYGエディター）に、他社のツールを利用しています。ご利用いただければわかる通り、大変優れた素晴らしいツールなのですが、一方で他社ツールなので思い通りにカスタマイズできるわけではありません。
また、いろんなことができるよう、多機能にすればするほど、機能もUI（ユーザーインターフェース）も複雑になり、誰でも使いこなせるツールであり続けるのが難しくなってしまう、という心配もあります。
じゃあランディングページのデザインは何がなんでも変更できないのか？というと・・・
色々頑張ればできないこともない
です。
前置きが長〜〜〜〜〜くなりましたが、今回はその方法をお伝えしようと思います！
Googleタグマネージャーを使って色々やってみる
ランディングページのデザインを調整するのにはどうするか？
その答えは「Googleタグマネージャーを使う」です。当ブログでは何か困るとGoogleタグマネージャーに処理を押し付けると定評がありますが、今回もそのパターンです！
そもそもGoogleタグマネージャーが何か知らないという方は過去に当ブログで紹介記事を作成していますので、ぜひご一読ください。
例によって、今回の記事の内容は「こういうやり方もあるから、できそうな人は試してみてね」という「参考記事」なので、フォームメーラーとして公式に推奨しているわけではありません。
詳しい設定方法をお問い合わせいただいてもフォームメーラーではGoogleタグマネージャーの設定をお手伝いすることはできませんので、GoogleタグマネージャーとCSSにそれなりに知識のある方は試してみてくださいね、というニュアンスでお伝えしています。
悪しからずご了承ください。
それでは今回は3つのケースでランディングページのデザインを変更してみましょう！
最初に必須の知識
ランディングページにCSSの調整を行うには、CSSを指定するためのクラスなどセレクタが必要です。
ランディングページのセレクタを確認するにはブラウザの開発ツールを使いましょう。
GoogleChromeであれば「F12」を押すことで開発ツールを起動することができます。
今回見本として以下のランディングページを作成しました。実際に動作を確認できますのでご覧ください。
https://campaign.form-mailer.jp/magazine
では次から実際にいくつか例を紹介します。
ヘッダーがスクロールに付いてくるようにする
Webサイトでよくあるアレです。画面を縦にスクロールしてもヘッダーが画面上部に固定されて付いてくるようにできます。
CSS指定はこんな感じです。ヘッダー要素は「section-header」クラスが使われているので指定はそこまで難しくありませんね。
.section-header {
position: sticky;
top: 0;
width: 100%;
}ランディングページの送信ボタンの色を変更する
要望で多くあるのが送信ボタンの色を変えたい、というもの。
これはテンプレートの一部として考えているので色の変更はできないんです。
このテンプレートは使いたいのにボタンの色が・・という方におススメです。
CSS指定はこんな感じ。実はランディングページの送信ボタンはCSSでかなり細かく色が指定されています。「#4169e1」は色コードですね。他の色にしたい場合やグラデーションを付けたい場合などは色コードを必要に応じて変えましょう。
.form-btn-submit {
--bs-btn-bg: #4169e1;
background-image: linear-gradient(to right, #4169e1, #4169e1);
}フォントを変えたい
ランディングページではフォントの種類を変えることができません。
今回はフォントを「明朝体」に変えてみます。他にもフォントの大きさや色もCSSを駆使することで既存機能にはできない細かい調整ができますので試してみてください。
今回はh3タグの文字全てを指定しています。一部のテキストやページ全体に指定したいときはセレクタを変える必要があります。
h3 {
font-family:serif;
}CSSで明朝体を指定するときは「serif」とするんですが、自分が使いたいフォントの指定は色々と調べてみてください。
要素同士の間隔を調整する
エレメント同士の間隔をもっと狭めたい、広げたい、そんなご要望もよくいただきます。
改行や空白を駆使して調整されている方もいらっしゃるようです・・・
もちろんmarginを指定することもできます！
こんな感じで要素同士をくっつけることもできます。
ただmarginは複数の要素を指定する機会が多い事を考えるとセレクタの指定が難しいかもしれません。
CSSで適格に狙った要素を指定できる自信のある方は挑戦してみてください
.image_block {
margin: -12px;
}今回は見てすぐわかるように画像同士の間隔を調整しましたが、実際にはページ要素同士の上下の間隔を調整するときに役立ちそうですね。
注意！
一点注意して欲しいことがあります。
フォームメーラーのHTMLタグにはエレメントごとにIDが降られており、HTMLコード上もid属性として固有の番号が振られています。しかし、LPの要素を1つでも編集するとページ上のエレメントに振られたidは全て変わってしまう仕様です。CSSで指定する場合はidを使用しないよう注意してください。
Googleタグマネージャーはうまく使うと複数のランディングページでCSSの指定を使いまわしたり、ランディングページに手を入れることなくタグマネージャー上で調整できたりと非常に強力に使えるツールです。
フォームやランディングページの可能性をさらに広げることが可能ですので、色々と試してみるのもいいかもしれませんね。
Googleタグマネージャーとランディングページ作成機能はどちらもPro版/Business版で利用可能です。
Business版は名前とメールアドレスのみで登録できて、14日はそのまま使用可能ですのでぜひ一度ランディングページ作成機能とGoogleタグマネージャーの設定を試してみてください。
Business版の登録はコチラから！