メルマガ登録フォームのデザイン！WordPressプラグインMailPoet Newslettersボタン：CSSカスタマイズ

メールマガジンの購読者を増やすため、WordPressプラグインMailPoet Newslettersをいれたら、ボタンのデザインがどうも栄えない！『もっと見栄えをよくしたい』とお考えでしたら、このページのCSSをコピペして、メルマガ登録フォームを見やすくしてください＾＾

導入済み・使用中の方に、フォームのデザインのみ。またWordPressレスポンシブデザインのテーマが非常に多いので、レスポンシブデザイン用のコードを紹介しますね。

Simplicity2・STINGERPLUS・Gushなど対応確認済み。Twenty Seventeen・Stinger5はPCビューの幅が狭い画面の一部領域（2カラム・3カラムでコンテンツ幅が狭くなるサイト）では修正が必要。

MailPoet Newslettersメルマガ登録フォームのみ初期設定

メール入力フォームは、メールアドレスの文字をフォーム内に入れたほうがスッキリするので、プラグインの設定から変更してください。

MailPoetのメルマガ登録フォームの編集

ダッシュボードの『MailPoet』－『設定』ー『フォーム』と順に選択し『編集』をクリック。

入力フォームのラベル：メールアドレスの文字など編集

メールアドレス欄にマウスを置いたら、表示を編集をクリック。

『ラベルの文字』と『入力内にラベルを表示』の変更ができるので、入力内に表示を『はい』にすると、スッキリします。

ボタンラベルの変更場所

送信ボタンの文字変更

ここで購読❕から、任意の文字に変更できます。変更したら、最後に『保存』をクリック。

これで下準備が完了したので、デザインを変更していきます。

メルマガ登録フォームのデザインをCSSでカスタマイズ

CSSでカスタマイズするのですが、入力フォームとボタンだけではインパクトに欠けるので、それらを囲む大枠をHTMLで足しました。

カスタマイズ前後の見栄えをチェックしてください。※Simplicity2でカスタマイズしたため、Simplicityのスタイルも反映されてます。元のテーマのスタイルは反映される作り方

カスタマイズ前のメルマガ登録フォーム

カスタマイズ後のメルマガ登録フォーム

色や背景は自由に変更できますが、オススメしてる感が増したのがわかりますよね＾＾

メール入力フォームに画像を入れたバージョン

メールアドレス入力欄に画像を入れるとわかりやすいかと思い、画像を入れたデザインと入れないデザイン2つご用意しますね。※完全レスポンシブデザインではない場合で、横幅の狭いテーマはwidth・paddingの調整が必要。Twenty Seventeen・Stinger5など

メール入力フォームに画像なしレスポンシブデザイン

Simplicity2で試した下記コード、メルマガ登録フォームデザイン

