投稿や固定ページのページヘッダーの画像を個別に設定するやり方

この記事はアフィリエイト広告を利用しています。

Lightning G3 無料版でページヘッダーの背景画像を設定するカスタマイズのやり方を以下の記事に書きました。

ページヘッダーのカスタマイズ(背景画像・フォント)

CSS を書いたり、アクションフック、フィルターフックや jQuery などを駆使すれば、無料版でもたいていのことはできます。

上記の記事に書いたやり方はサイト全体で共通の設定になっています。

この記事では、個々の投稿や固定ページにページヘッダーの画像を個別に設定するやり方を紹介します。

設定手順 カスタム CSS

投稿の編集画面で カスタム CSS に以下の行を追加します。*1

.single-post .page-header {
background-image: url(背景画像のURL);
}

スマホ閲覧時に別の背景画像を表示したい場合は以下の行も追加します。

@media (max-width: 575.98px) {
.single-post .page-header {
    background-image: url(背景画像のURL);
}
}

固定ページに設定する場合は .single-post の部分を .page と書き換えます。

*1 編集画面に カスタム CSS を表示するには、プラグイン VK All in One Expansion Unit が必要です。

カスタム CSS
カスタム CSS 設定画面

関連記事

ページヘッダーのデザインをページごとに個別に切り替えるカスタマイズ例...Lightning G3 無料版 / VK Blocks / WordPress のカスタマイズ【新館】

Lightning G3 無料版で、固定ページと投稿で個別にページヘッダーの背景画像とデザインを切り替えることができるようにカスタマイズしました。

有料版の Lightning G3 Pro Unit をお使いの場合は...

固定ページのページヘッダー画像設定はかんたん

固定ページの場合は編集画面に以下の設定画面が表示されますので、CSS を書かなくてもかんたんに設定できます。

Lightning G3 Pro Unit のページヘッダー画像設定画面

投稿の場合はアイキャッチ画像が使える

Lightning G3 Pro Unit には投稿のページヘッダーにアイキャッチ画像を表示する機能があります。

投稿の場合はアイキャッチ画像が使える

Lightning G3 Pro Unit の入手方法

Lightning G3 Pro Unit は有料の WordPress プラグインですが、単体では販売されていなくて、Vektor Passport というライセンス製品に含まれて販売されています。

Vektor Passport は、コピペで使える豊富なプロ品質プレミアムパターン、Lightning G3 Pro Unit、VK Blocks Pro を好きなだけ使える大変お得なライセンス製品です。ライセンス1つで自分が制作・管理する複数のサイトに使うことができます。ライセンス期間は 1年 / 3年 / 5年 から選べます。

Vektor Passport(ライセンス期間1年)
Vektor Passport(ライセンス期間3年)
Vektor Passport(ライセンス期間5年)

投稿者プロフィール

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

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

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

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

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

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

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

今よりもっといい WordPress サイトにしたいなら Vektor Passport がおすすめ

ベクトルから発売されている有料プラグイン Lightning G3 Pro Unit / VK Blocks Pro を使えば、このサイトで紹介しているようなコードを書かずにかんたんにカスタマイズできることがたくさんあります。

名前に Pro がついているので「制作のプロ向け製品」という印象を受けるかもしれませんが、
*もっといいサイトにしたい
* 効率よく作成・運用・管理をしたい
と考えているコーポレートサイトの担当者にこそ使っていただく価値がある製品です。

Lightning G3 Pro Unit / VK Blocks Pro は Vektor Passport というライセンス製品で販売されています(個々の単体販売はされていません)。これらのプラグインを使うと、便利なカスタマイズ機能やリッチなコンテンツ制作に役立つブロックをたくさん利用できるようになりますので、効率的にサイトを制作・運用したい方はぜひお使いになることをおすすめします。