ヘッダーの位置設定に合わせたサイト内コンテンツのスタイルの変更方法

Snow Monkey では、ヘッダー位置を変更した際に、設定によっては想像しているデザインと異なった形で表示されてしまう場合があります。本記事は、ヘッダー位置に合わせた要素のカスタマイズ方法をまとめました。

本記事の対応バージョンについて

本記事の対応バージョンについて

WordPressテーマ「Snow Monkey v9 以降」のみ対応しています。

Snow Monkey v9 で確認しています。

v9以前からの変更に伴う注意

ブリエ

なぜ、Snow Monkey v9 以降のみ対応なんでしょうか?それより前のバージョンでは出来なかったの?

テネーブル

そうじゃなくて、Snow Monkey v9 でヘッダーに大きな変更があったの。前のバージョンでは data 属性の data-l-header-type にスタイルを当てて行っていたの。でも、変更に伴ってカスタマイズ方法も変更されたんです。Snow Monkey公式では、次の通り書かれています。

ヘッダーの data 属性に対して CSS を適用している場合は、Snow Monkey v9 にアップデートすると CSS が適用されなくなるのでご注意ください。なるべく .l-header に対して CSS をあてるように変更してください。

Snow Monkey 公式より引用
テネーブル

なので、data-l-header-type でスタイルを当てて行うv9より前のカスタマイズをしていた場合は、.l-header に対してCSSをあてる変更が必要です。

ルミェール

Snow Monkey v9より前のバージョンでは、ヘッダーの設定は今のように多分類化されていなかったんだ。v9以降にヘッダーの調整が多くされて、スタイルも大きく変更されたよ。

ヘッダーの種類について

テネーブル

Snow Monkey v9 からのヘッダーの種類は、分類が多くなりました。[ヘッダー位置] は .l-header--ヘッダー位置-sm で書かれ、 [PC用ヘッダー位置] は .l-header--ヘッダー位置-lg と言うスタイルに分かれるようになっています。

例えば、ヘッダー位置を [オーバーレイ]、 PC用ヘッダー位置を [上部固定] にした場合のヘッダーの HTML は、次のように記述されます。

<header class="l-header l-header--overlay-sm l-header--sticky-lg" role="banner">
ブリエ

[ヘッダー位置] の設定は、スマートフォンやタブレット端末で見える時の設定ってことですか?

テネーブル

そうですね。Snow Monkey は主にスマートフォンを基本としたモバイルファーストのテーマと言われています。Snow Monkey v9 以降では、スマートフォンやタブレット端末の時と、PC の解像度でヘッダー位置の見え方も異なる設定ができるように対応されたんですね。その為に多くのスタイルが変更されています。

ルミェール

[ヘッダー位置] と [PC用ヘッダー位置] の設定は、カスタマイザーの [デザイン] > [ヘッダー] の中にあるよ。

カスタマイザーについては、別記事「カスタマイザーをカスタマイズするための基礎 – Snow Monkey カスタマイズ」にも解説があります。

ヘッダー位置の各スタイル記述について

上部固定

テネーブル

sticky と言う記述が付与されます。
ヘッダー位置なら .l-header--sticky-sm に、PC用ヘッダー位置なら .l-header--sticky-lg と言うスタイルクラスになります。

オーバレイ(上部固定)

テネーブル

sticky-overlay と言う記述が付与されます。
ヘッダー位置なら .l-header--sticky-overlay-sm に、PC用ヘッダー位置なら .l-header--sticky-overlay-lg と言うスタイルクラスになります。

オーバーレイ(上部固定 / スクロール時背景白)

テネーブル

sticky-overlay-colored と言う記述が付与されます。
ヘッダー位置なら .l-header--sticky-overlay-colored-sm に、PC用ヘッダー位置なら .l-header--sticky-overlay-colored-lg と言うスタイルクラスになります。

オーバレイ

テネーブル

overlay と言う記述が付与されます。
ヘッダー位置なら .l-header--overlay-sm に、PC用ヘッダー位置なら .l-header--overlay-lg と言うスタイルクラスになります。

ノーマル

ルミェール

ノーマルの場合はスタイルが付かないよ。何も設定されていない場合も、このノーマルが設定される。標準(デフォルト)ってことだね。

ヘッダー位置に合わせたコンテンツスタイルの変更方法

ブリエ

オーバーレイメニューの時にメニューとコンテンツが重なりすぎちゃった。コンテンツ開始位置をズラすと、オーバーレイ以外の時に余白が気になっちゃうかな…。

テネーブル

そう言う場合は、オーバーレイの時だけコンテンツの開始位置を少しずらしたいなどの場合には、ヘッダー位置に合わせてコンテンツスタイルを変更すれば解決するんじゃないでしょうか?

ブリエ

ヘッダー位置に合わせてコンテンツスタイルを変更?

テネーブル

そうです。オーバーレイの時のみにスタイルを掛けたい場合であれば、次のような感じでどうでしょうか?

.l-header--overlay-sm+.l-contents {
  /* ヘッダー位置がオーバーレイ時のコンテンツに掛かるスタイル */
}
ブリエ

おぉー。できました。このスタイルってどう言うことなんですか?

テネーブル

スタイルシートの + を使って、 .l-header--overlay-sm に隣接している .l-contents に対してスタイルを適用させてるんです。それによってヘッダー位置がオーバーレイ時のコンテンツのみに適用できるスタイルとなります。

セレクタを + で区切ると、同じ階層にある要素同士で、 ある要素の直後に隣接している要素を対象にスタイルを適用することができます。

スタイルシートリファレンス – 隣接セレクタ
ルミェール

同様に .l-header--sticky-sm.l-header--sticky-overlay-colored-lg などヘッダー位置に合わせたクラス名でスタイルを記述すると、そのヘッダー位置の時のコンテンツのみにスタイルを当てられるよ。ヘッダースタイルに応じてコンテンツの雰囲気を変えてみよう!

補足(フックを使う別の方法)

ケミ

ヘッダーの位置 や PC用ヘッダーの位置 は、テーマ設定値( theme_mod )の1つとなっています。なので、フィルターフックの get_theme_mod で取得も可能なんです。ヘッダー位置は header-position 、PC用ヘッダー位置は header-position-lg と言う設定名です。取得した値に応じて、読み込むスクリプトを変更することでも、ヘッダー位置の設定に応じてコンテンツのスタイルなどを変更可能です。余計な記述を常に読み込まない分、そっちの方がページ表示が軽くなる場合もありますね。使い分けてみてください。

この記事の筆者

Kmix39(ケミ)

電子の妖精。当ウェブサイトの記事制作などを行なっています。
金融・不動産・医療・教育などの数々の業種のシステム開発を経験を積み、スマートフォンアプリケーションと WordPress などのウェブアプリケーションを日々勉強中。