こんにちは。銀河(@ginga_noguchi)です。

WordPressテーマ『SWELL』の設定マニュアルです。この記事ではカスタマイザーによるサイトのデザイン・設定をおこなっていきます。

このマニュアルはSWELLのカスタマイザーマニュアルの第3回になります。第2回の「サイト全体設定」がまだの場合は先にこちらの設定を終わらせてください。

YouTube版

3-1. カラー設定

STEP
設定できる場所の確認
STEP
好きな色に変更する

基本カラーの設定でも話しましたが、初心者に気をつけてほしいことは「色を感覚で決めないこと」です。「サイトのデザインがイケてない……」という場合のほとんどは配色がイケてない状態が多いです。

3-2. ヘッダーロゴの設定

STEP
ロゴ画像を用意する

今回はこのような画像を作成してみました。

STEP
ロゴ画像の設定

作成した画像を設定します。

白抜きのロゴ画像の場合はヘッダー背景と文字色を調整しましょう。

STEP
画像サイズを変更する

作ったロゴ画像に合わせてサイズの調整が可能です。

設定できること
  • 画像サイズ(PC):32 〜 120px
  • 画像サイズ(PC追従ヘッダー内): 24 〜 48px
  • 画像サイズ(SP):40 〜 80px
STEP
画像サイズ(PC追従ヘッダー内)

追従ヘッダーとはスクロールしたときにページ上部に固定されるヘッダーのことです。「通常は大きく表示させておきたいけど、スクロール時に大きいと邪魔だから小さくしたい」といった場合などに有効です。

そもそも追従させるかどうかはヘッダーの追従設定で設定できます。

STEP
画像サイズ(SP)

スマホでのロゴ画像のサイズを設定できます。

スマホ用固定フッターメニューの設定をしている場合はページの専有率に注意しましょう。「肝心のコンテンツが読みにくい」では元も子もないです。

3-3. レイアウト・デザイン設定

STEP
ヘッダーのレイアウト(PC)
設定できること
  • ヘッダーナビをロゴの横に(右寄せ)
  • ヘッダーナビをロゴの横に(左寄せ)
  • ヘッダーナビを下に
  • ヘッダーナビを上に
設定に迷ったら……

デフォルトの「右寄せ」でOKです。メニューの数が多い場合は「ナビを下に」にするかメニューを減らしましょう。

STEP
ヘッダーのレイアウト(SP)
設定できること
  • ロゴ:左 / メニュー:右
  • ロゴ:中央 / メニュー:右
  • ロゴ:中央 / メニュー:左
設定に迷ったら……

右利きの人が多いことを考えると「ロゴ:中央 / メニュー:右」がもっともユーザビリティが高いです。また、「8割のサイトが右上」とも言われていますので、「ユーザーの慣れ」としても右上がおすすめです。

STEP
ヘッダー境界線

ヘッダー境界線とはヘッダーとその下のコンテンツとの境界線部分です。

ヘッダー背景を白に戻しました

ヘッダー背景色が色つきの場合はわかりにくいので、ヘッダー背景色が白の人向けの設定項目です。

設定できること
  • なし
フラットなデザインに

3-4. トップページでの特別設定

この設定を使う場合はレイアウト・デザイン設定で横並び(左寄せまたは右寄せ)にしている必要があります。

STEP
ヘッダーの背景を透明にするかどうか
設定できること
  • しない
  • する(文字色:白)
  • する(文字色:黒)
設定に迷ったら……
  • お知らせバーを表示したい → 「しない」一択
  • ビジュアルメインでアピールしたい → 「する(白文字)」
STEP
透過時のロゴの画像

「背景を透過する」にした場合のみの設定です。背景を透明にしてヘッダーの追従設定を「追従する」にしたときに、スクロール時のロゴの色が合わない場合があります。

スクロール時の追従メニューは背景が白です。ですのでロゴ画像は色つきである必要があるのですが、これだとあまりイケてないですよね。

こんなときに「通常は白文字のロゴ画像」だけど、「スクロール時(白背景)では色つきのロゴ画像」を設定することで見栄えが良くなります。

3-5. ヘッダーの追従設定

STEP
ヘッダーを追従させるかどうか設定する
設定できること
  • ヘッダーを追従させる(PC)
  • ヘッダーを追従させる(SP)
STEP
ヘッダーを追従させる(PC)

追従させる場合は背景の不透明度も設定できます。

設定に迷ったら……

【追従させる】にチェック。

