WordPress個別サポート

画面スクロール時にヘッダーやフッターを固定したいときもあります。Twenty Fourteenのようにヘッダーがシンプルな場合は、スクロールしても常にヘッダーやフッターが表示されていても邪魔にならないでしょう。

以下、Twenty Fourteenを例にヘッダーとフッターを固定するCSSの例を紹介します。

/* ヘッダー固定 */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 48px;
}

/* フッター固定 */
.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 48px;
}

動作イメージは次のようになります。

その他のテーマでは微調整(というより、かなりの調整)が必要な場合があります(bodyタグに対するpadding指定など)が、基本的にはヘッダーやフッターのCSSセレクタを指定してpositionをfixedにすれば、そのパーツが固定される仕組みです。

ふわっと仕上げなのでブラウザによっては上手くいかないことも考えられますが、参考にしてください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート