■ユーザーズフォーラム リニューアルのお知らせ
新規投稿は新ユーザーズフォーラムにお願いします。
このフォーラムは閲覧専用のアーカイブです。

スマホサイトで電話番号のグループ表示と同じようにFAX番号を表示するには?

kenken > スマホサイトで電話番号のグループ表示と同じようにFAX番号を表示するには? @ 2013/12/19 21:54
お世話になります。
nada iconsテーマを使ってメールフォームをカスタマイズしています。
テーマ既存の電話番号の表示と同じようにFAX番号を追加したいのですが添付したスクリーンショットのようにスマホで見るとテキスト幅が広くなって表示されています。

電話番号との違いは
・フィールド名
・項目名
・グループ名(tel⇒fax)
だけです。

表示サイズと最大値は電話番号と同じように各5にしています。
お分かりの方、宜しくご教示頂お願いします。
<(_ _)>

■ BaserCMSのバージョン:3
■ レンタルサーバー名:ロリポップ
■ スマートURLの利用:on
■ 設置フォルダ:ドキュメントルート
■ 利用しているデータベース:mySQL
■ PHPスキル:E

goichi > Re: スマホサイトで電話番号のグループ表示と同じようにFAX番号を表示するには? @ 2013/12/20 22:04
こんにちは(^^
ちょっと自分で試せていないので、逆に質問してしまいますが、
問題のフォーム(FAX番号のとこ)と正常なフォーム(電話番号のとこ)のソースを見せていただけないでしょうか?
おっしゃる通り、スクリーンショットを見る限り、明らかに幅に差があるので、
吐出されているソースにどのような差があるのか、まずは確認してみたいと思うのですが・・・。
kenken > Re: スマホサイトで電話番号のグループ表示と同じようにFAX番号を表示するには? @ 2013/12/21 5:10
ご返信ありがとうございます。
ブラウザの ページ⇒ソースの表示 でいいのでしょうか?
それでよければ以下の通りです。

<tr id="RowMessageTel1">
<th class="col-head" width="150"><label for="MessageTel1"></label></th>
<td class="col-input"><span id="FieldMessageTel1">
<span class="mail-description"><strong>電話番号</strong><br /></span>
<span class="mail-before-attachment"></span>
<input name="data[Message][tel_1]" size="5" maxlength="5" class="" type="text" id="MessageTel1"/>
<span class="mail-after-attachment">-</span>
<span class="mail-attention"></span></span>
<span id="FieldMessageTel2"><span class="mail-before-attachment"></span>
<input name="data[Message][tel_2]" size="5" maxlength="5" class="" type="text" id="MessageTel2"/>
<span class="mail-after-attachment">-</span>
<span class="mail-attention"></span></span>
<span id="FieldMessageTel3">
<span class="mail-before-attachment"></span>
<input name="data[Message][tel_3]" size="5" maxlength="5" class="" type="text" id="MessageTel3"/>
<span class="mail-after-attachment"></span>
<span class="mail-attention"></span></span></td>
</tr>

<tr id="RowMessageFax1">
<th class="col-head" width="150"><label for="MessageFax1"></label></th>
<td class="col-input"><span id="FieldMessageFax1">
<span class="mail-description"><strong>FAX番号</strong><br /></span>
<span class="mail-before-attachment"></span>
<input name="data[Message][fax_1]" size="5" maxlength="5" class="" type="text" id="MessageFax1"/>
<span class="mail-after-attachment">-</span>
<span class="mail-attention"></span></span>
<span id="FieldMessageFax2"><span class="mail-before-attachment"></span>
<input name="data[Message][fax_2]" size="5" maxlength="5" class="" type="text" id="MessageFax2"/>
<span class="mail-after-attachment">-</span>
<span class="mail-attention"></span></span>
<span id="FieldMessageFax3">
<span class="mail-before-attachment"></span>
<input name="data[Message][fax_3]" size="5" maxlength="5" class="" type="text" id="MessageFax3"/>
<span class="mail-after-attachment"></span>
<span class="mail-attention"></span></span></td>
</tr>

どうかよろしくお願いします。
<(_ _)>

■ BaserCMSのバージョン:3
■ レンタルサーバー名:ロリポップ
■ スマートURLの利用:on
■ 設置フォルダ:ドキュメントルート
■ 利用しているデータベース:mySQL
■ PHPスキル:E

goichi > Re: スマホサイトで電話番号のグループ表示と同じようにFAX番号を表示するには? @ 2013/12/22 13:34
頂いたソースコード部分をブラウザで見てみたら、添付のように綺麗に揃っているようです。。。
(出力しているソースコードは問題なさそう・・???)
ちなみに、いまお使いのブラウザは何になるでしょうか?
他のブラウザで見ても、同じようにおかしな表示になりますか?

kenken > Re: スマホサイトで電話番号のグループ表示と同じようにFAX番号を表示するには? @ 2013/12/22 23:45
お世話になります。

http : //{baserCMS の設置 URL}/about(PC用ドキュメントルート)
で表示した場合と
http : //{baserCMS の設置 URL}/s/about(スマホ用ドキュメントルート)
で表示した場合では表示状況が違うのです。

PCでPC用ドキュメントルートを表示した場合はテーマに既存の電話番号と新たに作成したFAX番号はどのブラウザ(IE11・クローム・ファイヤーフォックス他)で見てもきれいに揃って表示されます。

PCでスマホ用ドキュメントルートを表示した場合には、どのブラウザでも電話番号とFAX番号の表示が違うのです。
スマホでもアンドロイドで確認しましたが(iosは未確認)電話番号とFAX番号の表示が違うのです。

つまり
http : //{baserCMS の設置 URL}/s/about(スマホ用ドキュメントルート)
で表示した場合、テーマに既存の電話番号をそのまま使った場合にはどのブラウザでも期待通り表示されますが、新規で同じ内容で作成した場合には期待通り表示されないのです。
不思議ですが・・・
(-_-;)




■ BaserCMSのバージョン:3
■ レンタルサーバー名:ロリポップ
■ スマートURLの利用:on
■ 設置フォルダ:ドキュメントルート
■ 利用しているデータベース:mySQL
■ PHPスキル:E

goichi > Re: スマホサイトで電話番号のグループ表示と同じようにFAX番号を表示するには? @ 2013/12/23 21:22
スマホページと、PCページとでHTMLの該当部分(ソース)に変化がないのであれば(先日、貼り付けてもらったソースは、スマホページの出力ですよね?)、外部で読み込んでいるCSSファイル等の兼ね合いかもしれません。 ブラウザのクロームでも表示をご確認になったとのことで、クロームがインストールされているのであれば、デバッグツール(ページ上を右クリックで出てくる「要素を検証」)で、適用されているCSS等を探ってみると良いと思います。同じHTMLソース、同じCSSを同じブラウザで見て、表示がずれるというのは基本的にないと思いますので、PC用とスマホ用のソース等のどこかに差異があるはずです。