《JIN》ヘッダー設定の使い方　for初心者

ヘッダーは、ブログ名やメニュー、主要ページへのリンクなど、ページが遷移しても常時表示させておきたい情報を設定できる部分になります。

お店でいうところの看板みたいな感じでしょうか。

そのため、印象に残るデザインや、ユーザーにとって使い易い表示を目指して設定したい項目ですね。

ヘッダー全体の表示選択

ここで設定変更が可能となる当サイトのヘッダーは、下図の部分になります。

この部分を表示するか、非表示にするかを選べます。

もし『ヘッダー画像設定』で画像を設定している場合は、ここで非表示を選択しても表示されたままになります。

サイトロゴ

ここで、サイトのロゴマークを設定します。設定したロゴマークはヘッダー内に表示されます。

ロゴマークは、サイト名やイメージをブランド化・オリジナル化するため図案化したマークなどのことです。

当サイトではロゴを作成・設定していないので、下図のプロフィール用のイラストで設定をためしてみました。

ロゴとフレーズの文字サイズ調整

設定したロゴのサイズを設定します。

例：画像だと30とあるように、30くらいのサイズがバランスが良いように思いますが、ロゴのデザインにもよるので、バランスの良いサイズを探してみてください。

ちなみに、当サイトでは「ドラマっぷ」の文字表示なのですが、文字だと30は米粒のようになっていまうので、160で設定しています。

ロゴとフレーズの上下の余白

ロゴとヘッダー帯との余白を設定します。

検索ボックスの表示設定

サイト内の記事を文字検索できる検索ボックスを設置するかどうか選択できます。

表示にすると虫眼鏡のマークがヘッダー内に表示されます。

SNSアイコンの表示設定

SNSへリンクできるアイコンを設定することができます。

表示にすると、ヘッダー内に各サービスのアイコンが表示されます。

このSNSアイコンで表示させたいサービスやリンク先の設定などは『SNS設定（OGP）』で設定します。

【スマホ用】ヘッダーロゴとヘッダーフレーズの文字サイズ調整

先で設定したロゴサイズとヘッダーフレーズの大きさとは別に、スマホ専用の設定を行うことができます。

パソコンとスマホでは画面のサイズが全く異なるので、各画面にあったサイズを別々に設定できるのはありがたいですね。

インフォバーに表示する文字／インフォバーのリンク先URL

インフォバーは、特にお知らせしたい情報などをヘッダーにプラスして表示できる機能です。

ここに文字を入れると、その文字が表示されたインフォバーが表示されます（何も記入なければインフォバーは表示されない）。

また、その文字にリンクを貼ることができます。大事なお知らせや、「まずはこのページを見てほしい！」というページに、ユーザーを誘導したりなど、効果的に使えそうです。

『カラー設定』でヘッダーとは別に色を設定できるので、目立つようにできるのもいいですね。

当サイトの『ヘッダー設定』

ヘッダーは、どのページにも表示されるため、ユーザーの周遊UPに繋がる重要な設定ポイントだと思います。

デザインのバランスを整えて、ユーザーにサイトをアピールできる、かつ使い易い表示を目指しましょう！