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

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

2023.5.28 機能追加

ページヘッダーでアイキャッチ画像を使用するデザインの種類を1種類から3種類に増やしました。

選べるアイキャッチ画像のデザインは以下の3つです。

  • アイキャッチ画像 (オフセット)
  • アイキャッチ画像 (テキスト白枠)
  • アイキャッチ画像 (テキスト白文字)

上記に加えて、デフォルトの背景画像 と 背景画像なし も選べるようになっています。(全部で5パターン・下記参照)

デザインの選択画面

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

ページヘッダーのデザインを固定ページと投稿で個別に切り替えた実装例

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

1. デフォルト背景画像

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

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

デフォルトのページヘッダー背景画像を使う

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

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

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

アイキャッチ画像 (オフセット)
対馬

この例ではちょっと凝ったページタイトルのデザインにしたので、右上にメインビジュアルを配置した画像を用意する必要がありますね😅
そうではないアイキャッチ画像も使いやすいように、以下のスタンダードなデザインパターンも用意しました。

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

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

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

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

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

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

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

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

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

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

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

ページヘッダー背景画像を使わない場合

弊社 (魚沼情報サービス) ではこのようなカスタマイズのお仕事をお引き受けしています。
デザイン・仕様について、お客様のご要望に合わせてカスタマイズいたします。
無料で費用見積りいたしますので、お気軽にお問い合わせください。

投稿者プロフィール

対馬 俊彦
対馬 俊彦魚沼情報サービス (新潟県南魚沼市)
WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

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

このサイトで行っているカスタマイズのやり方の多くもマンツーマンのオンラインレッスン形式などでわかりやすく説明させていただくことができますので、興味がある方はご連絡ください。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

また、制作業者様、デザイナー様のサイト制作のお手伝いも数多く行っております。いま人手が足りない、ちょっとここだけコーディングを頼みたい、等々… お仕事の依頼をお待ちしています。

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

» ご相談・お問い合わせはこちらからどうぞ

WordPress / Lightning オンラインサポートのご案内

サイトをご覧いただき、ありがとうございます。このサイトを運営している、魚沼情報サービスの対馬です。

WordPress を使用したサイト制作・カスタマイズ・サポートを全国どこからでも承っています。ベクトルが開発している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン (VK Blocks Pro ・ VK Filter Search Pro) を使ったサイト制作・カスタマイズを最も得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

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

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

* 近くに頼りになるところがない
* わからないところを教えてほしい
* 専門家にサイト制作を手伝ってもらいたい
という方はぜひお気軽にご相談ください。

ご要望をうかがった上で費用見積り(無料)を提示させていただきます。