メール配信システムMyASP(マイスピー)でメルマガ登録フォームをWordPressの記事内に設置、さらにボタンをカスタマイズする方法

2020年8月9日

メルマガへ登録してもらうためには、メルマガの登録フォームを設置する必要があります。方法は色々ありますが、この記事では、WordPressの投稿記事(または固定ページ)内に、MyASPのメルマガ登録フォームを設置する方法をご紹介します。 MyASPには予め何パターンかのフォームレイアウト(デザイン)が用意されていますが、さらに[確認ボタン]等を自分好みのボタンにカスタマイズする方法もご紹介します。

 操作は、なるべく初心者でも実施できるよう簡単な方法で、噛み砕いて解説してあります。是非挑戦して、メルマガ登録率のアップにお役立てください。

*この記事を読む前にまず以下の記事を参照ください、基本的なMyASPのフォーム設置について記載しています。
↓↓↓↓↓↓↓
メール配信システムMyASP(マイスピー)でメルマガ登録フォームを設置する[初心者向け]

 

マイスピー のユーザーマニュアル

マイスピー のユーザーマニュアルに記載されている、該当の箇所を紹介します。

【はじめてのMyASP(マイスピー)その4】登録フォームについて

こちらのマニュアルページの以下の箇所に、フォームデザインの方法と、登録フォームを外部ページに設置する方法が記載されています。

登録フォームの送信ボタンを違うデザインにしたい

登録フォームの送信ボタンを違うデザインにしたい場合は、以下のマニュアルに記載されています。

MyASPマニュアルの該当ぺージ

登録フォームの送信ボタンに画像を使用することでデザインの変更を行うことが出来ます。主に2通りのやり方がありますので、用途に応じて選択してください。

1. 背景画像を利用する

ボタンの背景画像として任意の画像を指定する方法です。この方法の場合は、通常のボタンと同じく画像とは別にボタンに乗せる文言を記載することができます。

登録フォーム内の以下のタグを探し

<input type=”submit” value=”登録する” />

次のように修正します。

<input type=”submit” value=”登録する” style=”background-image: url(‘(使用したい画像のURL)’);” />

これで背景画像を利用した登録ボタンが作成できます。(※ボタンに使用したい画像はご用意ください)

この方法で作成したボタンは以下のような表示になります。

2. 画像ボタンを利用する

また背景画像ではなく画像そのものをボタンとする方法があります。

この方法の場合は上に文字を置くことができないので、画像として表示したいボタンのデザインを完成させておく必要があります。テキストのデザインまで凝りたい場合はこちらのほうがオススメです。

背景画像の場合と同様に登録フォーム内の以下のタグを探し

<input type=”submit” value=”登録する” />

次のように修正します。

<input type=”image” src=”(使用したい画像のURL)” alt=”登録する” />

これで画像ボタンを利用した登録ボタンが作成できます。
(※ボタンに使用したい画像はご用意ください)

この方法で作成したボタンは以下のような表示になります。
画像、マイスピー のボタン

 

 

WordPressへフォームを設置する方法

では、上記の方法で、MyASPのフォームWordPress内に設置する方法をご紹介します。
*基本はHTMLのコード貼り付けなので、貼り付け先はWordPressでなくとも同じようにできます。
*この記事ではより初心者の方が取り組みやすい方法でご案内していますので、色々操作ができる方は予めそのつもりで参照ください。

 

【設置例】こんな風に誘導して、文末に設置します。
*メルマガ登録フォームへのリンクを貼るより、直接的で登録率もアップします(^^)

キャプチャー、メルマガ登録フォーム

では、早速設置方法について解説します。

 

MyASPでメルマガフォームのHTMLコードを入手

まず、MyASPでメルマガフォームのHTMLコードを入手します。

管理メニューから、[登録フォームデザイン]>>[登録フォームタグの発行(HTML)]をクリックします。

キャプチャー、マイスピー の設定一覧

コードコピー用のウィンドウが表示されます。
改行ありを選択(そのまま)したままで、[コピー]ボタンをクリックします。

キャプチャー、HTMLのコピー

コピーしたコードをいったん、メモ帳(テキスト)等に貼り付けておいてもかまいません。

貼り付け用のコードは以下のようなものです
*マーキング部分は変更できます。

キャプチャー、貼り付けコード

 

WordPressの画面で、メール登録フォームを貼る場所を作る

(コードを入手する前に作成しておくほうがおすすめです、すぐコード貼り付けができるので)

あらかじめ、[メルマガ登録]への誘導を作成しておきます。

例)ブロックは「段落」で作成

キャプチャー、メルマガ登録の誘導

WordPressのエディターコードエディターに変更します。
キャプチャー、コードエディターに変更

現在入力しているコードの一番下に、コピーしたコードを貼り付けます。

キャプチャー、コード挿入

WordPressのエディターをビジュアルエディターに戻します。
キャプチャー、エディターをビジュアルに

エディターでは、間延びした表示になりますが、

キャプチャー、エディター表示
プレビュー画面で確認すると、登録フォームが表示されます。
キャプチャー、プレビュー画面
これで設定は完了です。
実際に登録を実施してテストしてみましょう(^^)
 
 
さらに、もうちょっと頑張るかたは以下をどうぞ

[確認する]ボタンのカスタマイズ

[確認する]ボタンのカスタマイズを、マイスピー のマニュアルにある方法で実施してみます。

