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

Cyfons フォーム カスタマイズ

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

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

スポンサーリンク

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

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

お名前  
メールアドレス

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

お名前  
メールアドレス

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

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

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

まずは<div class=cyfons>で範囲指定をする

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

 <div class=cyfons

※ページ編集の関係で「<」と「>」は全角文字となっています。半角で入力をお願いします。
 
というのはdivision=分割・区分という意味で、要はソースのここからここまでですよーみたいな区切りをつけるためにあります。 そしてclass=”cyfons”というのは、クラスってのは名前のこと。cyfonsは自分が分かりやすい名前をつければいいです。(「class=”mailmagazine”」など)まぁこの辺はスルーでOK。です。とりあえず以下のようなソースを貼って下さい。
お名前
メールアドレス

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

 

が挟まってます。

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

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

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

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

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

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

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

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

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

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

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

お名前
メールアドレス

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

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

入力欄を大きくしてみる

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

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

変更後はこちら。Cyfonsカスタマイズ 変更前がこれ。大分良くなったでしょ?(笑)

お名前  
メールアドレス

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

 
Cyfons フォーム カスタマイズ

参考になったらぜひシェアしてね!

コメントを残す

メールアドレスが公開されることはありません。