この記事では、WordPressテーマ「SWELL」を使って、ヘッダーを固定するためのカスタマイズ方法を解説します。
また、この記事における解説は、WordPressテーマ「SWELL」バージョン: 2.6.5で動作を確認しています。
お使いの「SWELL」のバージョンにより、記事中のコードをコピペしても期待どおりに動作しない場合もありますのでご注意ください。
ヘッダーの固定とは？
まずヘッダーを固定するということは、ページをスクロールしてもヘッダー部分だけを画面上部に留まらせる（固定する）ことで、ロゴ画像によるトップページへのリンクや、各種ヘッダーナビゲーションへのアクセスをしやすくするというメリットがあります。
デメリットとしては、常に画面の上部を専有することで、その分コンテンツ領域を狭めることになるため、特に画面の小さい端末での閲覧には注意が必要です。
- ヘッダーナビゲーションからページ遷移することが多い
- ヘッダーの高さ（面積）がそれほど大きくない
- ヘッダー以外のナビゲーションが充実している
- ヘッダーの高さ（面積）が大きい
ヘッダーを固定する方法その1: 「SWELL」のカスタマイザーを使う
ヘッダーを固定する一つ目の方法は、「SWELL」のカスタマイザーを使う方法です。
「SWELL」には、デフォルトでヘッダーを固定するためのカスタマイズ項目が備わっています。
ダッシュボードの「外観」→「カスタマイズ」から「ヘッダー」に進み、「ヘッダーの追従設定」の項目で、
- ヘッダーを追従させる（PC）
- ヘッダーを追従させる（SP）
にチェックを入れてください。
ヘッダーを追従させる（PC）にチェックを入れた場合、PC相当のブラウザで閲覧中にページを少しスクロールすると、追従用のヘッダーが上から降りてきて固定される、という挙動になります。この場合、最初に表示されているヘッダーとは別に、追従用のヘッダーがページ内に存在することになります。
ヘッダーを追従させる（SP）にチェックを入れた場合、スマートフォン相当のブラウザで閲覧中にページをスクロールすると、最初に表示されているヘッダーがそのまま固定される、という挙動になります。
この「SWELL」カスタマイザーを使った方法は、特に追加でコードを記述する必要もなく、とても簡単に実行できるので、デザイン的なこだわりが特に無ければこちらの方法で問題ありません。
ヘッダーを固定する方法その2: CSSを追加する
二つ目の方法は、CSSを追加で記述する方法です。
先にご紹介した「SWELL」カスタマイザーを使った方法だと、ヘッダーを追従させる（PC）の場合、ページを少しスクロールした後に固定ヘッダーが表示されるという挙動になります。これを、ヘッダーを追従させる（SP）のように、最初に表示されているヘッダーがそのまま固定される、という挙動にしたい場合は、少し工夫が必要です。
まずは、「SWELL」カスタマイザーで、
- ヘッダーを追従させる（PC）
ヘッダーを追従させる（PC）のチェックを外します（後述しますが、とある理由で再度チェックを入れることになるので、頭の片隅に置いておいてください）。
ヘッダーを追従させる（PC）のチェックを外すと、ページをスクロールするとヘッダーもそのままスクロールされるので、カスタマイザーの「追加CSS」で以下の記述を追加します（子テーマを使っている方は、適時CSSファイルに追加してください）。
/* ヘッダー */
.l-header {
position: sticky;
top: var(--swl-adminbarH, 0);
}順に解説していきましょう。
l-headerは、ヘッダーに付与されているClass名です。
2行目のposition: stickyは、ヘッダーがスクロールによって移動しようとしたときに、指定した位置に達したら画面に吸着する、という指定になります。通常は、topなどの位置指定とセットで使います。
ちなみにこれは、position: fixedで最初から指定した位置に固定することもできるのですが、fixedに指定したブロックは、その存在を文書の流れから除外され、ヘッダー以下のブロックがすべてヘッダー分上にずれることになり、別途隙間の調整が必要になるため、今回は調整のいらないstickyを使用しています。
3行目のtop: var(–swl-adminbarH, 0)は、stickyでヘッダーを画面に吸着するときの位置を指定しています。
本来ここは画面の一番上を指定したい箇所なので、top: 0でも良いのですが、WordPressのダッシュボードにログインした状態でサイトを表示すると、一番上に管理者用のヘッダーが表示されると思います。実はこのとき、以下のように管理者用ヘッダーの上がtop: 0になります。そして、このとき「SWELL」の内部では、管理者用ヘッダーの高さとして、–swl-adminbarHという変数が割り当てられています。
つまり、この状態でヘッダーをtop:0に固定すると、管理者用ヘッダーに一部被ってしまう状態になります。もちろん、これはログインした管理者のみに見える表示なので、訪れた人からは正しく画面の一番上に固定されているように見えるのですが、気になる方は、
top: var(--swl-adminbarH, 0);と記述することで、もし–swl-adminbarHに特定の数値が入っている（管理者としてログインしている）場合は、top: var(–swl-adminbarH)を指定、–swl-adminbarHが空（一般ユーザーとして閲覧）の場合は、top: 0を指定、という意味になります。これで管理者としても一般ユーザーとしても期待する位置で指定ができます。
このようにCSSを追加で記述することによって、PC相当のブラウザ幅において、「SWELL」カスタマイザーを使わずに、最初に表示されているヘッダーを固定することができます。
追加CSSによる固定ヘッダーの注意点
二つ目のCSSを使ったカスタマイズによって、ヘッダーを固定することができますが、実は以下のような注意点があります。
- ウィジェット「追尾サイドバー」の固定位置がずれる
- ページ内リンクのスクロール後の位置がずれる
一つ目は、ウィジェットの「追尾サイドバー」を使っているときに、その固定位置がヘッダーに被ってしまう、二つ目は、ページ内リンクがある場合に、リンク先にスクロールするようになっていますが、そのスクロール後の位置がヘッダーに被ってしまう、というものです。
これらの問題は、本来ヘッダーを固定したことによって、スクロールや固定ブロックに関する制御でヘッダーの高さを考慮した位置指定が必要になるためです。「SWELL」カスタマイザーを使ってヘッダーを固定した方法だと、これらの位置指定をいい感じに制御してくれていたのですが、独自にCSSでヘッダーを固定した場合、これらを解決するためには、「SWELL」の内部構造を修正する必要が出てきます。
が、そこまで行うと他に影響が出てくる可能性があるため、以下のような少々力技な対応を取りました。
追加CSSによる注意点への対応
カスタマイザーの「ヘッダー」→「ヘッダーロゴの設定」により、ロゴ画像のサイズを、PCとPC追従ヘッダー内で同じにします。これは最初に表示されるPC用のヘッダー高さと、固定用ヘッダーの高さを同じにするためです。
カスタマイザーの「ヘッダー」→「ヘッダーバー設定」により、
- SNSアイコンリストを表示する
- コンテンツが空でもボーダーとして表示する
のチェックを外します。
続いて、「キャッチフレーズの表示位置」を「ヘッダーバーに表示」以外を選択します。
これでヘッダーバーが非表示になります。
カスタマイザーの「ヘッダー」→「ヘッダーの追従設定」で、再び「ヘッダーを追従させる（PC）」のチェックを入れます。
「ヘッダーを追従させる（PC）」にチェックを入れたことで表示されるようになった追従用のヘッダーに対して、以下のCSSを入れることで非表示にします。
/* 追従ヘッダー */
[data-scrolled=true] .l-fixHeader[data-ready] {
visibility: hidden;
opacity: 0;
transition: none;
transform: none !important;
}順に解説していきます。
l-fixHeaderは、追従用のヘッダーに付与されているClass名です。その他の[data-scrolled=true]などは、元のCSSを上書き処理するために追加しています。
3行目のvisibility: hiddenでこの要素を非表示にしています。display: noneにしないのは、「SWELL」の内部的な処理のために要素としての高さを確保したまま非表示にするためです。
5行目以下の指定は、不要なアニメーションを削除するためのものです。
少々ややこしいことをしていますが、これで、「SWELL」内で、追従用ヘッダーに合わせてページ内リンクとウィジェットの固定位置をいい感じに制御しつつ、追加CSSにより追従用ヘッダーを非表示にする、というハックになります。
まとめ
ヘッダーを固定する方法は以下の二つがあります。
- 「SWELL」のカスタマイザー（のみ）を使う
- CSSを追加で記述する
ただし、CSSによる方法はいくつかの注意点があります。
- ウィジェット「追尾サイドバー」の固定位置がずれる
- ページ内リンクのスクロール後の位置がずれる
そのため、こちらの対応と、以下のCSSコードを追加することで最終的にCSSによる固定ヘッダーを実現させています。
/* ヘッダー */
.l-header {
position: sticky;
top: var(--swl-adminbarH, 0);
}
/* 追従ヘッダー */
[data-scrolled=true] .l-fixHeader[data-ready] {
visibility: hidden;
opacity: 0;
transition: none;
transform: none !important;
}「SWELL」のカスタマイザーに慣れてきたら、CSSを追加することでさらに幅広くブログカスタムに挑戦してみましょう！