使用するボタンのダウンロード

まず使用するボタンを無料(著作権フリー)素材のダウンロード用サイトから入手します。
*ダウンロードは各サイトの利用規約を確認してください

*ボタンサイズ:横幅200px〜300pxが無難ですが、設置するフォームに合わせて調整してみてください
*画像サイズの変更方法は後述しています、一度以下の方法で設置してからの変更が簡単です。

例)今回用意したボタン(サイズ:200pixel X 56pixel)
キャプチャー、ボタンのダウンロード

 

 

ボタンをメディアライブラリーにアップロード

入手した画像ファイルを、メディアライブラリーにアップロードします。

WordPress管理画面の左サイドバーで [メディア]>>[新規追加]をクリックします

キャプチャー、メディアにアップ

表示されたメディアのアップロード枠にダウンロードしたファイルをドラッグ&ドロップしてアップロードする。

キャプチャー、ファイルアップ

アップロードされたファイルがアップロードエリアの下に表示されます。
ファイル一覧の右にある[編集]をクリックします。

キャプチャー、ファイル編集

 

メディアを編集の画面が表示されます。右欄の [ファイルのURL]に記載されているURLをコピーします。

キャプチャー、URLコピー

 

画像ボタンの挿入

MyASPのヘルプ

2. 画像ボタンを利用する

また背景画像ではなく画像そのものをボタンとする方法があります。

この方法の場合は上に文字を置くことができないので、画像として表示したいボタンのデザインを完成させておく必要があります。

背景画像の場合と同様に登録フォーム内の以下のタグを探し

<input type=”submit” value=”登録する” />

次のように修正します。

<input type=”image” src=”(使用したい画像のURL)” alt=”登録する” />

これで画像ボタンを利用した登録ボタンが作成できます。
(※ボタンに使用したい画像はご用意ください)

上記を参照して、コードを書き換えます。
*今回、ボタンは「確認する」ボタンを変更します。

キャプチャー、コード修正

記事を[公開]状態にして(または[更新]して)、表示状態を確認します。

キャプチャー、メール登録フォーム

以上です。

 

画像のサイズ変更の仕方
設置した時に、画像のサイズが大きい場合の、サイズ変更の方法です。
*画像は使用サイズにぴったりのものがない場合必ずサイズの大きいものをダウンロードしましょう
*大きいサイズを小さくして使用できますが、逆は画像が劣化するのでお勧めしません
*一度設置してみて、大きさの確認をしてからの変更がお勧めです

ご紹介するのは、WordPressの中で簡単にサイズ変更できる方法です、その他のアプリ(フォトショプなど)をお持ちでサイズ変更が可能な方はそちらを使用してかまいません。

①メディアライブラリーで画像を選択します。

キャプチャー、メディアライブラリー

②画像の下にある、[画像を編集]ボタンをクリックします。

キャプチャー、画像編集

③画像縮尺の変更欄を確認します、今のサイズが表示されています。

キャプチャー、画像の縮尺

④新規サイズ欄に変更後のサイズを入力し、[縮尺変更]ボタンをクリックします。
*左側の幅のみ入力すると、右側の高さは自動的に変更になります
*変更する時は実際に表示してみながら、徐々に小さくしましょう。一度に小さくしないよう注意しましょう、小さくしたサイズを大きくするのはお勧めしません。

キャプチャー、サイズ変更

⑤上部に[画像を保存しました]と表示されます。
右上の x  ボタンで画面を閉じます。

*画像サイズの変更方法は後述しています。

これで画像のサイズ変更は完了です、実際の表示を確認してください。
まだ大きい場合は、同じ操作を繰り返します。

 
 
 

*MyASPのマニュアルには、「1. 背景画像を利用する」という修正方法も紹介されています。こちらは文字の大きさを調整する必要があるので、今回は省略しました。
CSS知識があって、カスタマイズできる方はお試しください(^^)

 

 

メルマガのまとめページはこちら
*メルマガの構築&運用方法についてのまとめサイト
↓↓↓↓↓↓↓
メルマガアフィリエイト:伝わるメルマガのポイントを徹底解説

りんごからのお知らせ

こんにちは、Ringoです。岡山県真庭市というところで、非常勤のデザイン講師をしながら、ブログ&アフィエイトビジネスに奮闘中です。

このブログと連携して「ゆとりのシニアライフを実現させる」をテーマにメルマガを配信、シニア&初心者向けにネットビジネスの進み方をお伝えしています。
経済的にも心にも「ゆとり」をもたらす収入をゲットしませんか!
イラスト、葉っぱ付きりんごを持ったおじさんとおばさん ブログを作ったけどアクセスが無い!、アフィリエイトの成果が出ない!
そんなあなたは必見ですよ
SNSやネット活用の実践講座を交えた実りいっぱいの無料メルマガです。

お申し込みはこちらのボタンをクリック、是非この機会に(^o^)ノ゙
↓↓↓↓↓↓↓↓↓↓ バナー、りんごメルマガ登録用 *詳細ページが表示されます、すぐにメルマガ申し込みはされません

よろしければ、この記事やブログに関する 感想・聞いてみたいこと・要望などなどお聞かせください。内容と関係ない雑談も大歓迎です(^^)
↓↓↓↓↓↓↓お気軽にo(^-^)o♪
yoko_takano@appli.redまたは お問合せ