WordPressテーマ ▶︎ AFFINGER6 関連の記事 はこちらから!AFFINGER6

SWELL カスタマイザー完全ガイド|ヘッダーのポイントと使い方!まとめてみた。

12801_swell-customize-header-2

こんにちは "osaboo"osabooです。"@osaboo_Bot"

SWELLのカスタマイザーでできる「ヘッダー」のポイントと使い方を初心者向けに解説します。

カスタマイザーのメニュー項目に沿って、一つ一つ徹底解説します。

「カスタマイザーってなに?」という初心者さん!必見です。^^

この記事では、「ヘッダー」の詳細項目全てを設定箇所と反映箇所を織り混ぜてご紹介しています。

こんな方におすすめ
  • SWELL 初心者さん
  • カスタマイザーってなに?
  • カスタマイザーの「ヘッダー」の内容を詳しく知りたい
  • SWELLの設定箇所に対する反映箇所がわからない
この記事でわかること
  1. カスタマイザーについて
    1. カスタマイザーの起動手順
  2. ヘッダー
    1. カラー設定
    2. ヘッダーロゴの設定
    3. レイアウト・デザイン設定
    4. トップページでの特別設定
    5. ヘッダーの追従設定
    6. ヘッダーバー設定
    7. キャッチフレーズ設定
    8. ヘッダーメニュー(グローバルナビ)設定
    9. ヘッダーメニュー(SP)設定
    10. 検索ボタン設定
    11. メニューボタン設定
    12. カスタムボタン設定
  3. まとめ

それではご覧ください。

目次 "Contents"

カスタマイザーについて

カスタマイザーについては、こちらで概要をご紹介しているのでご覧ください。

カスタマイザーの起動手順

カスタマイザーを起動する手順は次の通りです。

Menu『WordPress管理>ダッシュボード>外観>カスタマイズ』をクリックします。

WordPress管理|カスタマイザー起動

カスタマイザーが起動すると、エディター画面の左側に以下の画面が表示されます。

この記事では、「ヘッダー」タブの詳細項目について紹介していきます。(赤破線部)

『ヘッダー』をクリック

カスタマイザー|ヘッダー
yajirusi-yoko-40x80

以下のタブ項目をご紹介します。

カスタマイザー|ヘッダー|詳細
osaboo

カスタマイザーの設定を変更したら必ず、『公開』!
その他の設定を変更したら必ず、設定ページの『変更を保存』!
…を忘れずにクリックしましょう。

それでは、順番に見ていきましょう。

ヘッダー

  • カスタマイザー起動後の手順になります。

ヘッダーでは、ヘッダーエリアの各要素の色や画像を設定できます。

ヘッダーはウェブサイトの最上部に配置されるため、最も目立つ位置にあり、機能性やビジュアルが重要です。SWELLでは各要素の設定が細かくできるため、お好きな色や背景を設定できます。
サイトのイメージ作りには欠かせません。

それでは、『ヘッダー』の詳細設定画面の各項目を順番にご紹介します。

カラー設定

カラー設定では、ヘッダーの背景色と文字色を設定できます。

『カラー設定』の設定画面と設定項目は以下の通りです。

ヘッダー詳細|カラー設定

カラー設定

ヘッダー背景色

カラーパレットから選択できます。

  • デフォルト:#fdfdfd
ヘッダー文字色

カラーパレットから選択できます。

  • デフォルト:#333

カラー設定は、以下の箇所に反映されます。参考

ヘッダー詳細|カラー設定|イメージ-1
yajirusi-sita-80x40
ヘッダー詳細|カラー設定|イメージ-2

ヘッダーロゴの設定

ヘッダーロゴの設定では、ロゴ画像の設置や画像サイズ(ヘッダーの高さ)を設定できます。

『ヘッダーロゴの設定』の設定画面と設定項目は以下の通りです。

ヘッダー詳細|ヘッダーロゴの設定

ヘッダーロゴの設定

ロゴ画像の設定

サイトタイトルに変わって表示される画像です。

  • デフォルト:OFF
画像サイズ

ロゴ画像の有無に関係なく 高さを調整できます。

画像サイズ(PC): 32~120px

  • デフォルト:40

画像サイズ(PC追従ヘッダー内) : 24~48px

  • デフォルト:32

画像サイズ(sp): 40~80px

  • デフォルト:48

ヘッダーロゴの設定は、以下の箇所に反映されます。参考

ヘッダーロゴの設定|画像サイズ(PC)|イメージ
yajirusi-sita-80x40

PC追従ヘッダーを表示させています。(スクロールすると切り替わるヘッダーです)参考

ヘッダーロゴの設定|画像サイズ(PC追従ヘッダー内)|イメージ

