アフィピク登録

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

アスメルの登録フォームをシリウスに埋め込むとき、ただ単にHTMLをコピペしただけだと、センスの悪い残念なフォームになってしまいます。アスメルにはCSSジェネレータというすごいツールがありますので、ぜひ利用してください。

ららです。

 

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

 

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

 

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

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

 

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

 

CSSジェネレータを使う

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

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

 

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

 

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

 

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

 

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

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

 

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

 

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

ここから

ここまでを

 

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

一番下に貼り付けます。

 

で、保存。

 

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

ここから

ここまでを

 

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

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

 

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

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

 

スペースを詰める

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

 

姓名を1行にする

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

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

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

 

できあがり

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

 

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

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



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

この記事を読んだあなたには、こちらの記事もオススメです☆

 

パソコン操作のこと。アフィリエイトのこと。
どんなことでも気軽にいつでも、ららに聞いていただける環境をご用意しました。 これでもう、ひとりで悩まずに済みますよね。詳細はこちらをご覧ください。
>>会員制メールサポート「らら組」

 

この記事はいかがでしたか?
ららは、あなたのお役にたてる記事の配信を心がけています。 「こんな記事を書いてほしい」「聞いてみたいことがある」 そんな場合は、こちらからいつでもメールを送ってください。
>>ららにメールを送る

 




最後まで読んでいただき、ありがとうございました。
このブログを「いいな」と思ったら、
下の白いボタンを、1回クリックしてくださいね。
ららに一票入って、人気ブログランキングに飛びます
↓ ↓ ↓

ありがとうございます☆ あなたの1票が、励みになってます^^

 

↑ この動くアバターは、こちらで作っていただきました。
あなたのアバターに命を吹き込む「四次元アバター」

 

「ユーザーが求める記事を書くこと」
「ちゃんと読んでもらえる役立つ記事を書くこと」
それが今、Googleに求められている、上位表示されるサイトの条件です。
あなたのブログは大丈夫ですか?記事がつまらなくて、せっかくの報酬を逃していませんか?
そうならないためには、正しい記事の書き方を勉強することが重要です。
満足度98%、ブログ初心者さん向け、読者に読まれる記事の書き方が学べます。
>>関連記事はココをクリック

 

コメントを残す

サブコンテンツ

このブログについて

プロフィール

情報商材アフィリエイト

ららです。
高校生と中学生の2人の子供がいる、40代主婦です。
主婦業・母親業をやりながら、隙間時間でアフィリエイトを実践し、
月6ケタの目標を達成することができました。

あなたと同じ目線の、安心できるブログを目指してます。
お気軽にメールくださいね。

詳しいプロフィールと実績はこちら




応援よろしくね♪

メールはお気軽に


ららに相談したいことなどがありましたら、お気軽にどうぞ。
些細なことでもアホらしいことでも、大歓迎です♪
>>ららにメールを送る

カテゴリー

YouTubeやってます

このバナーをクリックして、
チャンネル登録してください♪


ららの愛用品

サーバーやらドメインやらパソコン回りの品など…。ららはいったい何を使っているの?
実際に使っている物をご紹介します。
ららの愛用品ご紹介

相互リンクについて

2015年10月をもちまして、相互リンクのページは終了いたしました。
理由は
・昨今のSEO事情では、相互リンクが有益ではないこと
・リンク先の閉鎖が相次ぎ、機能を果たさなくなったこと
です。
相互リンクしていただいたブログ様、長いあいだありがとうございましたm(_ _)m

このページの先頭へ