テーマオプション 固定ヘッダー

このコンテンツでは、【テーマオプション 固定ヘッダー】全9のオプションについて解説をしています。

このオプションは、メニューをページ上部に固定して常に表示する固定ヘッダーの設定をします。カラーなどのスタイリングやどの端末で固定ヘッダーを有効にするか、などを設定することができます。

なお、このコンテンツで解説している各オプションは、【テーマオプション ヘッダーコンテンツ】で選択するレイアウトによって表示されるもの・されないものがあるので注意しましょう。

このオプションを有効にすると、iPadなどのタブレット端末で固定ヘッダーが使用できます。

このオプションを有効にすると、iPhoneなどのモバイル端末で固定ヘッダーが使用できます。

このオプションを有効にすると、スクロールして固定ヘッダーに切り替わる際にヘッダーをより低い高さにしてくれます。固定ヘッダーがコンテンツの邪魔にならなくなるので、有効にするといいでしょう。

設定できるコンテンツが少ないヘッダーレイアウト、上から1,2,3,6,7番目を選択していると表示されるオプションです。コンテンツが多い4,5番目のレイアウトの高さを低くするには、次の【5.Sticky Header Display For Headers 4-5 / 固定ヘッダーの表示】から設定できます。

このオプションは、ヘッダーレイアウトの上から4,5番目を選択していると表示され、メニューだけを表示するか、メニューとロゴや検索バーも合わせて表示するかを選択します。

ロゴや検索バーを固定ヘッダーで表示してしまうと、少々うざくなるのでメニューのみを推奨します。メニューのみを表示することで、【4.Sticky Header Animation / 固定ヘッダーのアニメーション】と似た効果が得られ、固定ヘッダーの高さを低くすることができます。

なお、上から7番目のレイアウトでもこのオプションは表示されますが、どちらを選んでも常にロゴは表示されます。

このオプションは、固定ヘッダーの背景色を設定します。

ヘッダーが固定ヘッダーに切り替わった際に、このオプションで設定した背景色になります。画像のように透明度（0.6）をつけてあげると、メインコンテンツの邪魔にならないのでオススメです。

このオプションは、固定ヘッダーのフォントカラーを設定します。

画像は、#000000で設定したものになります。

このオプションは、固定ヘッダーに切り替わった後のメニューの各項目間のパディングを設定します。

ヘッダーレイアウトの上から6番目は表示されません。

画像の紫部分がパディングで、30pxで設定したものになります。

このオプションは、固定ヘッダーに切り替わった後のメニューのフォントサイズを設定します。

当サイトのように固定ヘッダーのメニューをアイコンにしている場合は、アイコンの大きさの値として扱われます。