ロゴ画像を設定しなくても、画像サイズは反映されます。(ヘッダーの高さ変更ができます)参考

ヘッダーロゴの設定|画像サイズ(PC)|画像なし|イメージ
ヘッダーロゴの設定:補足

「画像サイズ(PC)」と「画像サイズ(PC追従ヘッダー内)」のサイズを変え、固定時とスクロール時の変化が大きくすると面白いかもしれません。

  • ロゴ画像の有無に関係なく 高さを調整できます。(再記)

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

レイアウト・デザイン設定では、PCとSP で別々にレイアウトとデザインを設定できます。

『レイアウト・デザイン設定』の設定画面と設定項目は以下の通りです。

ヘッダー詳細|レイアウト・デザイン設定

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

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

以下の配置から選択できます。

  • ヘッダーナビをロゴの横に(右寄せ)
  • ヘッダーナビをロゴの横に(左寄せ)
  • ヘッダーナビを下に
  • ヘッダーナビを上に
  • デフォルト:ヘッダーナビをロゴの横に(右寄せ)
ヘッダーのレイアウト(SP)

以下の配置から選択できます。

  • ロゴ:左 / メニュー:右
  • ロゴ:中央 / メニュー:右
  • ロゴ:中央 / メニュー:左
  • デフォルト:ロゴ:中央 / メニュー:左
ヘッダー境界線

「なし・線・影」から選択できます。

  • デフォルト:影

ヘッダーのレイアウト(PC)のサンプル画像


『ヘッダーナビをロゴの横に(右寄せ)』で表示させたサンプル画像です。参考

レイアウト・デザイン設定|ヘッダーのレイアウト(PC)|ヘッダーナビをロゴの横に(右寄せ)|イメージ


『ヘッダーナビをロゴの横に(左寄せ)』で表示させたサンプル画像です。参考

レイアウト・デザイン設定|ヘッダーのレイアウト(PC)|ヘッダーナビをロゴの横に(左寄せ)|イメージ

『ヘッダーナビを下に』で表示させたサンプル画像です。参考

レイアウト・デザイン設定|ヘッダーのレイアウト(PC)|ヘッダーナビを下に|イメージ

『ヘッダーナビを上に』で表示させたサンプル画像です。参考

レイアウト・デザイン設定|ヘッダーのレイアウト(PC)|ヘッダーナビを上に|イメージ

ヘッダーのレイアウト(SP)のサンプル画像

『ロゴ:中央 / メニュー:左』で表示させたサンプル画像です。参考

レイアウト・デザイン設定|ヘッダーのレイアウト(SP)|ロゴ:中央 / メニュー:左

『ロゴ:中央 / メニュー:右』で表示させたサンプル画像です。参考

レイアウト・デザイン設定|ヘッダーのレイアウト(SP)|ロゴ:中央 / メニュー:右

『ロゴ:左 / メニュー:右』で表示させたサンプル画像です。参考

レイアウト・デザイン設定|ヘッダーのレイアウト(SP)|ロゴ:左 / メニュー:右
レイアウト・デザイン設定:補足

ヘッダーのレイアウト(PC)は、サイトイメージを伝えるための重要な部分です。

SWELLでは、上記の設定で簡単に変更できるので、ぜひ活用してください。

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

トップページでの特別設定では、ヘッダーの背景を透明に設定できます。さらに、文字色を白か黒か選択することができます。また、ヘッダーロゴの画像を設定した場合、トップページ専用のロゴ画像を設定することもできます。

『トップページでの特別設定』の設定画面と設定項目は以下の通りです。

ヘッダー詳細|トップページでの特別設定

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

ヘッダーの背景を透明にするかどうか

「しない・する(文字色:白)・する(文字色:黒)」から選択できます。

  • デフォルト:しない
yajirusi-sita-80x40
  • ヘッダー背景を透明にするを選択すると以下のように表示が変わり、トップページ専用のロゴ画像を設定できるようになります。
ヘッダー詳細|トップページでの特別設定|背景透明選択時に追加表示されるメニュー
ヘッダーの背景を透明にするかどうか

する(文字色:白)or する(文字色:黒)

透過時のロゴ画像
  • デフォルト:OFF

背景を透明にして、文字色を白にし、ロゴ画像に白抜きした画像を設定したサンプル画像です。参考

ヘッダー詳細|トップページでの特別設定|背景透明選択時に追加表示されるメニュー|イメージ

ヘッダーの追従設定

ヘッダーの追従設定では、ヘッダーの追従と背景の不透明度を設定できます。

『ヘッダーの追従設定』の設定画面と設定項目は以下の通りです。

