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

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

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

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

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

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

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

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

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

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

ヘッダーのカラー設定

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

 

ヘッダーロゴ画像の設定

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

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

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

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

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

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

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

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

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

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

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

ヘッダーの追従設定

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

 

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

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

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

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

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

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

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

 

ゼロから立ち上げた『EDiT.』が、たった4ヶ月で急成長。ロースターのオウンドメディア運営方法を無料で教えます。

無料PDF:ロースター式オウンドメディアのゼロからの立ち上げ方を無料公開。

オウンドメディアを始めようか悩んでいるけど、何から始めればよいのかわからない。始めたはいいものの、どうやってアクセス数を上げていけばいいのかわからない。そんな悩みを抱えていませんか?

この資料では、ロースターが実際にどのようにオウンドメディアを立ち上げ、現在どのように運営しているのかをひとつひとつ解説しています。CMSの選び方から、LPの作り方、記事の運営方法まで、ロースター式オウンドメディア運営術をPDFにまとめました。

あなたのメディア立ち上げ・運用に、ぜひご活用ください。

 

TOC
閉じる