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

2020年8月9日2024年6月12日

メルマガへ登録してもらうためには、メルマガの登録フォームを設置する必要があります。方法は色々ありますが、この記事では、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)]をクリックします。

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

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

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

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

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

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

ブロックエディターの場合

ブロックの[カスタムHTML]をクリックして、挿入します。

ＨＴＭＬの枠が挿入されます。

ＨＴＭＬの枠に、コピーしたコードを張り付け（ペースト）します。

プレビュー画面で確認します。

旧エディター（クラッシックエディター）の場合

WordPressのエディターをコードエディターに変更します。

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

WordPressのエディターをビジュアルエディターに戻します。

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

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

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

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

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

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

例）今回用意したボタン（サイズ：200pixel X 56pixel）

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

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

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

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

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

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

画像ボタンの挿入

MyASPのヘルプ

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

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

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

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

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

次のように修正します。

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

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

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

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

以上です。

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

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

りんごからのお知らせ

MyASPを契約して、いざ設定と思ったけど！思いのほか苦労していませんか？そんなお悩みを解決する「メルマガ配信のための手引き書」とそれを支援するサブスクのサポートコミュニティを作りました（^^）。

メルマガアフィリエイトの一連のシステムを構築するために必要な作業について順序だててご案内しているメルマガアフィリエイトに取り組むための作業マニュアル＆サポートです。

「無料レポート作成」,「LPの作成」,「メルマガの作成」,「ASPの登録」を誰でもわかるレベルを目指して解説＆サポートします。
あなたも「サブスクのコミュニティに参加」してメルマガアフィリエイトをスタートさせましょう！

＼画像をクリック／
＊紹介ページに移動します。
＊販売目的のためのリンクが設定されています

紹介動画YouTubeへ↓↓↓

詳細は案内メルマガで(^o^)ﾉﾞ↓↓↓↓↓

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

お願い記事内の不具合や間違い等をお知らせください。 （キャプチャーの違い、古くなった情報、誤字脱字等些細なことでもかまいません）
↓↓↓↓↓↓↓↓
＊お知らせいただいた方にはりんごからささやかなお礼を送らせていただきます。