【アスメル】メルマガ登録フォームをCSSジェネレーターでおしゃれにデザインする方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
アスメル、メルマガ登録、フォーム、CSSジェネレーター、使い方、おしゃれ、デザイン、方法

WordPressサイトを使って情報発信を行い、メルマガ読者を募る際には
アスメルのメルマガ登録フォームを使用すると良いでしょう。

デフォルトの色や大きさをちょっと変えて独自の登録フォームにしたいときには
アスメルのCSSジェネレーターを使いましょう!

メルマガ登録フォームを設定しよう

アスメルでシナリオをつくり、メルマガの発行を始めたなら、
すぐにサイトにメルマガの登録フォームを設置しましょう。

兎にも角にもメルマガの登録フォームを設置しなければ読者は集まらないので
ここはできるだけ早めに行ってしまいたいですね。

アスメルのデフォルトのメルマガ登録フォームは以下のようになっています。

アスメル、メルマガ登録、フォーム、CSSジェネレーター、使い方、おしゃれ、デザイン、方法

悪くはないんですがオリジナリティがないし、
デザインバランスとの兼ね合いなどもあると思うので
もう少し独自性のあるデザインにしたいですよね。

そこで使うのが、アスメルの『CSSジェネレーター』というものです。

これは、プレビューを見ながら自分の好きなデザインの
メルマガ登録フォームを作成することができるとても便利なツールです。

ぜひ自分だけのオリジナルメルマガ登録フォームをつくっていきましょう。

CSSジェネレーターの使い方

さて、ここからはCSSジェネレーターの使い方の簡単な解説になります。

まずはアスメルにログインし、
登録フォームをつくりたいシナリオNoをコピーしてください。

アスメル、メルマガ登録、フォーム、CSSジェネレーター、使い方、おしゃれ、デザイン、方法

 

次に、コピーしたシナリオNoをCSSジェネレーターの赤枠のなかにペーストします。

アスメル、メルマガ登録、フォーム、CSSジェネレーター、使い方、おしゃれ、デザイン、方法

 

ここまでできたら、以下のような表示がでてきます。
下の『プレビュー』を確認しながら、ご自分のお好きなデザインに変更してください。

 

アスメル、メルマガ登録、フォーム、CSSジェネレーター、使い方、おしゃれ、デザイン、方法

 

一通りデザインが決まったら、『CSS付きソースを生成』をクリックします。

 

アスメル、メルマガ登録、フォーム、CSSジェネレーター、使い方、おしゃれ、デザイン、方法

すると決定したデザインのCSSが表示されます。

CSSは二部構成になっています。
これらをそれぞれ、Webサイト内の適切なところに配置していきましょう。

  1. フォームのCSSここから〜ここまで → 『design.css』か『style.css』の最下部にペースト

アスメル、メルマガ登録、フォーム、CSSジェネレーター、使い方、おしゃれ、デザイン、方法

 

2.フォームここから〜ここまで → メルマガ登録フォームを設置したい場所にペースト

 

アスメル、メルマガ登録、フォーム、CSSジェネレーター、使い方、おしゃれ、デザイン、方法

 

こうすることによって、
サイト内の任意の場所にメルマガ登録フォームを設置することができます。

見栄えの良い場所を探して、テーマの編集から配置していきましょう。

メルマガ登録フォームを設置すべき場所

メルマガ登録フォームを設置すべきオススメの場所としては主に2点。
ひとつはトップページで、もうひとつが記事直下です。

この2つが最も反応の良い場所と言われているので、
特に最初の頃には確実にこの2箇所には設置しておくと良いでしょう。

トップページに設置する場合は『header.php』、
各記事内に設置する場合は『single.php』に配置することになりま

こちらのファイル名はWordpressのテンプレートによって異なります。
あなたがお使いのテンプレートにて対応してみてくださいね。

Xeory Baseの場合‥

参考になるかわかりませんが、
バズ部の無料テンプレート『 Xeory Base 』 では以下のように
記事直下にメルマガ登録フォームを設置しています。

 

 

<content>が終わった直後ですね。
このように設置することで、記事直下にメルマガ登録フォームを置くことができています。

 

アスメル、メルマガ登録、フォーム、CSSジェネレーター、使い方、おしゃれ、デザイン、方法

 

すると、記事を読んだ人からのメルマガ登録を見込むことができるのでオススメですよ。

続いては登録フォームの『確定』ボタンを画像に変更する方法です。

もちろんデフォルトでボタンはついていますが、
かなり簡易なものになっているため、気になる方は自作していきましょう。

参考:アスメルのメルマガ登録フォームの『確定』ボタンを画像に変更する方法

無料メールマガジン

画像の説明

公開日:2017/02/12

SNSでもご購読できます。