/*全てを囲む大枠*/
.w-mail-form {
	width: 80% !important; /*横幅*/
	margin: 40px auto; /*上下の余白40px両サイドは真ん中揃えに*/
	border: solid 1px #ddd;
	padding: 30px; /*内側余白：画面幅にあわせて指定*/
	background-image: url(http://画像のパス.pngまたはimg/img-name.png); /*背景を画像にしない場合background: #ddd;薄いグレーなど色指定*/
	font-size: 4vmin; /*メールマガジンを購読しませんかのフォントサイズ*/
	line-height: 1.3; /*行間*/
	text-align: center; /*文字中央寄せ*/
	font-weight: bold; /*文字を太く*/
}
/*入力フォームのエリア*/
.wysija-paragraph {
	width: 80%; /*入力フォームの幅*/
	margin: 32px auto; /*外側上下余白32px：真ん中寄せ*/
}
/* 入力フォーム内部の指定 */
.wysija-paragraph input[type="text"] {
	border: 1px solid #dedddd;
	border-radius: 2px;
	box-shadow: 1px 1px 1px #727272 inset;
	color: #333;
	font-size: 3vmin;
	padding: 6px 12px;
	width: 100%;
	box-sizing: border-box;
}
/*入力ボタン*/
.wysija-submit {
	width: 85%; /*幅*/
	margin: 30px auto; /*上下余白30px：両横は真ん中寄せ*/
	height: 11vmin; /*高さ*/
	font-size: 5vmin;
	background: #dd212e !important; /*背景色*/
	color: #fff !important; /*文字の色*/
	border: 1px #b4b2b2 solid !important;
	box-shadow: 5px 5px 7px -4px #543232;
	line-height: 1.5;
	padding: 6px 6px;
}
/*見栄え変更ポイント*/
@media screen and (max-width: 500px) {
	/*全体の囲い枠*/
	.w-mail-form {
		width: 90% !important;
		padding: 15px;
		font-size: 20px;
	}
	/*入力フォーム内の指定*/
	.wysija-paragraph input[type="text"] {
		font-size: 16px;
		padding-left: 64px !important;
	}
}

※プラグインが指定している場所は優先順位が高いので、!importantをつけて優先度を上げるワケです。※テーマで先に指定されて、反映しない場合も同じように付けると反映する。

7行目は背景を画像にした場合です。background: #ddd;など背景色を指定するとボテっとするので、画像を入れてます。

PCビューで分かりやすいですが、このブログで使っている背景を使用した例で、素材提供先は下記です。

LINK 布地の背景素材::フリー素材*ヒバナ *

※CSSが反映しない場合、キャッシュを削除！

※画像が面倒な場合、後述見出し『グラデーション』へ。

※HTMLを見る場合、見出し『大枠になるHTMLの指定』へどうぞ。

メール入力フォームに画像を入れたい時のCSS

画像のサイズは文字サイズにもよりますけどフォームより大きめ、（タテ40～50px程！？）にしてアップロードしてください。縦幅がピッタリ入るようCSSで調整してます。※スクリーンプレッソで加工しました。

横幅は使う画像によって調整が必要ですから、22・55行目で微調整してください。※Twenty Seventeenなどはメディアクエリによる自力修正が必要

Simplicity2で試した画像ありメルマガ登録フォーム下記コードの見た目

/*全てを囲む大枠*/
.w-mail-form {
	width: 80% !important; /*横幅*/
	margin: 40px auto; /*上下の余白40px両サイドは真ん中揃えに*/
	border: solid 1px #ddd;
	padding: 30px; /*内側余白：画面幅にあわせて指定*/
	background-image: url(http://画像のパス.png); /*背景を画像にしない場合background: #ddd;など色指定*/
	font-size: 4vmin; /*メールマガジンを購読しませんかのフォントサイズ*/
	line-height: 1.3; /*行間*/
	text-align: center; /*文字中央寄せ*/
	font-weight: bold; /*文字を太く*/
}
/*入力フォームのエリア*/
.wysija-paragraph {
	width: 80%; /*入力フォームの幅*/
	margin: 32px auto; /*外側上下余白32px：真ん中寄せ*/
}
/* 入力フォーム内部の指定 */
.wysija-paragraph input[type="text"] {
	background: #fff url(http://画像のパス.png) no-repeat top left;
	background-size: contain; /* 画像が幅からはみ出ないよう指定 */
	padding-left: 12vmin !important; /*画像横幅によって数値・変更必須：PCサイズで確認*/
	border: 1px solid #dedddd;
	border-radius: 2px;
	box-shadow: 1px 1px 1px #727272 inset;
	color: #333;
	font-size: 3vmin;
	padding: 6px 12px;
	width: 100%;
	box-sizing: border-box;
}
/*入力ボタン*/
.wysija-submit {
	width: 85%; /*幅*/
	margin: 30px auto; /*上下余白30px：両横は真ん中寄せ*/
	height: 11vmin; /*高さ*/
	font-size: 5vmin;
	background: #dd212e !important; /*背景色*/
	color: #fff !important; /*文字の色*/
	border: 1px #b4b2b2 solid !important;
	box-shadow: 5px 5px 7px -4px #543232;
	line-height: 1.5;
	padding: 6px 6px;
}
/*見栄え変更ポイント*/
@media screen and (max-width: 500px) {
	/*全体の囲い枠*/
	.w-mail-form {
		width: 90% !important;
		padding: 15px;
		font-size: 20px;
	}
	/*入力フォーム内の指定*/
	.wysija-paragraph input[type="text"] {
		font-size: 16px;
		padding-left: 64px !important; /*画像の大きさによって指定を変更必須：スマホビュー*/
	}
}

7行目は背景を画像にした場合です。background: #ddd;など背景色を指定するとボテっとするので、画像を入れてます。

20行目は入力フォームに入れるメール画像やメルマガ画像をアップロードした画像のパスを入れてください。

画像の提供先は、下記。

LINKメールマガジンイラスト｜無料イラストなら「イラストAC」

大枠の背景を画像ではなくグラデーションに変更

背景グラデーションにした場合

.w-mail-form {
	background-image: none;
	background: linear-gradient(#fff5f5, #ffc2c2);
}

背景はbackground: linear-gradient(#上の色指定, #下の色指定);このようにグラデーションを入れても良いかもしれません＾＾　配色センスはあなたに任せますｗ

大枠になるHTMLの指定

投稿ページ固定ページに単独ではる・テーマのウィジェット使う場合

WordPressビジュアルではなくテキストエディタに下記のように貼り付けてください。

<div class="w-mail-form">メールマガジンを
購読しませんか＾＾
[wysija_form id="1"]
</div>

[wysija_form id="1"]はショートコードをクリックしたら確認できます。

ショートコードの確認場所

ウィジェット使うの場合、WordPress4.8の仕様変更でやたらbrやpタグ段落改行が入ります。

ウィジェットWordPress4.8の仕様で段落改行が入った例

その場合グーグル検索でWordPress4.8の仕様　段落無効と入れたらカスタマイズ方法があるのでチェックしてくださいね。※WordPressバージョン4.8.1で改善される見込み

一括で投稿・固定ページで記事下に入れたい場合

ウィジェットで指定できる箇所がないテーマの場合、記事下にメルマガ登録フォームを置きたい場合は、single.php：やpage.php：個別投稿ページを直接さわります。

※下手すれば画面が真っ白になるのでバックアップをとってると安心。

• Ctrl+Fキーで<?php the_content();を検索。

<?php the_content(); ?>これが記事を呼び出すコードです。この下にコードを貼り付けます。

<div class="w-mail-form">メールマガジンを
購読しませんか＾＾
<!-- ここにHTMLを貼る -->
</div>

下記のようになればOK！

<?php the_content(); ?>
<div class="w-mail-form">メールマガジンを
購読しませんか＾＾
<!-- ここにHTMLを貼る -->
</div>

それから、4行目を消して、下記HTMLを貼り付け更新すれば反映します＾＾

MailPoetフォームの設定：HTMLを取得する場所

さいごに

簡単にメルマガ配信が設置できるプラグインですが、クリックされなければ配信できません。

CSSで装飾してクリックしやすくなったので、コンテンツやメルマガに興味あるユーザーが沢山購読してくれることを願ってます＾＾

それでは装飾のみ担当した、かうたっくでした。