レイアウトが崩れちゃったけど?文字が小さくて見にくい方はこのツールを使って下さい。超初心者さんがFC2ブログを初めて作る時に見た時に少しでも役に立てばいいな!という願いを込めたブログ。FC2プロフFC2プロフ自己紹介ページをすぐに公開できるサービス。[Admin]レイアウトが崩れちゃったけど?ブログづくりを続けているとレイアウトが崩れてしまうことが誰でも少しぐらいはあると思います。テンプレートを変えた時や画像やアフィリエイトのバナーをつけた時などはサイドメニューが落ちてしまったり、特に3カラムのテンプレートを使っている人は落ちやすいのではないかと思います。カラムが崩れるレイアウトが崩れてしまう一番の原因は、サイドメニューが下に落ちる事だと思います。中でも3カラムを使っている場合が一番落ちやすいと思います。(カラムがよくわからない人はカラムって何?を見て下さい。)なぜ下に落ちてしまうのかというと、ほとんどの場合は決められた枠の幅よりも大きな画像やバナーなどを使っているからだと思います。具体的に画像を使って説明します。この様に3カラムで真ん中の記事の所に大きすぎる画像を使ってしまうと、真ん中の記事の部分が幅を取りすぎているので左のメニューが収まる幅がないので、下に落ちてしまっています。真ん中が幅を取りすぎなのは、画像のある記事の枠の右側の部分がはみ出ていて四角い角になっているからわかりますよね。上のフリーエリアは丸角になっているので見比べるとよくわかると思います。これは真ん中の記事の所に大きすぎる画像を使ってしまって、真ん中自身が、スペースがなくて下に落ちてしまっているパターンです。真ん中の記事の部分だけでなく、左右のメニューの部分も本来の幅よりも大きな画像やバナーを使ってしまうと下に落ちてしまいます。バナーは大きさを変えてしまうと規約に違反すると思うので、小さいサイズのバナーを使った方がいいですよ。直す方法1.画像のサイズを小さくして使う方法。height="263"の様に記入すると画像のサイズを指定することが出来ます。height="数字"は縦幅のサイズを決めます。詳しくは「画像の大きさを指定する」を見てみて下さい。2.全体の幅を広げる方法。左のメニューが下に落ちるのは収まる幅がなくなってしまったからです。これをもっと詳しく説明すると、全体の幅が600で左が150、真ん中が300、右が150だとしたら左・真ん中・右を足し算するとちょうど600で問題ありません。真ん中が大きな画像を使ってしまって400の幅になったら左右のどちらかのスペースがなくなってしまうのはわかりますよね。下に落ちてしまうのです。そこで全体の幅を600から700にしてあげれば真ん中に400の幅を使っても左右のメニューのスペースは確保されるので大丈夫ですよね。※でもこれはスタイルシートを編集して幅を直さなければならないので、だいぶ知識が必要となるので難しいです。テンプレートによっては他にもたくさん直さなければならなくなる場合もあるのであまりおすすめできません。記事の内容がぐちゃぐちゃになるレイアウトが崩れるのには、もう1つ大きな原因があります。それはタグの記述ミスです。普通に文章だけの記事を作っているだけでは何もおこらないけど、ブログパーツをつけたり、カスタマイズをしてみたりするとタグの記述ミスはおきやすいです。具体的に画像を使って説明します。これはタグの記述をミスした時におこったレイアウトの崩れの画像です。ミスで一番多いのがタグの閉め忘れだと思います。HTMLの編集の画面を見ると<div○○○><△△△△△△△△></div>というのを必ず見かけると思います。これはdivとdivで内容の△を囲っているタグなんですが最後の赤字の</div>がdivの効果を持たせるのはここまでだよって言う意味の閉じるタグです。この見本の画像はこれを閉め忘れている状態でレイアウトがこの様に崩れています。divだけじゃなくて他にも囲うタグはたくさんあります。noscript・ol・p・pre・table・ulなどがあります。これは上の画像が大きすぎるのとは違いものすごく見つけずらいと思います。自分がカスタマイズしていて、ちょっとした事で今、書いていた所と全然違う所を誤っていつの間にか削除していたら見つけるのにすごく苦労すると思います。gatewayなどの文法チェッカを使って調べるしかないと思います。どちらにせよ根気がいる作業だと思います。ならないためにもカスタマイズなどをする前には必ずHTMLやスタイルシートをメモ帳などにコピーしてからカスタマイズしましょう。記事を作るときにもタグの閉じ忘れなどがあったらレイアウトは崩れますが、HTMLの様に長い文章ではないと思うので、探すのは簡単だと思います。<!--/edit_area-->などのFC2ブログ独自のタグを閉め忘れると、レイアウトが崩れるのではなくて画面が真っ白になって何も表示されなくなります。ユーザーフォーラムへ。#qPQyGfckURL[Edit]$$こと埋葬機関さんへたぶんですが大丈夫だと思いますよ。)HelpMe!!「最近の記事」部分や「最近のコメント」部分をクリックして記事の確認をすると、対象の記事がぐんと下の方に表示されてしまいます。下手なことをしてしまったのかそれともこのテンプレートの仕様なのか.。#WjRtzHSUURL[Edit]naonao32さんへブログを拝見させていただきました。記事の画面になるとがぐんと下の方に表示されてますね。Ctrl+Aを押すとわかるのですが、コメントとトラバの部分の横幅が大きすぎるから左カラムが落ちているのだと思います。コメントとトラバの部分の横幅かmarginなどを一度縮めてみてください。ありがとうございます。