【Lightningテーマ】ヘッダーのロゴ画像スクロール時も表示CSS（WordPress）

WordPressの人気テーマ「Lightning」では、ページを下にスクロールした際にヘッダーメニューが上部に固定表示（スティッキーヘッダー）されます。

しかし、デフォルト設定のままでは「スクロール固定時にヘッダーのサイトロゴ画像が消えてしまう」仕様になっています。

「スクロール中もロゴを常時表示しておきたい」という場合、わずか数行の追加CSSを記述するだけで簡単にロゴを表示させることが可能です。本記事では、ロゴが非表示になる理由と、表示させるためのCSSコード・設定手順を分かりやすく解説します。

スクロール時にヘッダーロゴが消える現象

Lightningテーマでは、ページ最上部にいるときはヘッダーの左側にサイトロゴが正常に表示されています。

ところが、ページを下へスクロールしていくと、メニュー（ナビゲーション）部分は上部に固定されるものの、左側のロゴ画像だけが消えてしまいます。

メニューだけが右側に固定され、左側のロゴがなくなってしまうため、サイト全体の統一感やブランディングの観点からも「スクロール時もロゴを残しておきたい」と感じる場面は多くあります。

この動作は不具合ではなく、Lightningテーマの標準スタイル（CSS）による仕様です。

ブラウザの検証ツールでCSSを確認すると、ページがスクロールされた際にヘッダー要素へ付与されるクラス .header_scrolled に対して、以下のようにロゴ（.site-header-logo）を非表示にする指定が記述されています。

/* Lightningテーマ標準のスクロール時CSS（非表示設定） */
.header_scrolled .site-header-logo {
    display: none;
}

このように display: none; が指定されているため、スクロール固定ヘッダーでロゴが画面から消えてしまいます。

スクロール時にもロゴを表示させたい場合は、非表示（none）に設定されているスタイルを、表示（block）で上書きするCSSを追加します。

以下のCSSコードをコピーして、WordPressの追加CSSに記述してください。

/* スクロール固定時もヘッダーロゴを表示する */
.header_scrolled .site-header-logo {
    display: block !important;
}

末尾に !important を付与しておくことで、テーマ本来の非表示ルールよりも確実に優先され、スクロール時もロゴが安定して表示されます。

上記のCSSコードをWordPressサイトに反映させる手順です。管理画面から簡単に設定できます。

反映されない場合の確認ポイント
もし保存後に実際のページで反映が確認できない場合は、ブラウザに以前のCSSがキャッシュされている可能性があります。Ctrl + F5（Macは Cmd + Shift + R）でスーパーリロード（強制再読み込み）をお試しください。

CSSを追加した後にページをスクロールしてみると、以下のように固定ヘッダーにもロゴ画像が表示されるようになります。

固定メニューの左側にロゴが常時表示されることで、ユーザーがいつでもトップページへ戻りやすくなり、サイト全体の利便性も高まります。

Lightningテーマでスクロール固定時にヘッダーロゴが消えてしまう問題は、追加CSSにスタイルを1行追加するだけで簡単に解決できます。

ポイントのおさらい

原因：Lightningの初期CSSで .header_scrolled .site-header-logo { display: none; } が指定されている
対策：display: block !important; で上書きする
設定場所：「外観」＞「カスタマイズ」＞「追加CSS」にコピペするだけ

わずか数行のCSSで解決できますので、Lightningテーマで固定ヘッダーにロゴを残したい場合はぜひ設定してみてください。