かなりの比率を誇るネタ。…裏を返せば
「よく聞かれる質問集」≫■も見ず、過去ログの検索もせずに書込む比率も高いということですが。この相談は基本的にご本人のブログを見ないと分かりませんので、ここの内容で解決出来なかったらURL公開して
「助け合い掲示板」≫■にどうぞ。(笑)
さて、レイアウト崩れにはある程度パターンがあります。
■サイドメニューと記事が縦一列になっている。■記事の本文などが左寄せではなく真ん中によっている。■記事などを囲む枠自体が崩れてしまっている。代表的なのがこの3つです。それぞれの対処法は以下の通り。
■サイドメニューと記事が縦一列になっている
まず、記事とサイドメニューのどちらが原因なのかを調べます。「詳細ページ」で記事を一つ一つ確認して、1つだけ崩れが発生すれば記事が原因。過去ログページ含めどの記事でも崩れるのであればサイドメニューが原因です。
崩れの原因は「幅をオーバーしたものがあること」です。
1) 画像の幅
画像があればその幅が枠の幅設定より大きすぎたのかも。外してみて直ればそれが原因です。画像の幅を小さくして表示しましょう。タグでサイズを指定して小さく見せる(急ぐ方は初心者向けHTMLサイトで勉強して下さい(笑))か、画像加工ソフトで画像そのものを小さくしてアップ・貼り直しして下さい。
また、記事ではボタン使用で貼ると実際の画像よりも小さいサムネールサイズで表示されますが、このサムネールサイズでも画像を横に並べて表示させようとするとテンプレートによっては崩れます。(私もこれはナゾなんだけど) この場合はサイズ指定するより横に並べないのが一番かも…(汗)。画像ボタンで貼ると、指定を入れても無効になる可能性が高いんですよ。
2) 自動改行がうまくいってない
本文の中にも原因になるものがたくさんあります。多いのが「英数字が自動改行されていない」事。代表的なものが「長過ぎるURL」や「顔文字などの意味のない英数字の羅列」です。スペースの入っていない英数字が長く続くと、ブラウザはそれを一列に表示しようとしてレイアウトを崩してしまうのです。短くても運悪く記事の右側にひっかかってしまって崩れる、なんて事もあります。
また、「画像に文字を回り込み」させたものの中にそれらがひっかかっても崩れます。URLはサイト名などに変更してリンクだけをつけるとか、不安な方はテーブルタグで記事自体を囲むといいでしょう。テーブルタグは幅を「ピクセル指定」で記事幅より小さく作ると確実です。その際、画像幅がテーブル幅より大きいとテーブル幅は無効になりますので気を付けましょう。
その他、「長過ぎるタイトル・カテゴリ名」でも同様に崩れます。特に顔文字・ギャル文字・「!」「?」の連続が元凶となりやすいのでご注意。
3) 文字修飾
「斜体文字」で書かれた文章でも崩れる事があります。こちらは使わない事が一番ですね。どうやっても崩れるみたいなので、どうしても使いたいのでしたらテーブルの中に入れて下さい。拡大文字を長々続けるのも崩れの原因になります。
■記事の本文などが左寄せではなく真ん中によっている。
この場合は「タグの閉じ忘れ」です。どこかで真ん中に指定したまま、終了タグを入れていない為にその後のものにも反映されているのです。
これも同じく記事を1つ1つ確認した上で、記事全てが崩れるのでしたら「左サイドメニューの自由項目」か、「トップページ編集」のどちらかが原因です。それぞれを非表示にして確認。原因が特定出来たら修正して下さい。タグ編集に不慣れな方は一度テキスト書類にコピーを保存した上で、一から書き直す方をおすすめします。特定の記事の後、過去記事が全て真ん中寄りになる場合は崩れていない記事にタグの閉じ忘れがあります。こちらも同じくテキスト書類にバックアップした上で修正しましょう。「右寄り」の場合も対処法は同じです。
■記事などを囲む枠自体が崩れてしまっている。
主に記事の最後に画像がある時に起こります。
<br clear="all">を画像タグの後に加える事で直る事が多いです。
それ以外ですとやはりタグの閉じ忘れ・消し忘れですね。「div」「span」タグはページ全体のレイアウトに使用されているので、これらを閉じ・消し忘れるととんでもない事になります(笑)。このへんはやはりHTMLやスタイルシートをある程度勉強してもらった方がいいかも。
実はレイアウト崩れって、Winで崩れててもMacだとなんともないって事が多いんです。なので私も自分のとこの崩れに気付いていない可能性が…(笑) 崩れが見られたらご報告いただけるとありがたいです。m(_ _)m
上では省きましたが、「自分の環境のみで文字の配置にこだわってスペース入れる」のもレイアウト崩れの原因になります。他の環境ではスペースが反映されてないのにレイアウトだけはしっかり崩れてるって事になりますので、ほどほどに。全体的なデザイン含め、厳密なレイアウトは現行のスタイルシートでは不可能です。この先はどうだか知りません…多分どのブラウザでも同じようにしようって向きにはなるんでしょうけど。ピクセル指定でもずれてるもんね(苦笑)。
※追記 「レイアウト崩れ【2】」を追加。併せてご覧下さい。≫■