画像の説明

DRM

【アスメル】メルマガ登録フォームを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ジェネレーター、使い方、おしゃれ、デザイン、方法

 

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

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

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

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

画像の説明

関連記事

  1. パソコン、Mac、Windows、どっち、おすすめ、使いやすさ、比較

    Mac

    パソコン買うならMacかWindowsどっちがおすすめ?使いやすさを比較!

    最近は本当に色々なPCが登場していて、家電量販店なんかに行っても物凄い…

  2. セールスレター,LP,Wordpress,テンプレート,Colorful,オススメ

    DRM

    セールスレターでLPつくるならWordPressテンプレート『Colorful』がオススメ

    DRMを行っていると、セールスレターを使うことが多々あります。でもセー…

  3. Hitomi、インターネットビジネス、multi entrance studio、マルエン、プロモーション、DRM、企画

    DRM

    保護中: フロントエンドプロモーションで私がやったこと全て。

    このコンテンツはパスワードで保護されています。閲覧するには以下にパ…

  4. ダイレクト出版、年間購読、レビュー、口コミ

    DRM

    ダイレクト出版の年間購読、半年経って再レビュー!|年間購読の価値はあるか?

    昨年の10月からダイレクト出版の年間購読をしています。ダイレクト出版の…

  5. ツール

    File Zillaのインストール方法からエックスサーバでの初期設定方法を解説!

    独自ドメインで自分のメディアを運営する際に必ず必要になる、大事なツール…

  6. Twitter,タイムライン,アイキャッチ,画像,表示されない,解決,方法

    DRM

    Twitterのタイムラインにアイキャッチ画像が表示されない!を解決する方法

    Twitterにブログ記事などのURLを紹介したいときに、URLを貼り…

PRESENT

Hitomiefu,インターネットビジネス,無料プレゼント,Canvas

MAIL MAGAZINE

MAIL MAGAZINE

Twitter

LINE@

Hitomi、LINE@、登録
  1. ネットビジネス,収益,基盤,づくり,どれくらいかかる,期間

    よくある質問

    ネットビジネスで収益の基盤づくりにはどれくらいかかる?
  2. トレンドアフィリエイト、インストール、便利、携帯アプリ

    トレンドアフィリエイト

    トレンドアフィリエイトをするのにインストールするべき便利な携帯アプリまとめ
  3. 記事内、アドセンス広告、Adsense Manager

    プラグイン

    記事内にアドセンス広告を設置するAdsense Managerの設定方法を解説
  4. Google

    ネットビジネスをする上で必須のGoogle機能まとめ|Googleをビジネスに存…
  5. ぺこ、りゅうちぇる、嫌われない理由、自分の意志、男らしい

    アーティストから学ぶ

    ぺこ&りゅうちぇるが嫌われない理由は、見た目と中身のギャップだと思う
PAGE TOP