SWELLのヘッダーカスタマイズ方法｜初心者向けに手順を解説

2026年10月20日

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

ブログを開いたとき最初に目に入るヘッダーを、もっと自分らしく整えたいと思っていませんか。私は以前、大きすぎるロゴを設定してしまい、スマホで記事の本文がなかなか見えない状態になっていたことがあります。

この記事では、SWELLのヘッダーをカスタマイズする方法を初心者向けにわかりやすく解説します。実際にヘッダーを何度も調整してきた体験も交えるので、読みながら進めれば、見やすく印象に残るヘッダーに仕上げられます。

※これからSWELLを導入する方へ：SWELLは買い切り型のWordPressテーマで、追加費用の心配がありません。この記事を見ながら進めれば、初心者でも迷わずおしゃれなブログを作れます。

➡️【公式】SWELLの公式サイトはこちら

デザインに悩む時間を減らして、記事作りに集中できます。

ニャフィ

ブログのヘッダーをおしゃれにしたいのにゃ！

たいがブログ

ブログの第一印象を決める部分なので、こだわりたいですよね。

ニャフィ

設定を間違えて、崩れたりしないか心配だにゃ…

たいがブログ

プレビューを見ながら進める手順を、5つに分けて解説しますね。

SWELLのヘッダーでカスタマイズできること

ヘッダーは、ブログ名やロゴ、メニューが並ぶサイトの顔です。SWELLでは、カスタマイザーからクリック操作だけでヘッダーのデザインを変更できます。

筆者はヘッダーの見直しを後回しにしていましたが、整えてみるとブログ全体の印象が一気に引き締まりました。ヘッダーを変えるだけで、サイトの信頼感は大きく変わります。

ロゴとレイアウトを変えられる

SWELLでは、ロゴ画像の設定や、ロゴとメニューの配置レイアウトを選べます。横並びや中央寄せなど、ブログの雰囲気に合わせて変えられるのが魅力です。

色や追従表示も設定できる

ヘッダーの背景色や文字色を変えられるほか、スクロールしてもヘッダーが画面上部についてくる追従表示も設定できます。読者がメニューを使いやすくなります。

SWELLのヘッダーをカスタマイズする方法

ヘッダーのカスタマイズは、カスタマイザーとメニュー設定の2か所で行います。順番に進めれば、初心者でも迷わず整えられます。

筆者はAFFINGER6でもヘッダーを調整しましたが、項目が多くてどこを変えればいいか迷いました。SWELLはヘッダー関連の設定がまとまっていて、目的の項目をすぐに見つけられると感じています。

ロゴ画像を事前に用意しておく

ロゴを使う場合は、背景が透明な横長の画像を用意しておくと扱いやすいです。ロゴがなくても、ブログ名のテキストだけで十分見栄えのよいヘッダーになります。

スマホでの見え方を意識する

読者の多くはスマホからブログを見ています。ヘッダーが大きすぎると本文が隠れてしまうので、スマホのプレビューで確認しながら調整しましょう。

STEP

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

管理画面の「外観」→「カスタマイズ」を開き、「ヘッダー」のメニューを選びます。右側のプレビューを見ながら変更できるので安心です。

STEP

ロゴ画像を設定する

用意したロゴ画像をアップロードします。表示サイズも調整できるので、パソコンとスマホの両方で大きすぎないかを確認しながら決めましょう。

STEP

ヘッダーのレイアウトを選ぶ

ロゴとメニューの並び方を選びます。迷ったら、シンプルな横並びのレイアウトから試すと、どんなブログにもなじみやすいです。

STEP

背景色と文字色を整える

サイトカラーに合わせて、ヘッダーの背景色と文字色を設定します。背景と文字の色ははっきり差をつけると、読みやすいヘッダーになります。

STEP

グローバルナビを設定する

「外観」→「メニュー」でメニューを作り、表示位置にグローバルナビを指定します。筆者は位置の指定を忘れてメニューが表示されず悩んだので、忘れずにチェックしましょう。

ヘッダーをさらに使いやすくする設定

基本のデザインが整ったら、読者がブログを回りやすくなる設定も取り入れてみましょう。ちょっとした工夫で、ヘッダーの使い勝手がぐっと上がります。

筆者は追従ヘッダーをスマホでもオンにしていたところ、画面の一部が常にふさがって記事が読みにくくなってしまいました。今はパソコンとスマホで表示を分けて調整し、どちらでも快適に読めるようにしています。

追従ヘッダーで回遊しやすくする

追従ヘッダーをオンにすると、スクロールしてもメニューがいつでも使えるようになります。ただし、スマホでは画面を圧迫しやすいので、表示を確認しながら設定しましょう。

お知らせバーで大切な情報を届ける

SWELLのお知らせバーを使うと、ヘッダーの上部にひと言メッセージを表示できます。新しい記事の案内やおすすめ記事への誘導に使うと効果的です。

見やすいヘッダーのチェックポイント

スマホでロゴが大きすぎない
背景色と文字色にはっきり差がある
メニューの項目が多すぎない
追従表示が本文の邪魔になっていない

よくある質問

ロゴ画像はどのくらいの大きさがいいですか？: 横長で、ぼやけない程度の解像度の画像がおすすめです。カスタマイザーで表示サイズを調整できるので、プレビューで見え方を確認しながら決めましょう。
スマホでメニューが表示されません。: スマホでは、メニューが開閉式のボタンにまとめて表示されるのが一般的です。メニューの表示位置が正しく設定されているかも確認しておきましょう。
トップページだけヘッダーを透明にできますか？: SWELLでは、トップページのヘッダーを透過させる設定があります。メインビジュアルと組み合わせると、おしゃれな印象のトップページに仕上がります。
ヘッダーの設定を元に戻したいときは？: カスタマイザーの多くの項目は、初期の状態に戻して設定し直すことができます。大きく変える前に、今の設定をメモしておくと安心です。