cyfonsのメルマガ登録フォームをカスタマイズしてみた

メールマガジン配信システムの僕的に一番のオススメは

Cyfonsなのですが、デフォルトの登録フォームは非常にシンプルなんですよね。このままではなかなか使えない。すごい素人臭く見えてしまいます。 今回はCyfonsの登録フォームのデザインを見栄え良くするHTMLとCSSのサンプルをシェアしようと思います。

Cyfonsの登録フォームのソースそのままだと・・・

こんな感じになります。これは僕のメルマガの登録フォーム。

こんな感じ。まぁシンプル過ぎますよね・・・。これをこのまま記事下に貼っても登録する確率は低そうですよね…。なのでちょっとカスタマイズしてみましょう。ちなみにソースはこれ。

シンプルになりました。 さて、このソースを元に、HTMLとCSSをいじっていきましょう。

JetppackのカスタムCSSでテーマに左右されない追加CSSを使おう

さて、テーマの編集を押して、テーマごとのstyle.cssに書き込むのが一般的ですが、うっかりテーマ変更とかするとせっかく書いたCSSがなくなっちゃうのでjetpackプラグインの「カスタムCSS」という機能を使いましょう。 jetpackの設定ボタンを押して、 機能一覧にカスタムCSSがあります。僕の場合なぜか英語ですけど。それを有効化して下さい。すると「外観＞CSS編集」というボタンが追加されますのでそれを押して下さい。 CSS編集画面に行くとこんな感じの画面になります。 ここに新たに追加したCSSはテーマを変更されても変化しないので、追加でブログをカスタマイズする時はこちらに追加CSSを入れるのがオススメです。

まずは＜div class=“cyfons＞で範囲指定をする

さて、まずはメルマガフォームのソースの前後に以下のように追加して下さい。

 ＜div class=“cyfons＞

適宜改行したり半角スペースを消しました。さて、これをWordPressならテキストモード（HTMLモード）で貼り付けます。目には見えないですが、ソースの前後に

が挟まってます。

GoogleChromeの「検証」を使えるようにしよう

まずはメルマガフォーム全体の背景色を変えてみましょう。実際に、あなたがCSSを扱えるようになる事を目指してやってみましょう。 まずはウェブページのメルマガフォームの部分にカーソルを合わせて、右クリックを押して下さい。 これはGoogleChromeでやってくださいね。 右クリックを押して検証を押します。すると下図のような画面になると思います。   右サイドバーになんか変な画面が出たら、矢印の部分を押して下さい。   Dock sideを矢印の部分を押すと、この変な画面が下に出てくるようになります。これが編集しやすいと思うのでこの画面にしてみましょう。 左にHTMLソース、右にCSSが出ます。その中で「class=”cyfons”>」にカーソルを合わせて下さい。すると図のように青く表示されます。つまりこれは「class=”cyfons”>」の部分のCSSを編集すれば、青い部分が変化しますよーということ。

CSSで背景色を変えてみよう

次はこの状態でCSSを1つ指定してみましょう。右のCSS側を見るとプラスボタンがあるのでそれを押してみます。 すると

.cyfons　{ }

という文字が出てくると思います。これがclass=”cyfons”を指定したCSSです。クラス名は「.クラス名」で指定します（多分）。次に背景色を指定したいので、

.cyfons { background: #005589; }

と打ってみましょう。すると下図のように青い背景色になりました！ ＞＞色のコードは「WEB色見本 原色大辞典 – HTMLカラーコード」を参考に。

CSSで文字色を変えてみよう

でも今度は文字が見えづらくなったので白くしてみましょう。文字色のCSSはcolorです。 上図のように、

.cyfons { background: #005589; color: #fff; }

と指定しましょう。#fffは白って意味です。こんな感じのフォームになります。   でも・・・

左側の「お名前」「メールアドレス」邪魔じゃない？と思ったので消してみる

なんか左側の部分邪魔じゃないかな―とおもったので、消して見ます。赤字の部分を消してみてください。

変更後のソースはこちら。

こんな感じ。 こっちのほうがすっきりしてるしカスタマイズも簡単です。

入力欄を大きくしてみる

今度は「姓名」を入れる欄が少し小さい気がするので、大きくしてみましょう。 新たに入れるCSSはこちら。

.cyfons input { width: 95%;　/*フォームの横幅*/ font-size: 40px; /*姓名メールアドレスの文字の大きさ*/ border-radius: 10px; /*枠の四隅の丸み*/ padding: 10px 10px; /*フォーム内文字の上下の余白*/ border: none; /*枠線を無くす*/ }

/*　　*/の部分は消してもらって構いません。それぞれ好みの数字に調整してみて下さい。変更後はこちら。 今度は登録フォームの文字が小さいので、これをCSSで調整します。

.cyfons td {
 text-align: center; /*テーブルの位置を中央寄りに*/
}
.cyfons input[type="submit"] {
 width: 50%;　/*横幅を50%*/
 font-size: 50px; /*文字の大きさを50px*/
 font-weight: bold;　/*文字を太く*/
 background: #ff0000;　/*文字色を赤に*/ }

変更後はこちら。 変更前がこれ。大分良くなったでしょ？（笑）

変更後のソースを埋め込んだものはコチラ。