スタイルがズレているのはスキンのリファクタリング中だからです。

Cocoonでフッターが浮き上がる不具合を解決する

cocoonCocoon
この記事は約2分で読めます。
スポンサーリンク

どうもこんにちは。veilnuiです。

今回は、WordPress(Cocoon)でコンテンツの量が少ないときに、フッターが浮き上がる……フッターが画面最下部に固定されない不具合の解決方法です。

原因

原因は単純で、“#content”の”height”に値が指定されていないだけです。
そのため、コンテンツの量が少ないときにパティングが起きず、フッターが上にずれるのです。

解決方法

「style.css」にソースを追記して直します。
なお、注意点としては……

  • “#header””#footer”には高さを定しておく。→高さは変わらない(不変)
  • “#content”だけ高さが指定しない。→高さが変わる(可変)

Cocoonではデフォルトで”#header””#footer”に高さが指定されているので、上書きしない限り大丈夫です。

では、これが追記するソース。「style.css」に追記してください。

#container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#content {
  margin-bottom: 20px;
}
#footer {
  margin-top: auto;
}

これで、“#content”の高さが自動調整(可変)になり、常にフレックスボックス内でいっぱいになるようパティングが行われます。

ちなみに。CSSに追記しなくても、コンテンツ量を増やせば勝手に直ります
“#main”の高さが増えて、”#footer”を押し下げてくれるためです。

製作者に聞いてみた

Cocoonフォーラムから、Cocoonテーマ製作者の「わいひら」さんにこの不具合について聞いてみました。

結果としては、「仕様である」とのことです。
理由は……

  • AMPページではCSSのサイズが50MB以下と制限があり、少しでもCSSのファイルサイズを減らさないといけない。
  • 記事が1つや2つの状態で運営を続けることがない。

AMPのファイルサイズ制限が理由では仕方がないです。
ということで、フッターが浮き上がる場合、各自この方法で対処してください。

Cocoonのフォーラムへのリンクを貼っておきます。

フッターが浮き上がる不具合
タイトルと添付ファイルの通りです。コンテンツが少ないときに、フッターが浮き上がる不具合があります。ただ、自分はテーマをカスタマイズしているため、自分だけの環境下で起きている不具合かもしれないです。 一応、CSSにこのソースを書くと修正されるみたいです。不具合修正お願いします。 #container ...

コメント

タイトルとURLをコピーしました