ページヘッダーのデザインをページごとに個別に切り替えるカスタマイズ例

このサイト (Lightning G3 無料版) で、ページごとにページヘッダーのデザインを切り替えることができるようにカスタマイズしました。

固定ページだけではなく、標準の投稿でもデザインを切り替えることができるようになっています。

デザインの選択画面

ブロックエディター画面に以下の選択肢が表示されて、使いたいデザインを選べるようにしてあります。

例えば、お問い合わせのページ はこの選択肢によってページヘッダーのデザインが以下のように切り替わります。

1. デフォルト背景画像

アイキャッチ画像がいつもページヘッダーに適しているとは限りません。画像によってはよくない見た目になってしまうことがありますよね。

そんなときのためにこの選択肢を用意してあります。

補足
デフォルト背景画像は Lighting 無料版のデフォルトのことではなく、それぞれのサイトでカスタマイズした状態のデフォルトのことです。Lighting 無料版のデフォルトに最も近いのは、最後の「ページヘッダー背景画像を使わない」です。

2. アイキャッチ画像 (オフセット)

メインビジュアルで注意を惹きたい場合はこちら。
この画像 ↓ だと伝わりづらいのですが、左端は全幅、右端はコンテナ幅に揃えてあるオフセットレイアウトで、タイトルをページヘッダーの左下に配置してあります。実物のお問い合わせページでご確認ください。

3. アイキャッチ画像 (テキスト白枠)

このデザインであれば、いろいろなアイキャッチ画像で使いやすいと思います。

4. アイキャッチ画像 (テキスト白文字)

テキストを白文字にして、背景に黒を被せたデザインです。

テキスト部分をぼかしたデザインにしました 2024.5.26

テキスト部分を以下のようなすりガラス風のデザインにしてみました。

5. ページヘッダー背景画像を使わない

約款とかプライバシーポリシーとか、地味なヘッダーが適しているページの場合はこちらがおすすめです。

投稿者プロフィール

対馬 俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら

最新の投稿

この著者の記事一覧

• WordPress2025年10月9日メニュー編集画面の「メニューを削除」を右端に配置するには
• ExUnit2025年9月20日アーカイブページのページタイトルをわかりやすい表示にカスタマイズ
• カスタマイズ2025年8月31日スクロールして表示されたときにアニメーションが始まるカスタマイズ例②
• カスタマイズ2025年8月31日スクロールして表示されたときにアニメーションが始まるカスタマイズ例①