Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

テンプレートのレイアウトがおかしい時

・サイドバーが何故か途中からメインコンテンツの下に回り込んでしまう
・コンテンツを分けるアウトライン(外罫)が複数の記事にまたがる(一記事単位にならない)

などなど
こういった時にまずテンプレートの構造を疑いたくなりますが
その多くはテンプレートソースに起因するものではなく
記事の書き方 あるいは サイドバーに設置したプラグイン に問題がある場合がほとんどです
もとよりレイアウトがあきらかに崩れているものであればFC2の審査を通過しません(笑)

おかしい・崩れている と思った時にまず試す順序

① トップページのページ送りから複数件ページを繰ってみる

崩れていないページが存在するのであれば 恐らく「記事単位」での問題です
= 崩れているページ内に存在するいずれかの記事の書き方に起因


② 崩れるページにある個別記事を全て開いて確認してみる
= ある特定の記事のみに問題があるのであれば 他の個別記事は正しく表示されているはず


-----

ここまでの段階で全てのページが崩れている場合の原因は「プラグイン」だと思ってまず間違いないです
サイドバーにあるもの以外でも 仮にhtmlソース内に何かを追加記述している場合
そちらが原因かもしれません
とにかくテンプレートとは無関係に各ユーザーが設置した「何か」です

-----

③ プラグインを一旦全て非表示 → ひとつづつ表示して崩れるかを確認

この作業で問題のあるプラグインを特定できます
全非表示にしても崩れているのであれば テンプレート側のソース内容に問題があります
(個人が追加・編集・削除した箇所も含む というかたぶんそれが原因)


-----------------

レイアウトを崩している対象が見つかりましたらソースを確認します
最も多いパターンが

開始タグと終了タグの不整合です

タグ というのは以下のようなものです

<div> <span> <a> <section> <table>


など 左右の山形括弧に囲まれたhtml要素のことをタグと言います
ソースコード全体を指して「タグ」と称しているのを時折見かけますが それは認識違いです

上記に示したものが「開始タグ」で 以下に示すものが「終了タグ」

</div> </span> </a> </section> </table>


括弧内文字列が同じものがそれぞれ対応です


<div>内容</div>
<span>内容</span>
<a>内容</a>
<section>内容</section>
<table>内容</table>


開始タグが<div>で 内容が挟まれて 終了タグが </span>
といったものはもう完全に不整合ですので正しいレイアウトにはなりません

-----------------------

実際のソースコードというのはこれまで示したような単純なものでなく
ネスティング(入れ子) というのが為されていますので 場合によっては非常に複雑です
この「開始タグ」「終了タグ」を見た目で表現すると
グループ分け と言っても良いと思います
グループ分けにも色々ありますが イラストで説明しますとこんな感じ


sample

sample


このように終了タグの位置によって 見た目が大きく変わってしまいます
グループの括りが変わってきちゃうってことですね (´・ω・`)

レイアウト崩れの原因は

開始タグと終了タグの 位置 が合っていないパターン
開始タグと終了タグの が合っていないパターン

大抵はこのいずれかです

数の不整合については
開始タグと終了タグの数は必ず一致していなければいけません
例えば
開始タグ5つに対し 終了タグが4つ という場合には不整合 = レイアウト崩れの原因

原因となっている対象を特定しましたら ソースを見て開始タグと終了タグの数を数えてみてください
終了タグが少なくありませんか? 逆に多くありませんか?
その不整合はテンプレート全体に影響を及ぼします
特に終了すべき箇所で終了タグが書かれていない場合
次の終了タグ(別グループの終了タグ)がその対応だと認識されてしまいます
グループ分けが変わってしまうわけです

「崩れた...
という方のほとんどの原因がこれです もう断言(笑)
なにもプラグインに限りません
記事内でhtmlソースを利用している方 例えばランキングなど

対象の特定 → 開始タグと終了タグの数の確認

大抵はこれで解決 ╭( ・ㅂ・)و ̑̑ グッ


* 本記事は予約投稿でございます *


関連記事

Comments 0

There are no comments yet.

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い