アスメル、メルマガ登録、フォーム、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. トレンドアフィリエイト、Googleアナリティクス、アクセス解析方法
  2. DRM

    Macで一度落としたアプリをアンインストールする|AppCleanerの使い方

    一度インストールしたアプリをアンインストールするアプリには様々なものが…

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

    DRM

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

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

  4. ツール

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

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

  5. Facebookページ,作成,方法

    DRM

    Facebookページを作成する方法|あなたのWEBサイトにファンを募ろう!

    情報発信を始めるときには、ぜひFacebookページを作成しましょう。…

  6. 仕事、頑張らなきゃ、頑張らない生き方

    DRM

    仕事は頑張らなきゃという考え方を捨てて、頑張らない生き方を目指そう。

    仕事に対する価値観は人それぞれかと思いますが、私は仕事というのは自己実…

Twitter

  1. インターネットビジネス,情報商材,選び方,メンター,ノジー,Hitomi

    DRM

    インターネットビジネスにおける情報商材の選び方とメンターについて|ノジーさん×H…
  2. 尾崎豊,息子,現在,歌,声,社会起業家,,夢

    アーティストから学ぶ

    尾崎豊の息子現在の歌声と社会起業家としての夢|情熱をもてることを仕事にする
  3. トレンドブログ、複数運営、サイト、収益、管理、方法、Googleアドセンス

    Google

    トレンドブログを複数運営する際のサイト収益管理方法|Googleアドセンス
  4. ポケモンGO,子供,怖い,スマホゲーム,やりすぎ,コミュニケーション,懸念

    マインドセット

    ポケモンGOを子供にやらせるのは怖い?スマホゲームのやりすぎとコミュニケーション…
  5. 連休明け、仕事、行きたくない、やる気が出ない、人生を見直す、きっかけ

    起業して人生豊かに

    連休明けの仕事に行きたくない、やる気が出ないときこそ人生を見直すきっかけに。
PAGE TOP