ここではテーマSWELLのカスタマイズのやり方の第３回目としてヘッダー設定を解説していきます。では早速行ってみましょう♪
はじめに ヘッダー設定：概要
ヘッダーとは？どこ？
はぴねこヘッダーって
サイトで見たらどこなの？
かのみヘッダーはブログやサイトの一番上に表示されるエリアのこと。サイトを訪れた人が最初に目にする部分だよ
ヘッダー設定をする方法
はぴねこヘッダー設定って
どこからどう行けば出来るの？
ワードプレス管理画面
上部にあるカスタマイズをクリック
下記から『ヘッダー』を選択
ヘッダー設定で変更できるコト
ヘッダー設定で変更できることはたくさんあります！
- カラー設定
- ヘッダーロゴの設定
- レイアウトデザイン設定
- トップページでの特別設定
- ヘッダーの追従設定
- ヘッダーバー設定
- キャッチフレーズ設定
- ヘッダーメニュー（グローバルナビ）
- ヘッダーメニュー(スマホ)
- 検索ボタン設定
- メニューボタン設定
- カスタムボタン設定
かのみヘッダー設定も種類が豊富だよ～
上から順に説明していくね！
カラー設定
ヘッダーのカラーやヘッダー文字色を
お好みの色に変えることが出来ます。
ヘッダー背景色
ヘッダー背景色はお好みでOKですが、いろいろなサイトを見てその配色を参考にするといい感じになりやすいですよ！
ヘッダー文字色
もし文字を入れる場合は文字の色も入れることが出来ます。
私は黒にしていますが、文字は表示せずロゴ画像を設定しています。
ロゴ画像の設定
はぴねこロゴ画像ってなんだニャ？
かのみこのサイトのロゴ画像はこんなのだよ
はぴねこヘッダーにあるこの画像がのロゴなんだね！
はぴねこサイズはどれくらいで作ったらいいのかニャ？
かのみスウェルでは1600×360ピクセルの画像が使われているけど、
私はスピード重視で600×135にしたよ！
お好みのロゴ画像を
ドロップ＆ドロップなどでアップロードし設定します。
Ⓐではパソコン用のヘッダー
Ⓑでパソコン用の追従ヘッダー
Ⓒでスマホのヘッダー
それぞれのサイズを指定できます。
かのみ必ず下の方にあるⒹで、すべてのデバイス（パソコン・タブレット・スマホ）を選択して確認してみよう！
＼ クリックするとタブを切り替えらるよ ／
サイズを指定してからⒹでパソコンマークをクリックしてください。
実際パソコンで見た時の画面が確認できます。
画像サイズ(PC)
ヘッダーパソコンの画像サイズは32～120ピクセルでお好みで設定しましょう当サイトは100で設定。
画像サイズ(PC追従ヘッダー)
ヘッダーパソコンの画像サイズは24～48ピクセルでお好みで設定しましょう。当サイトは50で設定。
画像サイズ(SP)
ヘッダーパソコンの画像サイズは40～80ピクセルでお好みで設定しましょう当サイトは50で設定。
レイアウト・デザイン設定
パソコンで言うヘッダーナビ（グローバルナビ・グローバルメニュー）、
スマホでのハンバーガーメニューの表示位置を
お好みの位置に選択します
かのみヘッダーのレイアウトでは
ヘッダーナビをどこに表示するかを指定する設定だよ
はぴねこヘッダーナビって何だっけ？
かのみヘッダーナビは、簡単に言うと、あなたがよく訪れるブログやウェブサイトの上部にある、『ホーム』『ブログ』『お問い合わせ』といったリンクが並んでるあの部分のことだよ！
はぴねこああ、それってグローバルメニューって言うんじゃなかったっけ？
かのみその通り！実はヘッダーナビとグローバルメニューは、同じものを指してるんだよ。
はぴねこへえ、知らなかった。でもスマホで見ると、三本線のアイコンになってるよね？
かのみそうだね。スマホではその三本線のアイコンを「ハンバーガーメニュー」と呼んでいて、画面のサイズが狭いから、グローバルメニューをあのような形でまとめて表示することが多いんだよ。
はぴねこそうなんだ！全部つながってるんだね！
ヘッダーナビ
グローバルナビ
グローバルメニュー
と
ハンバーガーメニューは
全部同じ内容を指しています！
ヘッダーレイアウト(PC)
ヘッダーナビ(グローバルメニュー)を
パソコン画面のヘッダー上の
どこに表示するかという設定
かのみ上のヘッダーナビの位置を決める設定だよ！
ヘッダーレイアウト(SP)
スマホのハンバーガーメニューを
ヘッダーのどこに表示するかという設定。
右利きが多いことを想定してお好みで設定しよう！
かのみハンバーガーメニューを
画面のどこに持ってくるかっていうことを決める設定だよ！
ヘッダーの境界線
かのみヘッダーの境界線は
よ～く見ないと分からないような、
とっても細かな設定になります。
あなたのブログで表示して確認してみて下さい
トップページでの特別設定
ヘッダーの背景を透過にするかどうかの設定です。
あなたのブログに合わせて決めましょう
＼ クリックするとタブを切り替えらるよ ／
ヘッダーの追従設定
特に理由が無ければ
『追従させる』にチェックを入れておくとベター
はぴねこヘッダーの追従設定ってなぁに？
かのみブログやウェブサイトの上部にあるメニューやロゴの部分を、ページをスクロールしてもずっと上に表示させ続ける設定のことだよ。
はぴねここの機能ってどんな時に便利かニャ？
かのみページのどこにいてもすぐにメニューを使ったり、ロゴをクリックしてトップページに戻ったりできるから、とても便利なんだよ
ヘッダーバー設定
ヘッダーバーの背景色・文字色
SNSアイコンリストを表示するかなどを設定できます
ヘッダーバー背景色
SNSアイコンリストを表示するにチェックを入れると、ここで選択した色のヘッダーが一番上に表示されます。
ヘッダーバー文字色
キャッチフレーズを表示する場合、設定した色で文字が表示されます。
表示設定
- 『SNSアイコンリストを表示する』にチェックを入れることで、表示する対象がある場合ヘッダーの上にバーが表示されます。
- また『コンテンツが無くてもでもボーダーとして表示する』にチェックを入れることで、コンテンツが無くてもエリアの境界線としてボーダーが表示されるようになります。
＼ クリックするとタブを切り替えらるよ ／
キャッチフレーズの設定
ヘッダーバーに表示か、ヘッダーロゴ近くに表示か表示しないの三択だよ
かのみ私はキャッチフレーズを設定していませんが、
設定している方はキャッチフレーズをヘッダーのどこの位置に表示するか選択することが出来ますよ。実際目で見て選択しましょう！
ヘッダーメニュー(グローバルナビ)設定
実際に自分のサイトを見てお好みで選択しよう♪
Ⓐマウスホバーエフェクト
はぴねこマウスホバーエフェクトってなぁに？
かのみマウスホバーエフェクトはね、マウスカーソルをブログのある部分（たとえば、リンクやボタン）の上にのせたときに、その部分が少し変化することを言うよ！
Ⓑホバー時に出てくるラインの色
はぴねこホバー時って何？
かのみ「ホバー」は、マウスカーソルをリンクやボタンの上に置くことを言うよ！
かのみここではヘッダーメニューのリンクの上にマウスカーソルを置いたとき（ホバーしたとき）に、リンクの下や周りに現れる線（ライン）の色のことを指しているよ！
Ⓒヘッダーメニューの背景色
お好みの色か、背景色を設定しないかの2択。
Ⓓサブメニューの背景色
白色またはメインカラーを選択できます。
これはサブメニューの背景色を
メインカラー(ピンク)に設定している場合
ヘッダーメニュー(SP)設定
スマホ表示時のループ設定
スマホのヘッダーメニューをループするかどうかの設定
はぴねこヘッダーメニューをループさせるってどういうコト？
ヘッダーメニュー設定をループさせるをクリックすることによって
下記のようになりました。(メインメニューが少なくて…(;^_^A)
かのみメニューが多い場合はどんどん横にスクロール出来る感じになるよ！メニューが少ない時はおすすめしないよ～
かのみあっ、そうそう、この『ヘッダーメニューをループさせる』っていう設定は、まずはスマホのヘッダー部分にメニューを表示する必要があるの。
かのみだからやってみたい！と思ったときは
まずはそれを最初にやる必要があるからね！
ダッシュボード＞外観＞カスタマイズ＞メニューをクリックして
メニュー設定部分で
もともとあったグローバルナビを使用する場合
『スマホヘッダー』と書かれた部分にチェックを入れ
メニューを保存をクリックする。
すると下記のように
スマホヘッダーの上にメニューが表示されます。
かのみスマホ用ヘッダーを個別で設定したい時は
新しく専用のメニューを作って、
スマホ用ヘッダーにチェックを入れるといいよ！
検索ボタン設定
実際にパソコンやスマホ表示にして
自分のサイトを確認してみましょう！
はぴねこ検索ボタンって何だっけ？
かのみ虫眼鏡マークがトレードマークのサイト内を検索できる機能だよ
検索ボタンの表示位置（PC）
パソコン版検索ボタンの表示位置
＼ クリックするとタブを切り替えらるよ ／
検索ボタンの表示設定（SP）
スマホ版検索ボタンの表示設定
＼ クリックするとタブを切り替えらるよ ／
メニューボタン設定
アイコン下に表示するテキスト
メニューの下にテキストを表示したい場合コチラに書くと反映されます
メニューボタン背景色
メニューボタンの背景の色が設定できます。
＼ クリックするとタブを切り替えらるよ ／
カスタムボタン設定
はぴねこカスタムボタンってなぁに？
かのみウェブサイトやブログに設置できる、自分の好きなデザインや機能を持ったボタンのことだよ！
かのみデフォルトでは検索アイコンが表示されてるよ。
ここの設定を変えることでその部分に他の機能を追加できるってことね。
カスタムボタンではお問合せページへ誘導したり、あなたのSNSに誘導したり、メールマガジンの登録ページへのリンクにしたり…アイデア次第で色々使えますよ！
アイコンクラス名
はぴねこアイコンクラス名って何？
かのみアイコンクラス名は、ウェブサイトやブログの中で特定のアイコンを表示するための「名札」のようなものだよ。この「名札」を指定することで、それに対応するアイコンが表示されるよ！
かのみスウェル専用のアイコン一覧を参考にしてね！
＼ クリックすると外部サイト(SWELL公式サイト)に飛びます／
デフォルトではアイコンクラス名が
『icon-search』になっています。
上記の設定をスマホ画面で確認すると以下の画面になります。
スウェルで使えるアイコン一覧を見ると
『icon-search』も載っていますよね。
要するに、アイコンクラス名にお好みのクラス名を記載すると
お好みのアイコンが表示されるという訳です
かのみこの虫眼鏡マークの部分をスウェル専用のアイコン一覧から
お好みのアイコンクラス名を記載し選択すると変更できるよ！
アイコン下に表示するテキスト
アイコン下には好きな文字を入れることが出来ます。
カスタムボタンの背景色
カスタムボタン設定画面で
お好みの色に変更することが出来ます。
まとめ
いかがでしたか？ヘッダー設定のカスタマイズ、思ったよりも簡単だったのではないでしょうか？私の場合は、実際に手を動かしてみることで、理解が深まりました。あなたも今回の解説を参考に、SWELLのカスタマイズを楽しんでみてくださいね。最後までありがとうございました！
