SWELLでヘッダーを追従・固定させる設定方法とコツ

2026年10月28日

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

長い記事を読んでいるとき、メニューを開くために一番上まで戻るのが面倒…と感じたことはありませんか。読者も同じで、ナビゲーションが見えなくなると、そのまま離れてしまうことがあります。SWELLならヘッダーを画面上部に固定して追従させられます。

この記事では、SWELLでヘッダーを追従・固定させる設定方法を手順付きで解説します。私が実際にやってしまった失敗や、スマホでの注意点もお伝えしますね。カスタマイザーのチェックだけで、数分で設定できますよ。

※まだSWELLを導入していない方へ：SWELLは買い切り型のWordPressテーマなので、一度購入すれば追加費用なしでずっと使えます。この記事で紹介している設定も、ブロックエディタ上でクリックするだけで再現できますよ。

➡️【公式】SWELLの購入ページはこちら

デザインに悩む時間を減らして、記事を書くことに集中できる環境が手に入ります。

ニャフィ

スクロールしてもヘッダーが付いてくるようにしたいにゃ。

たいがブログ

便利ですよね。SWELLならチェックひとつで設定できますよ。

ニャフィ

スマホだと画面が狭くならないか心配だにゃ…

たいがブログ

パソコンとスマホの使い分けも含めて、順番にご案内しますね。

▼あわせて読みたい：サイトを快適に回遊してもらうなら、表示速度の土台も大切です。ブログの土台になるサーバー選びはこちらで解説しています。

SWELLのヘッダー追従・固定とは？設定前に知っておきたい基本

ヘッダーの追従とは、ページを下にスクロールしてもヘッダーが画面上部に表示され続ける機能のことです。どの位置からでもメニューを開けるので、読者がほかの記事へ移動しやすくなります。

SWELLでは、パソコンとスマホで別々に追従を設定できるのが特徴です。端末ごとに使い分けられる点が、使いやすさのポイントになります。

ヘッダーを追従させるメリット

メニューが常に見えていると、記事を読み終えた読者がそのまま次の記事へ進みやすくなります。私もパソコン表示で追従をオンにしてから、1人あたりに読まれるページ数が少しずつ伸びていきました。回遊率を上げたい方には特におすすめです。

スマホでは画面の狭さに注意する

スマホは画面が小さいため、追従ヘッダーが本文の表示スペースを圧迫してしまうことがあります。私は一度スマホでもオンにしたところ、読みにくいと感じてオフに戻しました。スマホは実際に読んでみてから判断するのが安心です。

SWELLでヘッダーを追従・固定させる設定方法

ここからは、実際にヘッダーを追従させる手順を見ていきましょう。設定はすべてカスタマイザーの「ヘッダー」から行います。

以前使っていた別のテーマでは、追従させるために追加CSSを書く必要がありました。SWELLはチェックを入れるだけなので、コードに触れずに安全に設定できます。

まずはパソコンだけ追従させて様子を見る

迷ったら、パソコンだけ追従をオンにするところから始めましょう。画面が広いパソコンなら本文の邪魔になりにくく、メリットを感じやすいですよ。スマホはあとから試しても遅くありません。

設定後は記事ページでスクロールして確認する

トップページだけ見て終わりにせず、長めの記事ページでスクロールして確認するのが大切です。目次や見出しがヘッダーに隠れていないかも、あわせてチェックしておきましょう。

STEP

カスタマイザーのヘッダー設定を開く

管理画面の「外観」→「カスタマイズ」→「ヘッダー」の順に開きます。

STEP

ヘッダーの追従設定の項目を探す

ヘッダーの設定画面を下にスクロールし、追従に関する設定項目を表示させます。

STEP

パソコン用の追従にチェックを入れる

パソコンでヘッダーを追従させる項目にチェックを入れます。右側のプレビューでスクロールすると、動きを確認できますよ。

STEP

スマホ用の追従を必要に応じて設定する

スマホでも追従させたい場合は、スマホ用の項目にもチェックを入れます。迷う場合はオフのままで大丈夫です。

STEP

公開して記事ページで確認する

「公開」をクリックして保存し、長めの記事ページでスクロールしてヘッダーが付いてくるか確認したら完了です。

追従ヘッダーをもっと快適に使うコツ

ヘッダーを追従させたら、次は読者が本文を読みやすい状態を保つ工夫をしていきましょう。便利な機能も、使い方しだいで邪魔に感じられることがあります。

大切なのは、「ナビは見やすく、本文は広く」のバランスです。少しの調整で、追従ヘッダーの快適さは大きく変わります。

スマホは固定フッターメニューで代用する

スマホでヘッダーを追従させない代わりに、SWELLのスマホ用の固定フッターメニューを使う方法もあります。画面の下に小さなメニューが並ぶので、本文を圧迫せずに移動しやすくなりますよ。私もこの組み合わせにしてから、スマホでの読みやすさと回遊を両立できています。

ロゴの表示サイズを控えめにする

ロゴ画像が大きいと、追従したヘッダーまで分厚くなってしまいます。私はロゴを大きめにしていたせいで、スクロール中も画面の上がずっと埋まって見える失敗をしました。ロゴの表示サイズを少し小さくするだけで、追従ヘッダーがすっきり細く見えますよ。

▼あわせて読みたい：回遊しやすいサイトにしたら、次は読まれる記事を増やす番です。無料から使えるキーワード調査ツールの実力はこちらで正直にレビューしています。

SWELLのヘッダー追従設定でよくある質問

チェックを入れたのにヘッダーが追従しません。: カスタマイザーで「公開」を押したか確認しましょう。保存済みなら、キャッシュを削除してブラウザを再読み込みすると反映されることが多いですよ。
追従させると表示速度は遅くなりますか？: ヘッダーの追従で表示速度が大きく落ちることはほとんどありません。速度に影響しやすいのは、画像の容量やプラグインの数のほうです。
追従ヘッダーは読者の邪魔になりませんか？: パソコンでは気になりにくいですが、スマホでは本文が狭く感じることもあります。実際にスマホで記事を読み、違和感があればオフにしましょう。
お知らせバーと一緒に使えますか？: 併用できます。ただし上部の表示が重なって窮屈に見えないかは確認しておきましょう。別テーマでは調整に苦労しましたが、SWELLは自然になじみやすい印象です。