STEP
ヘッダーを追従させる(SP)
設定に迷ったら……

【追従させる】にチェック。

3-6. ヘッダーバー設定

STEP
設定できる箇所の確認

ヘッダーバーとはページ上部に表示される部分のことです。キャッチコピーやSNSへのリンクボタンなどを表示できます。

STEP
ヘッダーバー背景色と文字色の設定

黒だとキツすぎるので、背景を薄いグレー、文字を濃いグレーに設定してみました。

あまり多くの色を使いすぎないようにしましょう。

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

SNSのアイコンが不要の場合はチェックを外すことで非表示にさせられます。

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

SNSアイコンを非表示の状態で、さらにキャッチフレーズの設定を「表示しない」にして、「コンテンツが空でもボーダーとして表示する」にすると線のみを表示させられます。

サイトのアクセントとしてデザインの幅が広がります。

3-7. キャッチフレーズ設定

STEP
キャッチフレーズの表示位置

サイト基本情報の設定で設定したキャッチフレーズを表示させられます。

設定できること
  • 表示しない
  • ヘッダーバーに表示
  • ヘッダーロゴの近くに表示
STEP
キャッチフレーズに「サイトのタイトル」を表示する

さらにサイト基本情報の設定で設定したサイトタイトルも表示させるかどうかも設定できます。

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

STEP
マウスホバーエフェクト
設定できること
  • ラインの出現(中央から)
  • ラインの出現(左から)
  • ブロックの出現
  • 背景グレー
  • 背景明るく
STEP
ヘッダーメニューの背景色

レイアウト・デザイン設定で縦並び(ナビを下または上)にしている場合は、メニューの背景色を変更することができます。

ロゴ部分とメニューが同じ色だと少し単調すぎる
設定できること
  • 背景色は設定しない
  • 色を指定する
メニューの背景色を変えるとメリハリが出る
STEP
サブメニューの背景色
設定できること
  • ホワイト
  • メインカラー

サブメニューの色は白かメインカラーを選択できます。

3-9. ヘッダーメニュー(SP)設定

STEP
スマホ用ヘッダーメニューを設定する

この設定をするには「スマホ用ヘッダーメニュー」を設定している必要があります。グローバルナビをPCと同様に表示させたい場合は「スマホ用ヘッダー」にもチェックを入れましょう。

スマホ用ヘッダーを個別で設定したい場合は新規で専用のメニューを作成して「スマホ用ヘッダー」にチェックを入れてください。

STEP
スマホ表示時のループ設定

「ヘッダーメニューをループさせる」にチェックを入れるとサブメニューも含めてループで表示させられます。

3-10. 検索ボタン設定

STEP
検索ボタンの表示位置(PC)
設定できること
  • 表示しない
  • ヘッダーバー内のアイコンリストに表示
  • ヘッダーメニューに表示

ヘッダーに検索ボタンは表示されません。

非表示にする場合は

サイト内検索ができないと不便です。この場合はサイドバーやフッターなどに検索ウィジェットを配置するようにしましょう。

STEP
検索ボタンの表示設定(SP)
設定できること
  • 表示しない
  • カスタムボタンにセット
非表示にする場合は

サイト内検索ができないと不便です。スマホ用固定フッターメニューやフッターなどに検索ウィジェットを配置するようにしましょう。

PC用の設定で「ヘッダーメニューに表示」としていてもスマホのメニューには表示されませんのでご注意ください。

3-11. メニューボタン設定

STEP
設定できる箇所を確認する
STEP
テキストを追加して背景色を変更する
設定例

ハンバーガーメニューのアイコンだけではわからないひともいるので「メニューをメニューだと」わかりやすくできます。

3-12. カスタムボタン設定

STEP
設定できる箇所を確認する

カスタムボタンはデフォルトでは「サイト内検索」になっています。ここは自由に変更することが可能です。

設定できること
  • アイコン
  • アイコン下に表示するテキスト
  • カスタムボタン背景色
  • リンク先URL
STEP
サイトに合わせて変更する
設定例

LINEで問い合わせなどを受けることが多い場合はこのように設定できます。その他、会員サイトであれば「ログイン」ボタン、電話、資料請求、ダウンロード、問い合わせメールなどユーザーの利便性やこちらのサイトの利用目的などを意識して設置しましょう。

サイト内検索ができないと不便です。検索ボタンから変える場合はスマホ用固定フッターメニューやフッターなどに検索ウィジェットを配置するようにしましょう。