テーマオプション ページタイトルバー

このコンテンツでは、【テーマオプション ページタイトルバー】全16のオプションについて解説をしています。

ページタイトルバーは、ページの見出し・小見出し・パンくずリスト・検索ボックスが表示されるバーのことです。

テーマオプションでは、サイト全体のページタイトルバーの設定を行いますが、各ページにある【Fusion Page Options】 → 【Page Title Bar（ページタイトルバー）】からテーマオプションを上書きすることができます。

タイトルバーが必要ないページや他と違うデザインにしたい場合は、【Fusion Page Options】を利用し調整するといいでしょう。実際にこのページも【Fusion Page Options】を利用して他のページで使用しているデザインから変更しています。

また、ページタイトルバーのもう1つのテーマオプション【パンくずリスト】も合わせてご覧ください。

このオプションは、ページタイトルバーの表示方法を、以下の3つから選択します。

1. Show Bar and Content（バーとコンテンツ）
2. Show Content Only（コンテンツのみ）
3. Hide（非表示）

画像を例にすると、1はコンテンツ部分である見出しと小見出しが左・パンくずリストが右、バー部分である薄いグレーの背景が表示されています。2はコンテンツのみなので薄いグレーの背景はありません。3はコンテンツ部分もバー部分も非表示となります。

このオプションを有効にすると、h1タグであるページタイトルバーのテキストが表示されます。【1.Page Title Bar / ページタイトルバー】で3.Hide（非表示）を選択している場合は無効となります。

このオプションを有効にすると、ページタイトルバーのコンテンツがブラウザのウィンドウ幅に合わせて100％表示になります。オフにしている場合は、テーマオプション → Layout（レイアウト） → Site Width（サイトの幅）で設定している値となります。

当サイトはサイトの幅を1200pxで設定しています。
このオプションをオフにしている場合は、max-width（最大幅の指定）が1200pxとなり縦に引いた青の点線内に収まりますが、有効にしている場合は、max-width（最大幅の指定）が100%となり画面いっぱいに広がります。

このオプションは、ページタイトルバーの高さを設定します。

画像では、90pxで設定しています。
背景色がグレーの部分がバーとなります。

このオプションは、スマホやタブレットで表示されるページタイトルバーの高さを設定します。

画像は、100pxで設定しています。

このオプションは、ページタイトルバーの背景色を設定します。

画像では、#f6f6f6を設定しています。

このオプションは、ページタイトルバーの上下のボーダーカラーを設定します。

画像では、#e91e63で設定しています。

このオプションは、h1タグであるページタイトルバーのフォントサイズを設定します。

画像では、40pxで設定しています。

このオプションは、ページタイトルバーのフォントカラーを設定します。このフォントカラーは、見出し（h1）だけでなく、小見出し（h3）にも適用されます。

画像では、#333で設定しています。

このオプションは、h3タグの小見出しのフォントサイズを設定します。

画像では、20pxで設定しています。

このオプションは、ページタイトルバーのコンテンツを表示位置を以下の3つから選択します。

1. Left（左）
2. Center（中央）
3. Right（右）

中央では、見出しや小見出しが上、パンくずリストが下に表示され、左または右を選択するとタイトルバーとパンくずリストが入れ替わります。

このオプションは、ページタイトルバーの背景に画像を使用したい場合に使用します。

画像のように、適用する背景画像が小さいと一部しか表示されません。【14.100% Background Image / 100% 背景画像】オプションで全幅にすることもできますが、Cover値を使用するため解像度が低くなりぼやけてしまいます。

背景に画像を適用する場合は、このオプションは使用せず、1920px幅程度の大きめの画像を用意したり【.fusion-page-title-bar】のCSSを調整するといいでしょう。

このオプションは、MacBook ProやiMac with Retina 5kなどに採用されているRetina（高画素密度のディスプレイ）用の背景画像を設定します。

このオプションでは、【12.Page Title Bar Background Image / 背景画像】でアップロードした2倍サイズの画像を用意する必要があります。このオプションは必須ではありませんが、設定しないとiPhoneやiPadなどから見た場合綺麗に表示されないので、スマホユーザーをターゲットにする場合は必ず設定するようにしましょう。

このオプションを有効にすると、ブラウザのウィンドウ幅に合わせて背景画像が全幅になります。

【12.Page Title Bar Background Image / 背景画像】でも触れましたが、このオプションはbackground-sizeプロパティにcover値を適用しています。Coverは、縦横比は保持したまま、背景領域を完全に覆うように画像を拡大・縮小するものです。大きいサイズの画像は問題ありませんが、小さい画像は拡大するため（引き伸ばす）ぼやけてしまいます。

背景に画像を適用する場合は、このオプションは使用せず、1920px幅程度の大きめの画像を用意したり【.fusion-page-title-bar】のCSSを調整するといいでしょう。

このオプションを有効にすると、ページタイトルバーの背景画像にパララックス効果を使用します。

このオプションを使用するには、【12.Page Title Bar Background Image / 背景画像】の設定と【14.100% Background Image / 100% 背景画像】を有効にする必要があります。

パララックスとは?

Webデザインにおけるパララックスは、スクロールといった動作に応じて、複数のレイヤー（層）にある視覚要素を異なるスピードで動かすことで視差を生み出し、立体感・奥行きを演出する手法のことを指します。

このオプションを有効にすると、下にスクロールしていくことでページタイトルバーのテキストがフェードしていきます（徐々に薄くなる）。

この効果は、背景画像を使用せずに使うこともできますが、背景画像 + タイトルバーの高さをが重要です。【4.Page Title Bar Height / 高さ】や【5.Page Title Bar Mobile Height / モバイルの高さ】を高く取ってあげると効果をはっきりと感じとることができると思います。