このように ↑、画質のよいページヘッダー画像を投稿で使うためのやり方をこの記事では紹介しています。

なぜ、フルサイズのきれいなアイキャッチ画像が使われないのか？

Lightning G3 Pro Unit をインストールすると、投稿に設定されているアイキャッチ画像をその投稿のページヘッダー背景画像として使うことができます。

アイキャッチ画像のピクセルサイズが一定以上大きい場合、ページヘッダー背景画像として使われるのはオリジナル (フルサイズ) のアイキャッチ画像ではなく、大サイズ の画像です。

そのため、この投稿のようにページヘッダーにアイキャッチ画像を大きく表示して閲覧者の注意を惹くことを意図した場合、ページヘッダー背景画像がぼやけて見えてサイト制作者の期待に沿わない結果になってしまうことがあります。

工務店の建築事例や料理、観光スポットなどを紹介する投稿では最初に目にするメインビジュアルが重要ですが、一般的にはこの部分は記事タイトルの背景の飾りという扱いなので、フルサイズにして表示が重たくなるよりもそこそこのサイズで抑えておこうというのが Lightning G3 Pro Unit の仕様になっているのだと思います。

ということで、投稿のページヘッダー画像をくっきりとしたものにカスタマイズしたい場合のやり方をいくつか紹介します。

くっきりしたページヘッダー背景画像にするやり方その①

まず、いちばんわかりやすいやり方から...。

大サイズ のピクセル指定を大きくすることにより、ページヘッダー背景画像の画質を上げることができます。

大サイズは メディア設定 で指定することができます。

WordPress の初期設定では 1024 になっていますが、この数値を大きくすればページヘッダー背景画像が大きくなり、よりくっきりと表示されるようになります。

注意点

アップロード済みの画像にはこの設定が反映されないので、アイキャッチ画像を再度アップロードするか、プラグインを使ってサムネイル画像を再生成する必要があります。

この設定を行うことにより、サイトのコンテンツ内で使われている(および、今後使用する) 大サイズの画像にも影響してしまいますので、その辺のことも考慮してサイズを決める必要がありますし、その影響が心配な場合はこのやり方は適していないかもしれません。

くっきりしたページヘッダー背景画像にするやり方その②

次に... カスタマイズといえば、やはり フック ですね (^^♪

子テーマの functions.php などに以下のアクションフックを追加します。

function my_wp_footer(){

  // 投稿でフルサイズのアイキャッチ画像をページヘッダー背景画像に使用する
  if( is_single() ){
    $header_bg_url = get_the_post_thumbnail_url($post->ID, "full");
    if ( $header_bg_url ) {
      echo '<style>@media (min-width: 1200px) { .page-header { background-image: url(' . $header_bg_url . '); } }</style>';
    }
  }

}
add_action('wp_footer', 'my_wp_footer');

メディアクエリを使って、1200px以上の画面幅のときだけ CSS を適用しています。

子テーマを作る手順は以下のページを参考にしてください。

Lightning の子テーマの準備

このアクションフックにより、フルサイズのアイキャッチ画像をページヘッダー背景画像として使用する CSS がフッターに出力されます。

このアクションフックだと、記事タイトルの背景の飾り扱いでよい投稿にも重たい画像が使われてしまうのが気になります。

きれいなページヘッダー画像を使いたい建築事例や料理、観光スポットなどは カスタム投稿タイプ で作成して、そのカスタム投稿タイプの投稿だけに CSS を適用するような条件分岐を以下のように書くのがよいでしょう。

function my_wp_footer(){

  // カスタム投稿タイプ「house」の投稿でフルサイズのアイキャッチ画像をページヘッダー背景画像に使用する
  if( is_singular( 'house' ) ){
    $header_bg_url = get_the_post_thumbnail_url($post->ID, "full");
    if ( $header_bg_url ) {
      echo '<style>@media (min-width: 1200px) { .page-header { background-image: url(' . $header_bg_url . '); } }</style>';
    }
  }

}
add_action('wp_footer', 'my_wp_footer');

くっきりしたページヘッダー背景画像にするやり方その③

厳密には、ページヘッダー背景画像ではありませんが...

ちょっとだけ手間は増えますが、このやり方がいちばんよいのではないかと個人的には思います。

そう考える理由

ページヘッダー部分のコンテンツを自由に配置できるという柔軟性 (下記参照)
サイト内の他の部分に影響が生じないという安全性

まず、投稿の Lightning デザイン設定 を以下のように設定します。

余白設定	サイトコンテントの上下余白を無しにする
非表示設定	ページヘッダーを表示しないパンくずリストを表示しない

そして、ページの先頭に Outer ブロック または カバーブロック を以下の例のように配置してページヘッダーとして表示します。

フルサイズのアイキャッチ画像を投稿のページヘッダー背景画像に使うには

投稿のページヘッダー画像をくっきりとしたものにカスタマイズしたい場合のやり方をいくつか紹介します。

2023年1月5日

SEO 面を考えると投稿タイトル部分は H1 見出し を使用するのが望ましいですし、使い勝手を考えて パンくずリストブロック を配置しておくのがよいと思います。

Outer ブロックの中に以下のようにブロックを配置してありますので、投稿のタイトル、抜粋、投稿日は自動的にページヘッダーに表示されます。

ノーコードでページヘッダー部分のコンテンツを自由に配置できるのがこのやり方のいちばんのメリットです。

投稿のタイトル、抜粋、投稿日のようなブロックって、たぶんブロックテーマで使うために追加されたんだと思いますが、クラシックテーマでも役に立ちますね。

こうして作ったものを以下のように VK ブロックパターン に登録しておけば、投稿作業が楽になります。

サイト運営者プロフィール

対馬俊彦魚沼情報サービス (新潟県南魚沼市)

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

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

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

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

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

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

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

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

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

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

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

ライセンス購入はこちら