【SWELL】ヘッダーの作り方|使いやすくカスタマイズ
![SWELLのヘッダーの作り方](https://handmade-iroiro.com/wp-content/uploads/2023/08/swell_header.jpg)
![](https://handmade-iroiro.com/wp-content/uploads/2023/04/hukidashi_icon_woman-150x150.jpg)
SWELLのヘッダーの作り方を知りたい!
WordPressテーマ”SWELL”を使えば、簡単に自分好みのヘッダーを作ることができます。
今回は、私が実際に作った「ハンドメイド販売サイト」のヘッダーの作り方を解説します。
参考にしていただければ、幸いです。
SWELLのヘッダーのカスタマイズ例
![SWELLのヘッダーの作り方](https://handmade-iroiro.com/wp-content/uploads/2023/07/toppage_header_more.jpg)
![SWELLのヘッダーの作り方](https://handmade-iroiro.com/wp-content/uploads/2023/07/toppage_header_more.jpg)
今回は、こちら↑のヘッダーの作り方を解説します。
まず、実際に製作したサイトは以下です▼
商品を検索しやすいようグローバルナビに”商品一覧“を入れ、ドロップダウンのメニューにしました。
ちなみに、グローバルナビにある”お知らせ”と”商品一覧”は、どちらも”投稿ページ”になっています。
Custom Post Type UIというプラグインを使えば、簡単に投稿ページを増やすことができます。
投稿ページの詳しい作り方については、以下の記事を参考にして下さい▼
![](https://handmade-iroiro.com/wp-content/uploads/2023/07/wordpress-cpt-ui-300x169.jpg)
![](https://handmade-iroiro.com/wp-content/uploads/2023/07/wordpress-cpt-ui-300x169.jpg)
ヘッダー(PC・通常時)
![](https://handmade-iroiro.com/wp-content/uploads/2023/07/toppage_header.jpg)
![](https://handmade-iroiro.com/wp-content/uploads/2023/07/toppage_header.jpg)
ヘッダー(PC・追従時)
![](https://handmade-iroiro.com/wp-content/uploads/2023/07/toppage_header_scroll.jpg)
![](https://handmade-iroiro.com/wp-content/uploads/2023/07/toppage_header_scroll.jpg)
ヘッダー(SP)
![](https://handmade-iroiro.com/wp-content/uploads/2023/07/toppage_header_sp.jpg)
![](https://handmade-iroiro.com/wp-content/uploads/2023/07/toppage_header_sp.jpg)
SWELLのヘッダーの作り方
SWELLのヘッダーの作り方を解説していきます。
1.グローバルナビの設定をする
ヘッダーの設定をする前に、グローバルナビの設定をします。
![メニューの編集ページを開く](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_navi_make_01.jpg)
![メニューの編集ページを開く](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_navi_make_01.jpg)
外観→”メニュー“をクリック
![メニュー項目を追加する①](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_navi_make_02_1.jpg)
![メニュー項目を追加する①](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_navi_make_02_1.jpg)
“メニューを編集”→”メニュー項目を追加“をクリック。
グローバルナビに表示したい項目にチェックを入れ、”メニューに追加”をクリックすると、右側のメニュー構造に追加したメニューが入ります。
![メニュー項目を追加する②](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_navi_make_02_2.jpg)
![メニュー項目を追加する②](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_navi_make_02_2.jpg)
“カスタムリンク“を使用すれば、外部のページや、好きな場所のリンクを張ることができます。
私は、”ITEM”には商品一覧ページ、”CONTACT”には、STORESのお問い合わせページのリンクを張りました。
![メニュー構造の設定をする](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_navi_make_03.jpg)
![メニュー構造の設定をする](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_navi_make_03.jpg)
“メニュー名“に分かりやすいメニューを設定します。
項目はドラッグして、好みの順番に入れ替えます。
入れ替えが終わったら、メニュー設定の”グローバルナビ“にチェックを入れ、”メニューを保存“をクリックします。
2.ヘッダーの設定をする
グローバルナビの設定が終わったら、ヘッダーの設定をします。
![ヘッダーのカスタマイズページを開く①](https://handmade-iroiro.com/wp-content/uploads/2023/08/mainvisual_make_01_1.jpg)
![ヘッダーのカスタマイズページを開く①](https://handmade-iroiro.com/wp-content/uploads/2023/08/mainvisual_make_01_1.jpg)
外観→”カスタマイズ“をクリック。
![ヘッダーのカスタマイズページを開く②](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_make_01_2.jpg)
![ヘッダーのカスタマイズページを開く②](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_make_01_2.jpg)
“ヘッダー“をクリック。
カラー設定
![ヘッダーのカスタマイズ設定をする・カラー設定](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_make_02_1.jpg)
![ヘッダーのカスタマイズ設定をする・カラー設定](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_make_02_1.jpg)
今回は、ヘッダーの背景を透明にするので、カラー設定の必要はありません。
デフォルトのままでOKです。
ヘッダーロゴの設定
![ヘッダーのカスタマイズ設定をする・ヘッダーロゴの設定](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_make_02_2.jpg)
![ヘッダーのカスタマイズ設定をする・ヘッダーロゴの設定](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_make_02_2.jpg)
ヘッダーロゴ画像の設定をします。
ロゴの大きさは”画像サイズ“で変更できます。
画像を入れない場合は、自動的にサイト名が入ります。
ちなみに、小さい画像を設定するとボケてしまうので、少し大きめの画像を設定した方が良いです。
私は、400×120の画像を使用しました。
レイアウト・デザイン設定
![ヘッダーのカスタマイズ設定をする・レイアウト・デザイン設定](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_make_02_3.jpg)
![ヘッダーのカスタマイズ設定をする・レイアウト・デザイン設定](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_make_02_3.jpg)
ヘッダーのレイアウト(PC)を以下より選びます。
- ヘッダーナビをロゴの横に(右寄せ)
- ヘッダーナビをロゴの横に(左寄せ)
- ヘッダーナビを下に
- ヘッダーナビを上に
ヘッダーの背景を透明にする場合は、PCの設定をヘッダーナビをロゴの横に(右寄せ)か、ヘッダーナビをロゴの横に(左寄せ)から選ぶ必要があります。
ヘッダーのレイアウト(SP)を設定します。
SPの設定は、お好きな設定を選んでください。
ヘッダーの境界線を設定します。
- なし
- 線
- 影
お好みに合わせて設定してください。
トップページでの特別設定
![ヘッダーのカスタマイズ設定をする・トップページでの特別設定](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_make_02_4.jpg)
![ヘッダーのカスタマイズ設定をする・トップページでの特別設定](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_make_02_4.jpg)
ヘッダーの背景を透明にするかどうかを選びます。
- しない
- する(文字色:白)
- する(文字色:黒)
今回は背景を透明にしたいので、”する“を選択します。文字色は”白“か”黒“か選びます。
透過時のロゴ画像を設定します。
ヘッダーロゴの設定で設定した画像と同じで良い場合は、設定不要です。
ヘッダーの追従設定
![ヘッダーのカスタマイズ設定をする
・ヘッダーの追従設定](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_make_02_5.jpg)
![ヘッダーのカスタマイズ設定をする
・ヘッダーの追従設定](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_make_02_5.jpg)
ヘッダーの追従設定を、以下より選びます。
- ヘッダーを追従させる(PC)
- ヘッダーを追従させる(SP)
今回はPC・SPともに追従させるを選びまし。
追従ヘッダー(PC)の背景不透明度を設定します。
透過させたい場合は、1以下の数値を入れます。
ヘッダーバー設定
![ヘッダーのカスタマイズ設定をする・ヘッダーバー設定](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_make_02_6.jpg)
![ヘッダーのカスタマイズ設定をする・ヘッダーバー設定](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_make_02_6.jpg)
ヘッダーバー設定の設定をします。
ヘッダー上にバーを表示させたい場合は、設定します。
今回はヘッダーバーなしなので、設定不要です。
キャッチフレーズ設定
![ヘッダーのカスタマイズ設定をする・キャッチフレーズ設定](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_make_02_7.jpg)
![ヘッダーのカスタマイズ設定をする・キャッチフレーズ設定](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_make_02_7.jpg)
キャッチフレーズ設定をします。
キャッチフレーズの表示位置を以下より選びます。
- 表示しない
- ヘッダーバーに表示
- ヘッダーロゴ近くに表示
今回は、“表示しない“を設定します。
ヘッダーメニュー(グローバルナビ)設定
![ヘッダーのカスタマイズ設定をする
・ヘッダーメニュー設定](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_make_02_8.jpg)
![ヘッダーのカスタマイズ設定をする
・ヘッダーメニュー設定](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_make_02_8.jpg)
ヘッダーメニュー(グローバルナビ)設定をします。
マウスホバーエフェクトを以下より選びます。
- ラインの出現(中央から)
- ラインの出現(左から)
- ブロックの出現
- 背景グレー
- 背景明るく
お好みのものを設定してください。
ホバー時に出てくるラインの色
- メインカラー
- テキストカラー
メインカラーorテキストカラーより選びます。
ヘッダーメニューの背景色
今回は横並びなので、”設定不要“です。
サブメニューの背景色
- ホワイト
- メインカラー
サブメニューがある場合はどちらか選択します。
検索ボタン設定
![ヘッダーのカスタマイズ設定をする
・検索ボタン設定](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_make_02_9.jpg)
![ヘッダーのカスタマイズ設定をする
・検索ボタン設定](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_make_02_9.jpg)
検索ボタンの設定をします。
検索ボタンの表示位置(PC)
- 表示しない
- ヘッダー内のアイコンリストに表示
- ヘッダーメニュー非表示
不要な場合は、”表示しない”を選択。必要な場合はどちらかを選択します。
検索ボタンの表示設定(SP)
- 表示しない
- カスタムボタンにセット
不要な場合は、”表示しない”を選択。必要な場合は”カスタムボタンにセット”を選択します。
メニューボタン設定
![ヘッダーのカスタマイズ設定をする
・メニューボタン設定](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_make_02_10.jpg)
![ヘッダーのカスタマイズ設定をする
・メニューボタン設定](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_make_02_10.jpg)
メニューボタン設定をします。
ここで設定するのは、スマホ時のハンバーガーメニューの設定です。
アイコン下に表示するテキスト
3本線の上にテキストを入れたい場合はここに入れます。
今回はテキストなしなので、未入力です。
メニューボタン背景色
メニューボタンの背景色を設定します。
デフォルトは透明になっています。
![公開する](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_make_02_11.jpg)
![公開する](https://handmade-iroiro.com/wp-content/uploads/2023/08/header_make_02_11.jpg)
各種設定が終わったら、”公開“を押します。
ヘッダーの作り方の解説は、以上になります。
まとめ
今回は、WordPressテーマ”SWELL”でヘッダーを作る方法について解説しました。
組み合わせ次第で、様々なヘッダーを作ることができます。
参考にしていただければ、幸いです。
その他のカスタマイズ例は以下の記事で解説しています▼
![](https://handmade-iroiro.com/wp-content/uploads/2023/07/swell_ecsite-300x169.jpg)
![](https://handmade-iroiro.com/wp-content/uploads/2023/07/swell_ecsite-300x169.jpg)
ヘッダーを作ったら、メインビジュアルも作ってみましょう▼
![](https://handmade-iroiro.com/wp-content/uploads/2023/08/swell_mainvisual-300x169.jpg)
![](https://handmade-iroiro.com/wp-content/uploads/2023/08/swell_mainvisual-300x169.jpg)
便利なボックスメニューの作り方は以下の記事で解説しています▼
![](https://handmade-iroiro.com/wp-content/uploads/2023/07/swell_boxmenu-300x169.jpg)
![](https://handmade-iroiro.com/wp-content/uploads/2023/07/swell_boxmenu-300x169.jpg)
コメント