初心者でもできる簡単FC2ブログの作り方

例えばこの様に３カラムで真ん中の記事の所に大きすぎる画像を使ってしまうと、真ん中の記事の部分が幅を取りすぎているので左のメニューが収まる幅がないので、下に落ちてしまっています。

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


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


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

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


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

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

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

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

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


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

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

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

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

divだけじゃなくて他にも囲うタグはたくさんあります。適当に例をあげてみるとなどがあります。

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

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

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

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

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