ヘッダー詳細|ヘッダーの追従設定

ヘッダーの追従設定

PC・SPでヘッダーを追従させる設定かできます。(デフォルトがおすすめです)

ヘッダーを追従させる(PC)

  • デフォルト:ON

ヘッダーを追従させる(SP)

  • デフォルト:ON
追従ヘッダー(PC)の背景不透明度

『0〜1』で設定できます。

  • デフォルト:1
ヘッダーの追従設定:補足

追従の設定は、基本的にデフォルトのまま「PC・SP」に追従させるのがおすすめです。

背景不透明度の設定は背景色や文字色によって調整すると良いと思います。

ヘッダーバー設定

ヘッダーバー設定は、サイトの各ページの最上部に表示される狭いバーで、通常はメインカラーで表示されます。ここの設定では、背景色や文字色を設定することができます。

『ヘッダーバー設定』の設定画面と設定項目は以下の通りです。

ヘッダー詳細|ヘッダーバー設定

ヘッダーバー設定

ヘッダーバー背景色

カラーパレットから選択できます。

  • デフォルト:クリア
ヘッダーバー文字色

カラーパレットから選択できます。

  • デフォルト:#fff
表示設定

SNSアイコンリストを表示する

  • デフォルト:ON

コンテンツが空でもボーダーとして表示する

  • デフォルト:OFF

ヘッダーバー設定は、以下の箇所に反映されます。参考

ヘッダー詳細|ヘッダーバー設定|イメージ-1

背景色と文字色を変更したサンプル画像です。参考

ヘッダー詳細|ヘッダーバー設定|イメージ-2

キャッチフレーズ設定

キャッチフレーズ設定は、ヘッダーバーに表示されます。また、キャッチフレーズとサイトのタイトルを横並びで表示することもできます。

『キャッチフレーズ設定』の設定画面と設定項目は以下の通りです。

ヘッダー詳細|キャッチフレーズ設定

キャッチフレーズ設定

「表示しない・ヘッダーバーに表示・ヘッダーロゴの近くに表示」から選択できます。

  • デフォルト:ヘッダーバーに表示

キャッチフレーズにサイトのタイトルを横並び(右)で表示できます。

  • デフォルト:OFF

キャッチフレーズ設定は、以下の箇所に反映されます。参考

ヘッダー詳細|キャッチフレーズ設定|イメージ-1

『ヘッダーロゴの近くに表示』で表示させたサンプル画像です。参考

ヘッダー詳細|キャッチフレーズ設定|イメージ-2
キャッチフレーズ設定:補足

キャッチフレーズの設定は、WordPressのカスタマイザーで『WordPress設定>サイト基本情報』でキャッチフレーズの枠欄に任意のテキストを入力します。

サイトのタイトルも『WordPress設定>サイト基本情報』で行います。

ヘッダーメニュー(グローバルナビ)設定

ヘッダーメニュー(グローバルナビ)設定では、ホバー時のデザインやメニュー・サブメニュー(ドロップダウンメニュー)の背景色を設定できます。

『ヘッダーメニュー(グローバルナビ)設定』の設定画面と設定項目は以下の通りです。

ヘッダー詳細|ヘッダーメニュー(グローバルナビ)設定

ヘッダーメニュー(グローバルナビ)設定

マウスホバーエフェクト

以下の項目から選択できます。

  • ラインの出現(中央から)
  • ラインの出現(左から)
  • ブロックの出現
  • 背景グレー
  • 背景明るく
ホバー時に出てくるラインの色

「メインカラー or テキストカラー」を選択できます。

  • デフォルト:メインカラー
ヘッダーメニューの背景色

背景色を設定しない

  • デフォルト:ON

色を指定する

  • デフォルト:OFF
サブメニューの背景色

「ホワイト or メインカラー」を選択できます。

  • デフォルト:ホワイト
yajirusi-sita-80x40
  • ヘッダーメニューの背景色で「色を指定する」を選択すると以下のようにメニューが切り替わり、背景色が選択できるようになります。
ヘッダー詳細|ヘッダーメニュー(グローバルナビ)設定|ヘッダーメニュー背景色
ヘッダーメニューの背景色

背景色を設定しない

  • 設定変更:OFF

色を指定する

  • 設定変更:ON

色指定がからの時はメインカラーと同じ色になります。

カラーパレットから選択できます。

  • 任意選択

ヘッダーメニュー(グローバルナビ)設定は、以下の箇所に反映されます。参考

ヘッダー詳細|ヘッダーメニュー(グローバルナビ)設定|イメージ
  • PCではヘッダーのレイアウトが縦並びの時に有効です。

ヘッダーメニューの背景色は、以下の箇所に反映されます。参考

