アスメル登録フォームをカスタマイズしてブログに設置する方法

メルマガに登録して頂くために必要な、登録フォーム。

ブログに設置するなら少し人とは違ったおしゃれな感じに設置したいですよね☆

そこで今回は、僕が選んだメルマガスタンドでもある、アスメルの登録フォームをカスタマイズしてブログに設置する方法を紹介します!

 登録フォームをブログに設置する

まず初めに、アスメル会員ページにログインし、サイドメニューのある「シナリオ管理」をクリックします。

あなたがカスタマイズしたいシナリオの「HTMLソース」をクリックします。

このような画面にアクセスしたら、「No.」の下に書かれたシナリオ番号をコピーしておきます。

また、その下の文章内にある「CSSジェネレータ」をクリックします。

ここでもう一度、「CSSジェネレーター」をクリックし起動させます。

次に、先ほどコピーしておいたシナリオ番号を赤く囲った部分に貼り付け(ペースト)して「スタート」をクリックします。

ここで、大まかなデザインを決めていきます。

横にスライドする事で、全体の幅やテキストボックスの幅などがデザインできますので、下に表示されたプレビューを確認しながらデザインを決めましょう。

デザインが決まったら、「CSS付きソースを生成」をクリックします。

あなたがデザインした、登録フォームのソースコードが表示されますので、このソースコードをコピーしてブログに貼り付けます。

この状態でコピーすると、左端の数字もコピーされてしまうので、赤く囲ってある部分をクリックします。

すると、数字がないソースコードが表示されますのでこちらをコピーするのですが、

ここで生成されたコードは、「フォームのCSSここから」と「フォームのCSSここまで」で囲まれたコードと

「フォームここから」と「フォームここまで」で囲まれたコードの2種類が表示されていますので

まずは、「フォームのCSSここから」と「フォームのCSSここまで」で囲まれたコードをコピーしてください。

 

コピーしたコードを、あなたのWordpressのスタイルシートに貼り付けます。

スタイルシートへはWordPress管理画面のサイドメニューにある「外観」「テーマの編集」の順にクリックします。

スタイルシートの一番下に貼り付けます。

注意
お使いのテーマによって、貼り付ける場所は異なります。

僕が使っている、STORKでは一番下に貼り付けましたが、親テーマではなく、子テーマに貼り付けるようにしましょう。

「フォームここから」から「フォームここまで」の部分は、固定ページやLP、ウィジットなど、あなたがフォームを表示させたいところに貼り付けます。

「お名前」や「メールアドレス」と書かれた部分を書き換えることで「Neme」や「Mail」と表示することもできます。

もちろん、「確定」も同様です。

登録フォームをレスポンシブデザインにしておしゃれにカスタマイズしよう!

レスポンシブデザインにしよう!

今の状態で、スマホから見てもらうとおわかりのように、フォームが画面からはみ出ていたり、確定ボタンも隅の方に行ってしまって、見栄えが良くないですよね。

フォームがはみ出してしまうのは、大きさを「px」で指定しているからなんです。

なので、「px」を「%」に変えていきます。

先ほどの「フォームのCSSここから」を貼り付けた画面に移動します。(「外観」→「テーマの編集」)

「#asumeruform」と「asumeruform table」内の「wiath:◯px」と書かれた部分を、「wiath: 100%」に書き換えていきます。

 

ここまでできたら、次に「#asumeruform table th」内の「width:◯px」を「width: 33%」に書き換えます。

(数字は自分の好みに合わせて調整してみてくださいね♪)

少し下に行くと、「#asumeruform .inputtext.inputtextshort」と「#asumeruform .inputtext.inputtextlong」内の「width:◯px」も書き換えていきます。

僕の場合は「width: 95%」に書き換えました。

ここまでの作業ができましたら、スマホで確認してみましょう。

いい感じのサイズに変えることができていますね♪

ボタンの位置を真ん中に配置するには、先ほどあなたがフォームを貼り付けたページの「フォームここから」の下の方にある

<input type=“submit” name=“submit” value=“確定” class=“formbtn” />」に「<cebter>」を付け足します。

そうすると・・

綺麗な見栄えのいいレスポンシブデザインにできましたね!

自分好みのカラーにしよう!

カラーを変更するには、カラーコードを書き換えます。

カラーコードはこちらから取得して頂ければと思います。

HTMLカラーコード

HTMLカラーコードにアクセスし「HTMLカラーピッカー」でお好きなカラーを選択します。

赤く囲った部分に表示されている番号があなたが選んだカラーの「カラーコード」になります。

まず初めに、「お名前」や「メールアドレス」といったフォームのテキスト部分のカラーを変えるには

「#asumeruform table th」の最下部にある「color:#◯◯」を書き換えます。

そのテキスト部分の背景カラーを変えるには「background: #◯◯」を書き換えます。

先ほど紹介した「HTMLピッカー」で僕が選択したカラーの場合はこのように書き換えます。

補足
原因はわかりませんが、選択したカラーによって、「反映されるもの」と「反映されないもの」があります。

なので、お好みのカラーを選んで色々と試して頂ければと思います。

僕の場合、スマホからの訪問者さんが多いので、少しでも見やすく、綺麗なデザインにしたくて、カスタマイズしてみました☆

これからメルマガを始められる方や、初めたての方のお役に立てればと思います。

紹介している手順で進めていただければ、そんなに難しい事でもないので、是非カスタマイズしてみてくださいね^ ^

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です