ヘッダーに表示させる内容を明確にすると、最適なロゴサイズを決めることができます。反対に、どのようなヘッダーにするかを明確に決めなければ最適なロゴサイズを決めることができません。
また、ヘッダーは常に表示されているエリアなのでサイトの印象や見やすさを左右したり、必要な記事を見つけやすくしたりできます。
この記事では、ロゴ画像を最適化する観点から、ヘッダーとヘッダー部分の設定手順を紹介しています。この記事の順でヘッダー部分を構成していくと、最適なロゴ画像サイズを計算することができます。
ヘッダーとは
ヘッダーとは、ページの上部に表示されているの情報帯のことです。SWELLテーマでは「ロゴ」や「メニュー」が表示されている範囲を指します。
この部分には、ロゴやメニューの他に、検索アイコンやヘッダー内部ウィジェットを配置することができ、また、ヘッダーの上や下にはヘッダーバーやお知らせバーなどのアイテムを表示させることもできます。
ヘッダーの構成を決めることで、最適なロゴのサイズを決めることが可能です。
【SWELLエリアマップ】【ロゴカタログ】
ヘッダー部分とは
ヘッダー部分とは、当サイトで便宜上名付けた名称で「ヘッダー」の上や下に表示可能なエリアを含めた全体の部分を指します。
ヘッダー部分は、「ヘッダー」と「ヘッダーバー」、「お知らせバー」を合わせた部分です。ヘッダーは［追従ヘッダー］として機能しますが、ヘッダーバーとお知らせバーは［追従ヘッダー］には含まれません。そのため、説明上ヘッダーと区別したく、分けて表現しています。
以下、PCでの表示を基準にした全手順です。エリアマップを別ウィンドウで開いて当ページとあわせてみるのがおすすめです。【SWELLエリアマップ-ヘッダー部分- (別ウィンドウで開きます)】
ヘッダーメニュー（ヘッダーナビ・グローバルメニュー・グローバルナビ・ナビメニュー）を作成する
ヘッダーには、ヘッダーメニューが表示されます。ヘッダーメニューは、ヘッダーナビ・グローバルメニュー・グローバルナビ・ナビメニューと呼ばれることもあり、すべて同じ意味です。
ヘッダーメニューを作成するには、［外観］→［メニュー］から［新規作成］をクリックし、［メニュー名］を入力、メニュー項目を追加し、［保存］します。
【メニューの作成方法】
メニュー項目の分だけ「横に長いメニュー」になります。
検索ボタンはどこに？
検索ボタンは、ヘッダーメニューかヘッダーバーに表示させることができます。表示させないことも可能です。
ヘッダーのどの部分に検索ボタンを表示するかを決めます。
【検索ボタンを表示する】
ヘッダーメニューに表示する場合は、メニューの右に検索ボタンが表示されます。
ヘッダー内部ウィジェットは？
ヘッダー内部ウィジェット設置の有無を決めます。何を表示するかによって、コンテンツの大きさが異なります。
【ヘッダー内部ウィジェット】
ヘッダー内部ウィジェットを設置する場合は、ロゴとメニューのレイアウト(並び方)によって表示場所が異なります。
ロゴとメニューの並び・配置はどうする？
ヘッダーの要となるレイアウトです。レイアウトは、ロゴのメニューとの並び(配置)で決まり、［横に並べる］か［上下に並べる］から選択できます。この選択により、ヘッダーの体裁が決まります。
エリアマップをまだ開いてなければ開いてヘッダーのデザイン・レイアウトを決めるか、カスタマイザーを起動して実際にプレビュー表示などを見て決めてください。【SWELLエリアマップ-ヘッダー部分- (別ウィンドウで開きます)】
【ヘッダーのレイアウト・デザイン設定】
一般的に、［上下に並べる］設定は［横に並べる］設定よりもヘッダーが高くなります。
ヘッダーバーは表示する？
お知らせバーの表示は？
お知らせバーを表示するかしないかをきめます。表示する場合は、表示する場所と内容についても決めておきましょう。
【お知らせバー】
お知らせバーはヘッダーの上か下どちらか１か所のみ表示できます。（ヘッダー部分の高さに影響します）
ヘッダーの高さは高め(広め)？それとも低め(細め)？
ヘッダーの高さを決めます。ヘッダーバーやお知らせバーを含めない、純粋なヘッダーの高さです。
はじめから「決める」ことが難しければ、広くしたいのか細くしたいのかのイメージでも大丈夫です。（最終的には高さを決めます）
ヘッダーバーやお知らせバーを表示する場合は、高さのバランスも大切です。ロゴのイメージも併せて考えてみるとよいかもしれません。（例：上下に並べる設定では、横幅目一杯(広範囲)にロゴを表示させたいなど）
【ヘッダーの高さを決めよう】
ヘッダーの高さのイメージを覚えておいてください。（イメージでOK）
ロゴのサイズを決めよう
ヘッダーに表示する内容と高さを決めたら（①～⑦）、ロゴのサイズをこちらのページで計算します。導き出された大きさがあなたのサイトの最適なロゴサイズです。
ロゴのサイズを先に決めるという方法もありますが、サイトに合ったロゴの最適サイズを求めるなら、ヘッダーの構成を先に考える必要があります。
【ロゴサイズを計算して決める方法［横に並べる］［縦に並べる］】【ロゴ表示のしくみ】【ロゴカタログ】
ロゴのサイズが決まったら⑨に進みます。
SP表示でのロゴの高さを決めよう
基本的に、登録できるロゴ画像は１種類です（横並びの透過設定時を除く）。⑧で決めたロゴのサイズから、SP表示でのロゴの高さを割り出し、設定する画像の高さを決めます。
【ロゴカタログ】
各種ヘッダー設定
①～⑨で決めた内容と作成したロゴ画像を、各種ヘッダー設定に反映させます。詳しい設定方法は各ページをお読みください。
【カラー設定】【ヘッダーロゴ設定】【レイアウト・デザイン設定】【トップページでの特別設定】【ヘッダーの追従設定】【ヘッダーバー設定】【キャッチフレーズ設定】【ヘッダーメニュー設定】【ヘッダーメニュー(SP)設定】【検索ボタン設定】【メニューボタン設定】【カスタムボタン設定】
保存
最後に保存して終了です。
