賢威でスマホとPC表示を切り替える方法【メルマガ登録フォーム】

メルマガ登録フォームは名前とメールアドレスを入力する箇所なので、なるべるレイアウトはキレイに整えたいところです。

というのも、つい最近このwebサイトの登録フォームがエラーを起こして、見た目がよろしくないままで数日間サイト運営していました。

 

こんな感じの↓

 

絶対に登録したくないですよね（汗）。

僕はメルマガスタンドにアスメルを利用しているので、登録フォームもアスメルのCSSジェネレーターでカスタマイズしたものをサイトに埋め込んでいます。

一番はじめに作業したときはなんの問題もなかったのですが、メルマガ登録フォームのサムネイル画像を変更した際に突然フォームの見た目が上記のように崩れてしまったのです。

この状態から一刻も早くなんとかせねばと思って数日間バタバタしていたところ、ようやくなんとかなりました。

原因はスマホとPCの表示切り替えが上手くいっていないことにありました。

たぶん、この問題に直面する人は僕以外にもいると思ったので今回はその解説をしていこうと思います。

 

賢威のスマホとPC表示切り替えはCSS書き換えで完結

CSSジェネレーターでメルマガ登録フォームを作成すると2つのコードが出てきます。

ひとつはdesign.cssに貼り付ける用でもうひとつはメルマガ登録フォームを埋め込むページに貼り付けるようです。

【design.css用】

【埋め込みページ用】

この方法で設定した場合、CSSジェネレーターでカスタマイズしたとおりのレイアウトになりますが、残念ながらスマホでの表示はPCサイズのまま画面からはみ出てしまうんですよね。

これを改善するにはPC表示とスマホ表示で切り替わるようにコードを書き換える必要があります。

僕が最初に行ったのは、mobile.cssにCSSジェネレーターで書き出したコードをスマホのサイズに書き換えて貼り付けるやり方でした。

しかし、この場合スマホ表示は上手くいきますが今度はPC表示のサイズがおかしくなってきます。なのでdesign.cssのコードをいじってみたのですが、変化しません。前述の画像がそれで、登録フォームの外枠がスマホサイズから変化しないのです。

あっコード崩れた・・・

とか思いましたが実はこれ、design.cssとmobile.cssにCSSジェネレーターで作成したコードを貼り付けてしまうとdesign.cssの共通コードがmobile.cssに上書きされてしまうらしいのです。

 

この原因を突き止めたところどうやら賢威の設定に問題がありました。賢威のmobile.cssには冒頭にこのようなコードがあります

このonly screenとは、スマホのみに対応するというコードで640pxの横幅以下のサイズに限り適用しますよ～ってコードになります。

つまりこの

｛

↑以降に、CSSジェネレーターで作成したCSSのコードをスマホサイズに書き換えて貼り付ければOKということです。

こんな感じで↓

 

ちなみに、テキストエリアと登録フォームの枠のサイズは埋め込みページではなく、cssで調整しています。

するとスマホ表示はしっかりデバイスに収まってます▼

PC表示も▼

 

以上がアスメルのCSSジェネレーターで作成したメルマガ登録フォームのレイアウトをPCとスマホで切り替える方法でした。

コードの書き換えは理解出来ればなんてことない話ですが、そこに行き着くまでが大変なんですよね（汗）。

登録フォームはPCでもスマホでもキレイに整えてガンガン集客していきましょう！