![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
こんにちは。サメ(@cookie_22.com)です。
![](https://cookie22.com/wp-content/uploads/2021/06/undraw_Modern_professional_re_3b6l.png)
![](https://cookie22.com/wp-content/uploads/2021/06/undraw_Modern_professional_re_3b6l.png)
![](https://cookie22.com/wp-content/uploads/2021/06/undraw_Modern_professional_re_3b6l.png)
SWELLのヘッダーをカスタマイズしたいけど、どこで設定できるかわからない。詳しく教えて欲しい。
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
こんな悩みを解決できる記事です!!
この記事でわかること
- ヘッダーのカスタマイズ方法
この記事を書いた人
![僕](https://cookie22.com/wp-content/uploads/2021/08/91bfe02ace532bee28130dd052a8541e-1024x1024.jpg)
![僕](https://cookie22.com/wp-content/uploads/2021/08/91bfe02ace532bee28130dd052a8541e-1024x1024.jpg)
名前:サメ
- 2001年生まれ
- 大学生ブロガー
- Hello!! 404 運営者
- コロナ自粛中にブログを始める
- 3万PV達成!
- 大学生向けの情報を発信中
ヘッダーのこの部分ってどうやってカスタマイズするんだろう?
という疑問はSWELLを使っていると、誰でもぶち当たる壁だと思います。
この記事ではヘッダーを部分ごとに分けてカスタマイズする方法を個別で解説していきます。
この記事を最後まで読むと、誰でもヘッダーのカスタマイズができるようになります!
![](https://cookie22.com/wp-content/uploads/2021/08/swell2_pr_banner.jpeg)
SWELLヘッダーの場所ごとの名前
![SWELLヘッダーの場所ごとの名前](https://cookie22.com/wp-content/uploads/2021/09/bee4cc4df252a222162e4eb120be8dc9.jpg)
![SWELLヘッダーの場所ごとの名前](https://cookie22.com/wp-content/uploads/2021/09/bee4cc4df252a222162e4eb120be8dc9.jpg)
SWELLのヘッダーは大きく分けて3つに分けられます。
- ヘッダーロゴ
- ナビゲーションバー
- お知らせバー
それぞれで設定する場所が違うので紛らわしいですがしっかり設定することで、収益をあげたり回遊率を高めたりできるので余裕があればこだわってみたい場所です。
ヘッダーロゴ
![ヘッダーロゴ](https://cookie22.com/wp-content/uploads/2021/09/90b80eabc700bdf6fb50eb371019f266.png)
![ヘッダーロゴ](https://cookie22.com/wp-content/uploads/2021/09/90b80eabc700bdf6fb50eb371019f266.png)
ヘッダーロゴはヘッダーの顔とも言える部分です。主に画像で設定します。
ぜひブログのロゴをデザインして貼ってみてください。
スマホとPCどちらでもヘッダーに表示され、クリックすることでトップページに戻ることができます。
グローバルナビ(ヘッダーメニュー)
![グローバルナビ(ヘッダーメニュー)](https://cookie22.com/wp-content/uploads/2021/09/2556f3e926e8981ef8c19e57f376404b.jpg)
![グローバルナビ(ヘッダーメニュー)](https://cookie22.com/wp-content/uploads/2021/09/2556f3e926e8981ef8c19e57f376404b.jpg)
グローバルナビはいろいろな使い方ができる部分です。
代表的な使い方としては、
- カテゴリーを表示する
- 読んで欲しいページを表示する
- ホームを表示する
などなど設置するリンクによって様々な使い方ができます。
PCではヘッダーロゴの横に表示されますが、スマホでは開閉メニューの中に移動します。
お知らせバー
![お知らせバー](https://cookie22.com/wp-content/uploads/2021/09/e46a465aeecaee63b36850daf35596e4.jpg)
![お知らせバー](https://cookie22.com/wp-content/uploads/2021/09/e46a465aeecaee63b36850daf35596e4.jpg)
お知らせバーは基本的には読んで欲しいキラーページや購入リンクを貼っておきます。
こちらもグローバルナビと同じく様々な使い方ができます。
ヘッダーロゴの設定場所
![ヘッダーロゴの設定場所](https://cookie22.com/wp-content/uploads/2021/09/0a99ce0a31eb13c5cd43abc00a265471.jpg)
![ヘッダーロゴの設定場所](https://cookie22.com/wp-content/uploads/2021/09/0a99ce0a31eb13c5cd43abc00a265471.jpg)
ヘッダーロゴは、カスタマイズの「ヘッダー」から設定することができます。
ヘッダーロゴの設定から画像を選択しましょう。
- WordPressダッシュボード
- 外観
- カスタマイズ
この順で進んでいき、SWELLのカスタマイズ画面に移動しましょう。
![カスタマイズ画面から「ヘッダー」を選択](https://cookie22.com/wp-content/uploads/2021/09/fe94a4b4e265e0d1226ee4c29aec7e49.png)
![カスタマイズ画面から「ヘッダー」を選択](https://cookie22.com/wp-content/uploads/2021/09/fe94a4b4e265e0d1226ee4c29aec7e49.png)
カスタマイズ画面から「ヘッダー」を選択しましょう。
ヘッダーロゴの「画像の設定」からヘッダー画像を選択することで、ヘッダーロゴの画像を変更することができます。
ヘッダーロゴのよくある質問
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
ヘッダーロゴを設定するに当たってよくある質問をまとめました!
- 画像の大きさはどれくらいがいいの?
-
このサイトのヘッダー画像の大きさは約1100×200ピクセルです!
縦横比がたいたい5:1くらいがオススメです
- 画像の背景が透明にならない
-
画像の背景を透明にしたい時は拡張子が「PNG」のものを使いましょう。
「jpg」の場合は背景が透明になりません。透明な画像を作りたい時は背景透過のサイトを使うのもオススメです!
\ オススメのサイト /
remove.bg写真・画像の背景をワンクリックで消す方法 | まずは無料でお試し – remove.bg remove.bgは写真の背景を消したい、写真から人物を切り抜きたい方に最適です。背景透過のやり方が分からない方でも、簡単に画像の切り抜きや背景の透過が可能。パソコンか… - ヘッダー全体を透明にしたい
-
ヘッダー全体を透明にしたい時は、カスタマイズヘッダー内の「トップページでの特別設定」の「ヘッダーの背景を透明にするかどうか」の欄を「する」に変更してください。
\詳しくは公式サイトへ /
![](https://swell-theme.com/wp-content/uploads/2019/01/thumb_header_setting.png)
![](https://swell-theme.com/wp-content/uploads/2019/01/thumb_header_setting.png)
ナビゲーションバーの設定場所
ナビゲーションバーの設定はカスタマイズからではありません。ナビゲーションバーの設定は「外観」のなかの「メニュー」から行います。
- WordPressダッシュボード
- 外観
- メニュー
この順に進んでいきます
![](https://cookie22.com/wp-content/uploads/2021/09/672ef5bf8c8d0e023b6dac97b5f86050.jpg)
![](https://cookie22.com/wp-content/uploads/2021/09/672ef5bf8c8d0e023b6dac97b5f86050.jpg)
メニューに進んだら、「編集するメニュー」を「グローバルナビ」に変更しましょう
グローバルナビには
- 固定ページ
- 投稿
- LP
- カスタムリンク
- カテゴリー
を設置できます。
自由に設定してみましょう!!
グローバルナビのよくある質問
- アイコンを表示させたい
-
グローバルナビの最初の部分にこのようなアイコンを表示させたい場合は、アイコンタグで設定できます。
\ 詳しくはこちらの記事で紹介しています! /
あわせて読みたいSWELLでアイコンを使う方法と使えるアイコン一覧 こんにちは。サメ(@cookie_22.com)です。 SWELLでアイコンを使いたい。 こんな悩みを解決できる記事です!! この記事でわかること SWELLでアイコンを使う方法SWELLで… - 下に英単語を入れたい
-
SWELLのサイトで良くあるのが、このように「ホーム」と書かれた下に小さく英語で「HOME」と書いてあるデザイン。
このようにしたい時は、「説明」の部分に表示したい文字を入れましょう。
お知らせバーの設定場所
お知らせバーの設定は、カスタマイズの「サイト全体設定」から設定することができます。
- 外観
- カスタマイズ
- サイト全体設計
- お知らせバー
この順で設定できます。
設定できる項目は、
- 文字の大きさ
- 表示タイプ
- お知らせ内容
- リンク先のURL
- ボタンテキスト
\ 詳しくは公式サイトをご覧ください! /
![](https://swell-theme.com/wp-content/uploads/2019/04/thumb_infobar.png)
![](https://swell-theme.com/wp-content/uploads/2019/04/thumb_infobar.png)
まとめ:ヘッダーを自由にカスタマイズしてPVを底上げしよう!
ヘッダーは全てのページに表示されています。
いろいろカスタマイズしてみて、最も回遊率が上がるものにしてみてください!
最後にこの記事の内容をまとめていこうと思います。
- ヘッダーロゴはカスタマイズのヘッダーから変更する
- グローバルナビは外観のメニューから変更する
- お知らせバーはカスタマイズのサイト全体設定から変更する
皆さんもヘッダーをカスタマイズしてオシャレなサイトを作ってみてくださいね!!
![](https://cookie22.com/wp-content/uploads/2021/08/swell2_pr_banner.jpeg)
コメント