はじめに
ウェブサイトのレイアウトを整えるうえで、フッターをウィンドウ最下部に固定する手法は非常に重要だ。特に、コンテンツが少ないページでは、空白が目立たなくなり、全体的なデザインが引き締まる。
この手法をWordPressの人気テーマ「Cocoon」を使って実現する手順を解説する。
フッターを固定する意義
フッターはサイト全体の統一感を演出する重要な要素だ。
ユーザーがページを訪れた際、最初と最後に目にする部分でもあり、情報の伝達やデザインの完成度に直結する。
適切に固定することで、視覚的なバランスが向上し、利用者の満足度も高まる。
フッター固定のCSSコード
1. CocoonテーマのHTML構造を確認
Cocoonのフッターは、通常以下のような構造だ。
<footer id="footer">
<div class="footer-content"><!-- フッターのコンテンツ --></div>
</footer>```
### 2. 子テーマのCSSにコードを追加
**子テーマの使用理由**
Cocoonのアップデートで独自のスタイルが上書きされることを防ぐため、子テーマにCSSを追加するのが望ましい。
以下のコードを子テーマの`style.css`に追加する。
```css
/* フッターをウィンドウ最下部に固定 */
html, body {
height: 100%; /* HTMLとBODYの高さを100%に設定 */
margin: 0; /* 不要な余白を排除 */
}
#content {
min-height: calc(100vh - 100px); /* フッターの高さを差し引いた高さを指定 */
display: flex;
flex-direction: column; /* Flexboxで縦並びを設定 */
}
#footer {
margin-top: auto; /* 自動的に最下部に配置 */
}
このコードの要点
- HTMLとBODYを全高に設定
ページ全体の高さを100%にすることで、フッターを固定しやすくなる。 -
#contentの高さを調整
Flexboxの機能を活用し、フッター以外の部分に高さを割り当てる。 -
margin-top: autoでフッターを最下部に配置
Flexbox特有の余白自動調整を利用。
管理画面からCSSを追加する方法
子テーマの編集が難しい場合、WordPressの管理画面からCSSを追加することも可能だ。
- 管理画面にログイン。
- 外観 > カスタマイズ > 追加CSS を選択。
- 上記のコードを貼り付け、公開をクリック。
トラブルシューティング
1. フッターが正しく固定されない
原因: 他のCSSと競合している可能性が高い。
解決策: ブラウザの「検証ツール」を使用し、#footerや#contentに競合するスタイルがないか確認する。
2. ページに不要なスクロールバーが表示される
原因: calc()関数で指定した高さが正確でない場合に発生する。
解決策: フッターの高さを正確に測定し、calc()の値を調整する。
まとめ
Cocoonテーマでフッターを固定する方法をCSSで簡潔に実現する手法を紹介した。
フッターの固定は、デザインを引き締めるだけでなく、ユーザー体験を向上させる重要なポイントだ。
ぜひこの記事の内容を試し、サイトのクオリティ向上に役立ててほしい。
コメント