「SWELL」でWebサイトのヘッダーを設定してみた!

WordPress初心者のエディター小林が、WordPressで人気のテーマ「SWELL」を実際に使い、学びながら紹介していく本記事。今回のテーマは、「ヘッダーの設定方法」について。

その細かい手順を画像付きで、ゼロから丁寧に解説していきます!

WordPressの人気テーマ「SWELL」についての関連記事はこちら。

あわせて読みたい
「SWELL」でサイトの基本カラーを設定してみた! WordPress初心者のエディター小林が、WordPressで人気のテーマ「SWELL」を実際に使い、学びながら紹介していく本記事。今回のテーマは、「SWELLの基本カラーの設定方法...
目次

まずは、SWELLの超便利機能「カスタマイザー」から

「SWELL」では、WordPress管理画面にある「カスタマイザー」からサイトのビジュアルやデザインに関するあらゆる設定をここから行えます!

「カスタマイズ」をクリック。
(呼称は「カスタマイザー」なのに表示は「カスタマイズ」。。)

カスタマイザーでは、左側の設定項目で変更した設定を、右画面のプレビューでその都度確認しながら作業ができるのです!とても便利!

今回は「ヘッダー」を設定していきます。

ヘッダーのカラー設定

まずは、「ヘッダーのカラー」設定から。
カラー設定の項目で、試しながら設定 設定していきましょう!

 

ヘッダーロゴ画像の設定

次に「ヘッダーのロゴ」についてです。
ヘッダーに、サイトのロゴ画像を表示させることができるのですが、ここで一点注意が必要です。

それは、「ロゴ画像の大きさをヘッダーに合わせて調節する」こと!
ヘッダー表示の大きさにあわせて、ロゴの画像を変えましょう!
以下、失敗例と成功例です。

失敗例:調節前(ロゴがスクエア画像の場合)

成功例:調節後(ロゴを横長にしました!)

レイアウト・デザイン設定

「レイアウト・デザイン設定」の項目では、ロゴ画像とメニューボタンの並び方について設定を行えます。

・ヘッダーのレイアウト(PC)
・ヘッダーのレイアウト(SP)

とありますが、
(PC)=パソコンでの表示
(SP)=スマホ・タブレットでの表示

のことです。画面左のコントロール、一番下にパソコンでの表示とタブレット、スマホでの表示に切り替えができるボタンがあるので、適宜試しながらの調整をおすすめします。

トップページでの特別設定

トップページでの特別設定」とは、メインビジュアルにヘッダーを被せることができる設定です。

ヘッダーの追従設定

ここでは、ページをスクロールした時に、ヘッダーを追従させるかどうかを設定できます。

 

もしも設定をリセットしたくなったら!

ここで、設定項目が多く一つ一つ手作業で元に戻すのが面倒くさくなってしまった時の最後の手段として、「カスタマイザーのリセット」をご紹介しておきます。

「カスタマイザーのリセット」では「カスタマイザー」内で行われた全ての設定が削除され、初期化されます。カラー以外の設定をしている場合は、使用する時に十分注意してください!

カスタマイザーのリセットは、WordPress管理画面の「SWELL設定」→「リセット」→「カスタマイザーのリセット」→「デフォルトに戻す」

まだまだあるぞ、ヘッダー設定。

以上、基本的なヘッダー設定についての説明でしたが、設定項目はまだまだたくさんあります!

一つ一つ試しながら試行錯誤していきましょう!

 

この記事が気に入ったら
フォローしてね!

目次