スマホとPC両対応のホームページ作成、ご予約フォームの作成、
メルマガ配信、顧客管理機能までがまるっと一つになったリウムスマイル!

電話番号:06-6484-5445

営業時間:平日 9:00〜17:30

  1. スマートフォンでホームページを見たら、表やリストの表示がおかしい!そんな時は?
 

スマートフォンでホームページを見たら、表やリストの表示がおかしい!そんな時は?

2016/03/08 スマートフォンでホームページを見たら、表やリストの表示がおかしい!そんな時は?

時々お問い合わせでいただくことのある、スマートフォンでのホームページの表示崩れ。

 

スマートフォンからホームページを見てみると、

  • 画面から表がはみ出ていて、中に入っている文章が途切れている・・・
  • 何もないはずなのにリストの下に大きな空白がある・・・
  • パソコンに比べて、スマホでの画像が細長い・横長になっている・・・

パソコンからだと普通に見えてるのに、どうして?どう直せばいいの?と頭を抱えている方も多いかと思います。



そんな方はもしかして・・・・

ページに表やリストを入れた時に「この方がいい感じに見えるから〜」と言って、□マークをクリックしてサイズを調整してませんか?

(※IEやFirefoxをお使いの方のみに表示されます。Chromeとsafariは表示されません)



今回は□マークをクリックして、サイズ調整をしてしまった場合の修正方法をご紹介いたします。



表の修正方法

  1. 修正したいページパーツの編集画面を開き、編集エディタ上部の[HTMLソース編集(<>アイコン)]をクリック
  2. 『style="width:○○%;height:○○px"』がサイズ指定の記述ですので、この文章を消します
  3. [HTMLソース編集]をクリック

表のサイズ指定が解除されますので、最後に編集画面下部の[保存]をクリックしてください。



サイズの指定が解除されると、右の図のように表の中に入っている文章が途切れることなく表示されるようになります。

 

表だけでなく、リストや画像でも同じように途切れて表示されたりとおかしな表示になっている場合は、[HTMLソース編集]を見てサイズが指定されていないか確認してみてくださいね!



□マークでサイズを調整するのはどうしてダメなの?

基本的に表やリストのサイズを指定しない場合は、スマートフォンで表示する際に、スマートフォンの画面に合わせて最適なサイズに調整されます。

ですが、□マークでサイズを調整すると、表やリストに細かなサイズが指定されて、そのサイズのままスマートフォンで表示されるため、スマートフォンの画面より大きい場合は表が途切れてしまうのです。

出来る限り□マークでサイズを調整しないようにすることをおすすめします。

じゃすみん(谷岡)

webデザイナー

 

デザイナーとして日々修行中。今年で大阪に来て4年目になりました。多分。

漫画とゲームが好きです。信心深いわけでもないけど、寺院や神社巡りをよくします。

関連エントリー