文字サイズ変更のサイト崩れを防ぐ|お小遣い稼ぎ日記|チチとママの在宅アルバイト日記

トップ日常日記>文字サイズ変更のサイズ崩れを防ぐ

文字サイトを変えるとサイトが崩れる

2013年5月26日

昨日スマホで自分のサイトを見てみたらびっくり(;´Д`)

サイトが崩れてるのを発見しました。Internet Explorerの場合だと文字のサイズが、小、中、大とかなので、目が悪い人はやっぱり文字のサイズを変えると思うんですよ。

実際に私も目が悪いので、スマホの文字サイズは大です。文字のサイズを中にして、開いたサイトに対して一回一回指でくいっと広げるのも面倒だし、サイト全体の文字を大きくする方が見やすいと思っています。

こうして文字のサイズを変更すると、文字のサイズだけが大きくなってページに崩れがでてきます。

私はページの高さをピクセルで固定していたんだけど、それを%に直して、どうしても文字の大きさを変えたくない場所は、%ではなく、ピクセルで固定してみました

インラインフレームなどを埋め込んでいるので、崩れをおこすと、文字と文字が重なってとんでもなく汚いページになってしまい、文章も読めません( ̄ー ̄;)

文字のサイズを変更することができるのを知らない人も結構いると思いますが、サイト崩れは嫌な事です。スマホの画面を指でタップしたりして大きくする場合は、崩れはおきないのですが、メニュー→設定で文字のサイズを変更すると、全体の文字サイズが変わり、どうしても崩れがおきます

表の場合一列に並ぶ文字が大きさを変えると2列になるという感じです。↓こんな感じに文字サイズを変更すると、表が縦に伸びて、長くなってしまいます

文字崩れなしの場合 すっきり一列
文字サイズ変更 文字の色を変更


文字崩れがある場合 こんなに票が伸びてしまいます
 文字サイズ変更 文字の色を変更
文字をピクセルで大きくした場合 文字を%で大きくした場合

文字のサイズ変更は人それぞれ見えやすい大きさが違うので、固定するより変更を自由にできた方がよいと思います。なので、文字が2列になってちょっとカッコ悪くなってもページ全体の文字が読めて、リンクが分るならそれでOKって事にし他方が無難です。

何事も妥協は必要って事ですね(*^_^*)

文字の大きさを変更する方法を知らない人もいると思いますので、少しご紹介します。ちなみにうちの旦那と母親はまったく知りませんでした。

覚えておきたいパソコンの文字サイズ変更方法

すっごく簡単なやり方は、Ctrl+マウスのくるくるを回すやり方です。

この方法は、全体の文字サイズを変更したくないけど、このページだけ大きくしたいのよね~って時に便利です。Ctrlを押しながら上にホイールを上に回すとページ全体が大きくなり、Ctrl+ホイールを下に回すと小さくなります

元の大きさに戻す時は、Ctrl+0で戻ります。これは覚えておくととっても便利です

Internet Explorerの場合の文字サイズ変更方法

ページを開いて、ツールバーの表示→文字のサイズで選びます。文字サイズの上の拡大はページ全体を拡大するものです。文字だけ大きくする場合は、拡大は100%で文字サイズを大、最大にします。

Firefoxの場合の文字サイズ変更方法

Altを押してFirefoxのメニューを出し、表示→ズームで文字だけにチェックをして、ズームで変更します。

ズームの下にあるスタイルシートは外すと、スタイルシートで作られたサイトは全てスタイルシートが崩れ、とんでもないページになるので、スタイルシートのところはスタイルシートを使用しないにしないでくださいね。

Ctrl+0はInternet Explorerのツールバー表示→拡大を変更した時も、Ctrl+0で一発で元の標準サイズに戻ります。すっごく便利ですよ♪

では!今日はここまでにします。明日新しいページを作る予定なので、遊びに来てくださいね~

前ページ 日記トップ 次ページ