ヘッダーは、ブログ名やメニュー、主要ページへのリンクなど、ページが遷移しても常時表示させておきたい情報を設定できる部分になります。
お店でいうところの看板みたいな感じでしょうか。
そのため、印象に残るデザインや、ユーザーにとって使い易い表示を目指して設定したい項目ですね。
Contents
ヘッダー全体の表示選択
![](https://i0.wp.com/doramaps.com/wp-content/uploads/2019/10/ヘッダー全体の表示設定.png?resize=345%2C206&ssl=1)
ここで設定変更が可能となる当サイトのヘッダーは、下図の部分になります。
![](https://i0.wp.com/doramaps.com/wp-content/uploads/2019/10/ヘッダー全体の表示設定見本.png?resize=1024%2C67&ssl=1)
この部分を表示するか、非表示にするかを選べます。
もし『ヘッダー画像設定』で画像を設定している場合は、ここで非表示を選択しても表示されたままになります。
サイトロゴ
![](https://i2.wp.com/doramaps.com/wp-content/uploads/2019/10/サイトロゴ.png?resize=369%2C189&ssl=1)
ここで、サイトのロゴマークを設定します。設定したロゴマークはヘッダー内に表示されます。
ロゴマークは、サイト名やイメージをブランド化・オリジナル化するため図案化したマークなどのことです。
当サイトではロゴを作成・設定していないので、下図のプロフィール用のイラストで設定をためしてみました。
![](https://i0.wp.com/doramaps.com/wp-content/uploads/2017/05/main.png?resize=180%2C180&ssl=1)
ロゴとフレーズの文字サイズ調整
![](https://i1.wp.com/doramaps.com/wp-content/uploads/2019/10/ロゴとフレーズのサイズ調整.png?resize=369%2C189&ssl=1)
設定したロゴのサイズを設定します。
例:画像だと30とあるように、30くらいのサイズがバランスが良いように思いますが、ロゴのデザインにもよるので、バランスの良いサイズを探してみてください。
ちなみに、当サイトでは「ドラマっぷ」の文字表示なのですが、文字だと30は米粒のようになっていまうので、160で設定しています。
![](https://i1.wp.com/doramaps.com/wp-content/uploads/2019/10/ロゴとフレーズのサイズ調整見本.png?resize=1024%2C379&ssl=1)
ロゴとフレーズの上下の余白
![](https://i2.wp.com/doramaps.com/wp-content/uploads/2019/10/ロゴとフレーズの上下の余白.png?resize=369%2C189&ssl=1)
ロゴとヘッダー帯との余白を設定します。
![](https://i2.wp.com/doramaps.com/wp-content/uploads/2019/10/ロゴとフレーズの上下の余白見本.png?resize=1024%2C341&ssl=1)
検索ボックスの表示設定
![](https://i0.wp.com/doramaps.com/wp-content/uploads/2019/10/検索ボックスの表示選択.png?resize=369%2C189&ssl=1)
サイト内の記事を文字検索できる検索ボックスを設置するかどうか選択できます。
表示にすると虫眼鏡のマークがヘッダー内に表示されます。
![](https://i0.wp.com/doramaps.com/wp-content/uploads/2019/10/検索ボックスの表示選択見本.png?resize=1024%2C247&ssl=1)
SNSアイコンの表示設定
![](https://i1.wp.com/doramaps.com/wp-content/uploads/2019/10/SNSアイコンの表示選択.png?resize=369%2C189&ssl=1)
SNSへリンクできるアイコンを設定することができます。
表示にすると、ヘッダー内に各サービスのアイコンが表示されます。
このSNSアイコンで表示させたいサービスやリンク先の設定などは『SNS設定(OGP)』で設定します。
![](https://i1.wp.com/doramaps.com/wp-content/uploads/2019/10/SNSアイコンの表示選択見本.png?resize=1024%2C247&ssl=1)
【スマホ用】ヘッダーロゴとヘッダーフレーズの文字サイズ調整
![](https://i1.wp.com/doramaps.com/wp-content/uploads/2019/10/スマホ用ヘッダーロゴとヘッダーフレーズの文字サイズ調整.png?resize=370%2C220&ssl=1)
先で設定したロゴサイズとヘッダーフレーズの大きさとは別に、スマホ専用の設定を行うことができます。
パソコンとスマホでは画面のサイズが全く異なるので、各画面にあったサイズを別々に設定できるのはありがたいですね。
![](https://i0.wp.com/doramaps.com/wp-content/uploads/2019/10/スマホ用ヘッダーロゴとヘッダーフレーズの文字サイズ調整見本.png?resize=1024%2C408&ssl=1)
インフォバーに表示する文字/インフォバーのリンク先URL
![](https://i2.wp.com/doramaps.com/wp-content/uploads/2019/10/インフォバーに表示する文字.png?resize=369%2C189&ssl=1)
![](https://i1.wp.com/doramaps.com/wp-content/uploads/2019/10/インフォバーのリンク先URL.png?resize=369%2C189&ssl=1)
インフォバーは、特にお知らせしたい情報などをヘッダーにプラスして表示できる機能です。
ここに文字を入れると、その文字が表示されたインフォバーが表示されます(何も記入なければインフォバーは表示されない)。
また、その文字にリンクを貼ることができます。大事なお知らせや、「まずはこのページを見てほしい!」というページに、ユーザーを誘導したりなど、効果的に使えそうです。
『カラー設定』でヘッダーとは別に色を設定できるので、目立つようにできるのもいいですね。
![](https://i0.wp.com/doramaps.com/wp-content/uploads/2019/10/インフォメーションバーの背景色見本.png?resize=1024%2C98&ssl=1)
当サイトの『ヘッダー設定』
ヘッダーは、どのページにも表示されるため、ユーザーの周遊UPに繋がる重要な設定ポイントだと思います。
デザインのバランスを整えて、ユーザーにサイトをアピールできる、かつ使い易い表示を目指しましょう!
- ヘッダー全体の表示選択:表示
- サイトロゴ:設定なし
- ロゴとフレーズサイズの文字サイズ調整:160(「ドラマっぷ」文字表示)
- ロゴとフレーズの上下の予約:設定なし
- 検索ボックスの表示選択:表示
- SNSアイコンの表示選択:非表示
- 【スマホ用】ヘッダーロゴとフレーズの文字サイズ調整:設定なし
- インフォバーに表示する文字:設定なし
- インフォバーのリンク先URL:設定なし