シンプルが結局一番使いやすい、一番見やすい

手順9)WordPressテーマdeerの「ヘッダー周りの設定」をしよう

  
ヘッダー周り
\ この記事を共有 /
手順9)WordPressテーマdeerの「ヘッダー周りの設定」をしよう

ヘッダー部分とは、Webサイトの頭部分であり顔でもあります。

このヘッダー部分はあなたのWebサイトの印象も大きく変えることができるため、deerでは少し細かくカスタマイズができるようになっています。

早速、あなたのWebサイトのヘッダー周りのカスタマイズをしてみましょう。

「ヘッダー周りの設定」でできること

↓「外観」⇒「カスタマイズ」⇒「ヘッダー周りの設定」へいきましょう。

ヘッダー周りの設定

↓ すると以下のように左に色んなカスタマイズメニューが出てきます。

ヘッダー周りの設定

この部分でできることは以下の設定です。

  1. ヘッダーのサブタイトルキャッチコピー部分の表示・非表示切替
  2. サイトタイトルのポジションの左寄せ・中央寄せ切替
  3. ヘッダー部分の透過切り替え
  4. ヘッダー透過時用ロゴ画像の設置
  5. ヘッダー透過時用の文字色の変更
  6. ヘッダー画像・動画のフィルタを掛けるか掛けないか
  7. スマホタブレット専用のナビメニュー部分の表示・非表示切替
  8. プログレスバーの表示・非表示切替

それぞれ具体的に何ができるのか?見てみましょう。

1.ヘッダーのサブタイトルキャッチコピー部分の表示・非表示切替

右のプレビューにも出ますが、サイトタイトルの上にあるキャッチコピー部分を表示させるか?させないか?を選ぶ部分です。

ヘッダー周りの設定

2.サイトタイトルのポジションの左寄せ・中央寄せ切替

ここは、サイトのタイトルを左寄せにするか?中央寄せにするか?を選ぶことができます。

↓ 左寄せ

ヘッダー周りの設定

↓ 中央寄せ

ヘッダー周りの設定

3. ヘッダー部分の透過切り替え

ヘッダー部分の透過切替では、一番上の部分を透過させるかどうか?を選ぶことができます。

↓ 通常(透過させない)

ヘッダー周りの設定

↓ 透過させる

ヘッダー周りの設定

4.ヘッダー透過時用ロゴ画像の設置

ヘッダー部分を透過させると、サイトのロゴやタイトルなどが、画像の色などによって見えにくくなることがあります。

↓ 濃い色の背景に黒っぽいロゴだと見えにくくなりますよね。

ヘッダー周りの設定

↓ そこでdeerでは、背景を透過させたときのみ表示させるロゴ画像を設定することができます。

背景が濃い色に対して、ロゴ画像を白っぽい色にすると見えやすくなります。

ヘッダー周りの設定

5.ヘッダー透過時用の文字色の変更

↓ 同じくヘッダーを透過させると、メニューの文字も見えにくくなることがあります。

ヘッダー周りの設定

↓ その場合は、ヘッダー透過時用の文字色を変更することで見やすくすることができます。

ヘッダー周りの設定

6.ヘッダー画像・動画のフィルタを掛けるか掛けないか

ヘッダー画像や動画のファイルサイズを小さくすると、Webサイトが軽くなる代わりに、画像や動画が荒くなって汚く見えやすくなります。

そこで、小さめのドット(点)を全体に並べるフィルタを掛けることで、その粗さが気になりにくくなりおしゃれに見えたりします。

↓ フィルターを掛けない

ヘッダー周りの設定

↓ フィルターを掛ける

ヘッダー周りの設定

あなたの画像や動画に合わせてフィルタを掛けるかどうか?を決めてください。

7.スマホタブレット専用のナビメニュー部分の表示・非表示切替

↓ ここは、スマホやタブレットから見た時に上の方に出るメニューを表示させるかどうか?を決める部分です。

ヘッダー周りの設定

8.プログレスバーの表示・非表示切替

プログレスバーとは、その記事をどの辺まで読んだのか?が目安になるバーです。

↓ 記事を読み進めていくと、グレーのバーがどんどん右に進んでいきます。

ヘッダー周りの設定

プログレスバーがあることで、「あとどれくらいで記事が読めるか?」が読者さんに直感的に伝えることができます。

以上、8つの項目についてあなた好みに設定をしてみてください。

これらができたら今回の作業は完了です。

>次のページ「フッター固定メニューの設定」へ進む

結果を出すために、派手さはいらない

「集客」に使うことだけを徹底的に考えて作ったWordPressテーマ

deerのロゴ(白)文字入り

決して多機能ではありませんが、使う機能を必要最低限に限定してシンプルにしているからこそ使いやすい、初心者さんに優しいテーマです。

コメント

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Copyright©WordPressテーマ『deer』,2024All Rights Reserved.