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

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. コミュニケーション、スキル、能力、人生、ビジネス、武器

    DRM

    コミュニケーションスキルは全てのビジネスに通ずる武器である

    DRMを始めとする全てのビジネスをしていくうえで、コミュニケーションは…

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

    Mac

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

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

  3. 自由、ライフスタイル、手に入れる、読むべ、本、必読書、紹介、ノジー、Hitomi、対談

    DRM

    自由なライフスタイルを手に入れるために読むべき本を紹介|ノジーさん×Hitomi対談

    『今の自分は、本当にこのままで良いのだろうか』と思ったとき、どのように…

  4. Google Analyticsの導入と設定方法

    ツール

    Google Analyticsを導入しトラッキングコードを取得する方法

    サイトを運営していく中で必ず設定しておくべきツールやプラグインがいくつ…

  5. ノジー,ホシノマオ,Hitomi,対談,アスクミー,面白い,読みたい,メルマガ,条件

    DRM

    ノジーさん×ホシノマオさん×Hitomi対談|面白い、読みたくなるメルマガの条件とは?

    私のメンターであるノジーさん、そして同じコミュニティ仲間のホシノマオさ…

  6. ツール

    Awesome Screenshotのインストールと使い方を解説!|便利なスクリーンショット機能

    こんにちは!HITOMIです。ネットビジネスを行っていると画像の簡単な…

Twitter

  1. ホリエモン,多動力,レビュー,ノマド,仕事,スマホ,完結

    読書

    ホリエモンの『多動力』レビュー。ノマドの仕事はスマホで完結させよう!
  2. インターネットビジネス、ゆきてる、無料レポート、Affiliater's Studio

    紹介

    【ゆきてるさんの無料レポートを熟読】Affiliater’s Stu…
  3. アドセンス広告、クリック率、1%以上、配置位置

    トレンドアフィリエイト

    アドセンス広告のクリック率1%以上を維持する配置位置とポイントを解説
  4. Facebookページ、イイネ、増やす、LikeBox、設置方法、Page Plugin、使い方

    Facebook

    Facebookページへのイイネ!を増やすLikeBoxの設置方法|Page P…
  5. 東京タラレバ娘、現実的、恐怖、アラサー、女性、タラレバ、意味ない

    アーティストから学ぶ

    東京タラレバ娘を見て現実的な恐怖を覚えるアラサー女性多発|『タラレバ』に意味はな…
PAGE TOP