ヘッダー詳細|ヘッダーメニュー(グローバルナビ)設定|ヘッダーメニュー背景色|イメージ

ヘッダーメニュー(SP)設定

ヘッダーメニュー(SP)設定では、スマホ用ヘッダー(メニュー位置)の表示・非表示設定をできます。

『ヘッダーメニュー(SP)設定』の設定画面と設定項目は以下の通りです。

ヘッダー詳細|ヘッダーメニュー(SP)設定

ヘッダーメニュー(SP)設定

スマホ開閉時のループ設定

スマホ用ヘッダーに位置設定されたメニューを表示できます。

  • デフォルト:OFF

ヘッダーメニュー(SP)設定は、以下の箇所に反映されます。参考

ヘッダー詳細|ヘッダーメニュー(SP)設定|イメージ
ヘッダーメニュー(SP)設定:補足

『WordPress管理>ダッシュボード>外観>メニュー』でメニューの位置を『スマホ用ヘッダー』に指定したメニューが自動的に表示されます。

前章で、ご紹介したヘッダーメニューの背景色も反映されます。

検索ボタン設定

検索ボタン設定では、検索ボタン(アイコン)をPCとSPで別々に表示設定できます。
(検索アイコンをクリックすると検索フォームが出てくるボタンです)

『検索ボタン設定』の設定画面と設定項目は以下の通りです。

ヘッダー詳細|検索ボタン設定

検索ボタン設定

検索ボタンの表示位置(PC)

「表示しない・ヘッダーバー内のアイコンリストに表示・ヘッダーメニューに表示」から選択できます。

  • デフォルト:ヘッダー内のアイコンリストに表示
検索ボタンの表示位置(SP)

「表示しない・カスタムボタンにセット」から選択できます。
カスタムボタン設定はこちら

  • デフォルト:カスタムボタンにセット

検索ボタンの表示位置(PC)のサンプル画像

『ヘッダーバー内のアイコンリストに表示』で表示させたサンプル画像です。参考

ヘッダー詳細|検索ボタン設定|イメージ-1

『ヘッダーメニューに表示』で表示させたサンプル画像です。参考

ヘッダー詳細|検索ボタン設定|イメージ-3

検索ボタンの表示位置(SP)のサンプル画像

『カスタムボタンにセット』で表示させたサンプル画像です。参考

ヘッダー詳細|検索ボタン設定|イメージ-2

メニューボタン設定

メニューボタン設定では、スマホで表示されるメニューをメニューを表示させるボタン(アイコン)をカスタマイズできます。

『メニューボタン設定』の設定画面と設定項目は以下の通りです。

ヘッダー詳細|メニューボタン設定

メニューボタン設定

アイコン下に表示するテキスト
  • デフォルト:空欄
メニューボタン背景色

デフォルト:クリア

メニューボタン設定は、以下の箇所に反映されます。参考

ヘッダー詳細|メニューボタン設定|イメージ

カスタムボタン設定

カスタムボタン設定では、デフォルトで「検索ボタン」が設定されていますが、任意の「アイコン・背景色・テキスト・リンク先URL」を設定して、ボタンのカスタマイズができます。

  • カスタムボタンはスマホのみ有効です。

『カスタムボタン設定』の設定画面と設定項目は以下の通りです。

ヘッダー詳細|カスタムボタン設定

カスタムボタン設定

アイコンクラス名
  • デフォルト:icon_search
アイコン下に表示するテキスト
  • デフォルト:空欄
カスタムボタン背景色
  • デフォルト:クリア
リンク先URL
  • デフォルト:空欄

カスタムボタン設定は、以下の箇所に反映されます。参考

ヘッダー詳細|カスタムボタン設定|イメージ
ヘッダー:補足

アイコンを調べるには、公式ページ『SWELLで使えるアイコンの一覧』をご覧ください。

筆者的には、デフォルトの検索ボタンがおすすめです。

まとめSWELL カスタマイザー完全ガイド|ヘッダーのポイントと使い方!まとめてみた。

SWELLのカスタマイザーでできる「ヘッダー」のポイントと使い方をご紹介しました。サイトを自分風にカスタマイズするための設定です。

ヘッダー周りの設定は早いうちに行うと効果的です。最初に読者の目に入る場所なので、インパクトのあるヘッダーは、PVをUPさせるためにも、とても重要だと考えます。

ヘッダー周りの設定は早めに行うと効果的です。読者の最初の印象を与える場所なので、インパクトのあるヘッダーはPVを増やすためにも非常に重要だと考えます。この記事がお役に立てば嬉しいです。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/

  • URLをコピーしました!
  • URLをコピーしました!
目次 "Contents"