CSSでフッターがコンテンツと重なってしまう原因と解決方法 WordPressテーマ作成にて

今回はフッターとコンテンツが重なってしまってしまった時の原因と解決方法について書いていきます。
もし、同じように困っている方の参考になれば嬉しいです。
・あくまで考えられる原因の一つなので、以下の方法を試しても解決されない場合があります。
・「他にもこんな原因があるよ!」って意見がありましたら、Twitterまでご連絡ください。
(後日記事に追加させていただきます。)
■フッターとコンテンツが重なるってどういう状態??(事象)
フッターがサイドバー(メインコンテンツ)と被ってしまっている
タグの下に表示されている状態
■フッターとコンテンツが重なってしまった原因は??
<div>と</div>の数が一致していなかった事によるレイアウト崩れ
【誤り】
  <?php get_header(); ?>
  <div class=”container”>
    <div class=”contents”>
      <?php if(have_posts()): the_post();?>
        <article <?php post_class(‘article-content’); ?>>
          </div>←不要(end contentsになってしまう)
 
(省略)←タイトルやアイキャッチ画像、本文などを取得
</article>
  </div><!–end contents–>
    <?php get_sidebar(); ?>
  </div><!–end container–>
  <?php get_footer(); ?>
■どうしたらフッターが最下部に固定されたの?
不要な</div>を削除した
【正】
  <?php get_header(); ?>
  <div class=”container”>
    <div class=”contents”>
      <?php if(have_posts()): the_post();?>
        <article <?php post_class(‘article-content’); ?>>
          </div>←不要(end contentsになってしまう)
(省略)←タイトルやアイキャッチ画像、本文などを取得
</article>
  </div><!–end contents–>
    <?php get_sidebar(); ?>
  </div><!–end container–>
  <?php get_footer(); ?>
ちゃんと最下部に固定されて正しく表示されました!

Leave a comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA