ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > 大きな疑問コーナー > title - レイアウトが崩れちゃったけど?

レイアウトが崩れちゃったけど?

ブログづくりを続けているとレイアウトが崩れてしまうことが誰でも少しぐらいはあると思います。テンプレートを変えた時や画像やアフィリエイトのバナーをつけた時などはサイドメニューが落ちてしまったり、特に3カラムのテンプレートを使っている人は落ちやすいのではないかと思います。

カラムが崩れる

レイアウトが崩れてしまう一番の原因は、サイドメニューが下に落ちる事だと思います。中でも3カラムを使っている場合が一番落ちやすいと思います。(カラムがよくわからない人はカラムって何?を見て下さい。)

なぜ下に落ちてしまうのかというと、ほとんどの場合は決められた枠の幅よりも大きな画像やバナーなどを使っているからだと思います。

具体的に画像を使って説明します。
レイアウト崩れ.3例えばこの様に3カラムで真ん中の記事の所に大きすぎる画像を使ってしまうと、真ん中の記事の部分が幅を取りすぎているので左のメニューが収まる幅がないので、下に落ちてしまっています。

真ん中が幅を取りすぎなのは、画像のある記事の枠の右側の部分がはみ出ていて四角い角になっているからわかりますよね。上のフリーエリアは丸角になっているので見比べるとよくわかると思います。

レイアウト崩れ.2
これは真ん中の記事の所に大きすぎる画像を使ってしまって、真ん中自身が、スペースがなくて下に落ちてしまっているパターンです。

レイアウト崩れ.3
真ん中の記事の部分だけでなく、左右のメニューの部分も本来の幅よりも大きな画像やバナーを使ってしまうと下に落ちてしまいます。

バナーは大きさを変えてしまうと規約に違反すると思うので、小さいサイズのバナーを使った方がいいですよ。

直す方法

1.画像のサイズを小さくして使う方法
画像を使うとborder="0"というタグが必ず入っていると思いますが、その後ろにwidth="350" height="263"の様に記入すると画像のサイズを指定することが出来ます。width="数字"は横幅の長さを決めて、 height="数字"は縦幅のサイズを決めます。詳しくは「画像の大きさを指定する」を見てみて下さい。

2.全体の幅を広げる方法。
左のメニューが下に落ちるのは収まる幅がなくなってしまったからです。これをもっと詳しく説明すると、全体の幅が600で左が150、真ん中が300、右が150だとしたら左・真ん中・右を足し算するとちょうど600で問題ありません。

でも真ん中が大きな画像を使ってしまって400の幅になったら左右のどちらかのスペースがなくなってしまうのはわかりますよね。だから下に落ちてしまうのです。

そこで全体の幅を600から700にしてあげれば真ん中に400の幅を使っても左右のメニューのスペースは確保されるので大丈夫ですよね。

※でもこれはスタイルシートを編集して幅を直さなければならないので、だいぶ知識が必要となるので難しいです。しかもテンプレートによっては他にもたくさん直さなければならなくなる場合もあるのであまりおすすめできません。

記事の内容がぐちゃぐちゃになる

レイアウトが崩れるのには、もう1つ大きな原因があります。それはタグの記述ミスです。普通に文章だけの記事を作っているだけでは何もおこらないけど、ブログパーツをつけたり、カスタマイズをしてみたりするとタグの記述ミスはおきやすいです。

具体的に画像を使って説明します。
レイアウト崩れ.4これはタグの記述をミスした時におこったレイアウトの崩れの画像です。多分ミスで一番多いのがタグの閉め忘れだと思います。

HTMLの編集の画面を見ると<div○○○><△△△△△△△△></div>というのを必ず見かけると思います。これはdivとdivで内容の△を囲っているタグなんですが最後の赤字の</div>がdivの効果を持たせるのはここまでだよって言う意味の閉じるタグです。

この見本の画像はこれを閉め忘れている状態でレイアウトがこの様に崩れています。

divだけじゃなくて他にも囲うタグはたくさんあります。適当に例をあげてみると
address・blockquote・center・dl・fieldset・form・h1~h6・hr・noframes・ noscript・ol・p・pre・table・ul
などがあります。

これは上の画像が大きすぎるのとは違いものすごく見つけずらいと思います。しかも自分がカスタマイズしていて、ちょっとした事で今、書いていた所と全然違う所を誤っていつの間にか削除していたら見つけるのにすごく苦労すると思います。

見つけ方はレイアウトの崩れ方を見て、怪しいと思ったところを順番に上から閉じ忘れていないかを根気よくチェックしていくか、Another HTML-lint gatewayなどの文法チェッカを使って調べるしかないと思います。どちらにせよ根気がいる作業だと思います。

こうならないためにもカスタマイズなどをする前には必ずHTMLやスタイルシートをメモ帳などにコピーしてからカスタマイズしましょう。

もちろん記事を作るときにもタグの閉じ忘れなどがあったらレイアウトは崩れますが、HTMLの様に長い文章ではないと思うので、探すのは簡単だと思います。

ちなみに<!--edit_area-->~~~~~ <!--/edit_area-->などのFC2ブログ独自のタグを閉め忘れると、レイアウトが崩れるのではなくて画面が真っ白になって何も表示されなくなります。


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
これは、ブラウザを縮小した場合のみ崩れるやつでも出来ますか?
$$こと埋葬機関さんへ
たぶんですが大丈夫だと思いますよ。
レイアウトについて
いつも大変参考にさせていただいてます!

共有テンプレートを使い、るんぱぱさんのページを
見ながらカスタマイズしているのですが
どうしても分からない箇所がありまして、
教えていただけると 幸いです(>_<。)HelpMe!!

「最近の記事」部分や
「最近のコメント」部分をクリックして
記事の確認をすると、対象の記事がぐんと
下の方に表示されてしまいます。
これはなぜでしょうか?

カスタマイズの過程で 下手なことをしてしまったのか
それともこのテンプレートの仕様なのか.。

教えてください!!
naonao32さんへ
ブログを拝見させていただきました。記事の画面になるとがぐんと下の方に表示されてますね。Ctrl+Aを押すとわかるのですが、コメントとトラバの部分の横幅が大きすぎるから左カラムが落ちているのだと思います。なのでコメントとトラバの部分の横幅かmarginなどを一度縮めてみてください。
ありがとうございます♪
返信 ありがとうございます。

ただ、、、すいません。
初心者なもので どうすれば
「コメントととラバの部分の横幅かmarginなどを縮まる」
のかが わかりません。
htmlの編集で 横幅のタグがあるのでしょうか?
お忙しい所申し訳ありませんが 教えて
いただけないでしょうか?


naonao32さんへ
naonao32さんのHTMLとスタイルシートを見させていただきました。
パッと見ですが、</div>が足りない気がします。なので、

<!--/コメント投稿-->
</div>
<!--/コメント-->

この様に<!--/コメント-->の上に</div>を付け足せば直るような気がします。
一度試してみてください。
できました!!!
すごい!!
手品のようです!!
無事 思ったような表示が出来ました。
本当にありがとうございました<(_ _)>

これからも お世話になります!
naonao32さんへ
カスタマイズしている時に</div>を間違えて消してしまったのだと思います。
無事に元通りになってよかったですね!!
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/409-f1dc73ca   

Template Designed by DW99