アフィピク登録

アスメルのフォームをシリウスに埋め込む方法~レスポンシブ対応編(簡易版)

アスメルのフォームをシリウスに埋め込むのに、CSSジェネレーターを使って埋め込むと、レスポンシブ対応されずにスマホ表示がおかしくなってしまいます。そうならないための対応方法をご紹介します。コードをいじったりしたくない方のための簡易版です。

ららです。

 

こちらの記事では、CSSジェネレータを使って、
アスメルの登録フォームをシリウスに見映えよく埋め込む方法をご紹介しました。
>>アスメルのフォームをシリウスに見映えよく埋め込む方法

アスメルのフォームをシリウスで利用する方法は大きく2種類あるのですが、
こちらのやり方の方がカンタンなので、代表してご紹介したわけです。

が。

この方法だと、レスポンシブ対応されないということが判明しました(2017年11月現在)。
天下のアスメルがレスポンシブ対応していないなんて、盲点でした(笑)

正確には「この方法だとレスポンシブ対応されない」ということです。
アスメルのフォームURLをそのまま利用する分には、レスポンシブ対応されていますし、これからご紹介する方法でもレスポンシブ対応されています。

 

そこで、この記事では、
アスメルのフォームのHTMLをシリウスに埋め込み、ちゃんとレスポンシブ対応させる方法
をご紹介します。

 

コードをコピペする

この方法は、CSSジェネレータは使いません。
フォームのHTMLコードをそのままシリウスにコピペします。

コピペするのは、シナリオ設定画面のここをクリックして

 

この全文をコピーして、シリウスに貼り付けてください。

 

プレビューしてみるとこんな感じ。ちょっと素人感が否めませんね。

 

スペースを詰める

下の画像は、シリウスにフォームのHTMLを貼り付けた画像です。
HTMLコードをよく見ると、ところどころ改行されています。

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

そうすると、シリウスでフォームを表示したときの無駄なスペースがなくなります。

 

プレビューしてみるとこんな感じ。タイトルとフォームの間のスペースがなくなりました。

 

スタイルシートを読み込ませる

フォームの体裁を整えるために、スタイルシートを読み込ませます。
スタイルシートとは、ここに書いてあるコレです。

これを読み込ませることによって、アスメル特有の体裁に整います。

 

どうやって読み込ませるか?というと、コードの先頭にこの1文を追加します。

<link rel=”stylesheet” href=”https://1lejend.com/stepmail/style.css” type=”text/css” />

 

シリウスのコードはこんなふうになります。

 

プレビューすると、こんな感じ。これだけでも十分カッコよくなりました。

この段階で「OK!」と思える場合は、これで使ってください。

 

文字の大きさを整える

一見フォームは格好よくなりましたが、よく見ると、文字がずいぶんと小さくなってしまっています。

 

これは、さきほど追加した1文のせいです。
アスメルのフォーム用のCSSが、全体に影響してしまっているんです。

これを根本から直すには、CSSをいじらないといけないんですが、
この記事では、そういうものに恐怖心がある方のために【簡易版】という位置づけですので、
シリウスの投稿画面から、普通に文字の大きさを設定して対応します。

 

これでキレイに整いました。

 

スマホで見ても、横が切れることもなく、入力もちゃんとできます。
最低限のカスタマイズですが、難しくもなく、問題なく使えますので、
ぜひ参考になさってください。

もっとカスタマイズしたい!という場合や
文字の大きさを一括で修正したい!という場合は、
こちらの記事を参考になさってください。
⇒ 記事作成中です。

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

 

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

 

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

 




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

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

 

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

 

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

 

コメントを残す

サブコンテンツ

このブログについて

プロフィール

情報商材アフィリエイト

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

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

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




応援よろしくね♪

メールはお気軽に


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

カテゴリー

YouTubeやってます

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


ららの愛用品

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

相互リンクについて

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

このページの先頭へ