この BizVektor サイトのページヘッダーをカスタマイズしました。

カスタマイズ内容

• ページヘッダーのデザインを単色塗りつぶしから背景画像を使用したデザインにして、ページヘッダーの高さを大きくしました。
• 投稿と固定ページでページヘッダーの背景画像にアイキャッチ画像を指定できるようにしました。アイキャッチ画像がページヘッダーに適していないケースを考慮して、背景画像に共通設定を適用することもできるようになっています。
• 投稿ページで投稿タイトルとメタ情報をページヘッダーに表示するデザインにしました。
• サイトヘッダーを透過に設定して、ページヘッダーに被せるデザインにしました。

カスタマイズ前

いまご覧いただいているこの投稿のカスタマイズ前の状態です。

ページヘッダーに投稿タイプ名「実装例」が表示されて、ページヘッダーの後ろの本文中に投稿タイトルとメタ情報が表示されています。メタ情報の部分は こちらの記事 で書いたようにすでにカスタマイズしてあり、BizVektor の初期状態ではありません。

カスタマイズ後

いまご覧いただいているこの投稿のカスタマイズ後の状態です。

投稿のアイキャッチ画像がページヘッダーの背景画像に設定されていて、投稿タイトルとメタ情報がページヘッダーに表示されています。

ページヘッダーの背景画像の指定

メタボックスに以下の入力欄があり、ページヘッダーの背景画像としてアイキャッチ画像を使うかどうかを選べるようになっています。

サイトヘッダー透過の例

このサイトのお問い合わせページ のヘッダー部分は以下のようになっています。