アスメル

アスメルのフォームをシリウスに見映えよく埋め込む方法

ららです。

 

メルマガにアスメルを利用している方も多いと思うんですが、
アスメルの登録フォームをシリウスに上手に埋め込めてますか?

 

アスメルの登録フォームは、単体だと、デフォルトでもこんなにカッコいいのに、

 

シリウスの中で使おうとして、ただ単にHTMLをコピペしただけだと、
こんなふうになっちゃってカッコ悪くなってませんか?

これじゃ~、素人感まる出しですよね^^;

 

これをこんなふうに見映えよくする方法をご紹介します。

 

CSSジェネレータを使う

アスメルには、CSSジェネレータという素晴らしい機能があります。
これを使うと、登録フォームを自分好みに簡単にカスタマイズできるんです。

CSSジェネレータは、ここから起動します。

 

シナリオNOは、これを入力します。

 

上部のタブとスライダーで好みの形にフォームを整形します。
下部にプレビューが自動で表示されますので、感覚で設定することができます。

 

最後に、このボタンを押してコードを生成します。

 

コードをシリウスにコピペする

このようなコードが生成されますが、赤い四角のマークをクリックすると、コピーしやすい形になります。

 

これをそのままシリウスにペタッと貼り付けても、変なフォームが表示されるだけです。
ちょっと面倒ですが、ひと手間かけてください。

 

シリウスのスタイルシートにコピペする部分

ここから

ここまでを

 

シリウスのスタイルシートの

一番下に貼り付けます。

 

で、保存。

 

シリウスの本文に貼り付ける部分

ここから

ここまでを

 

シリウスの本文に貼り付けます。

コピペは以上で完了です。

 

シリウスの方でちょっと調整

貼り付けたそのままだと、フォームはこんな感じになっているので、ちょっと手直しします。

 

スペースを詰める

シリウスの場合、コードが改行されていると、表示も改行されてしまうので、空いているスペースは無条件で全部詰めてください。
そうすると、無駄なスペースがなくなります。

 

姓名を1行にする

次に、2段になっている姓名を1行にします。

わかりやすいように、コードをterapadにコピペして編集しています。

ここの部分の改行をすべて詰めて1行にします。

 

できあがり

これで、素人感のない登録フォームが出来上がりました。

 

登録フォームが崩れていたりセンスが悪かったりすると、「本当にこの人、大丈夫かな?」と思われてしまいますよね。

「機能を果たせば見た目は関係ない」と言う意見もありますが、
あなたの信頼を高めるためには、見た目も大きな役割をしますので、登録フォームの表示には、ぜひこだわってみてくださいね^^

ただし、この方法ではスマホなどモバイルで表示したときに切れてしまう現象が起きてしまいます。
それを回避するためには、こちらの方法を試してみてください。
⇒ アスメルのフォームをシリウスに埋め込む方法~レスポンシブ対応編

ABOUT ME
らら
らら
ららです。2人の子供がいる40代の主婦です。コツコツとアフィリエイトにチャレンジし、月6桁の目標を達成することができました。このブログでは、同じ目標を持つあなたに、ららの知識やアドバイスをお伝えしています。お問い合わせはいつでも受け付けていますのでお気軽にどうぞ。
無料レポートが書けなくてもメルマガを始める方法
HAPPYな仕組みダウンロード

「メルマガを始めてみたいけど読者を集めるの大変そう…」
そんなあなたへ。努力しなくっても読者さんが集まる、目からウロコの方法を伝授します(無料です)。

>>レポートをダウンロード!

 

ららが稼げるようになった教材「アンリミテッドアフィリエイト」が9月30日で大幅値上げ!ららのサポート付で手に入れるなら今がチャンスです♪

メールはお気軽に

ららにメールあなたからのメールはいつでも大歓迎です。
お問い合わせはこちらのフォームからどうぞ。
48時間以内に愛をこめてお返事をさせていただいています。

 

ららにメールする

この記事で使われているイラストは…

この記事で使用されているイラストの大部分は、こちらのイラスト集のものを使用しております。

COMMENT

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