WordPressの公式テーマのTwenty Seventeenは、トップページに大きなヘッダー画像を表示できます。これは強烈な印象を与えるので、なかなか気に入っています。
しかし、それ以外のページのヘッダー画像はその大きなヘッダー画像のごく一部が表示されるだけです。それにちょうどいい画像がたまたまあればいいのですが、なかなかそういうわけにもいきません。実際、このブログでも、トップページ以外のページではろくな画像になりません。
たとえば、落ち葉しか見えないとか、木だけとか・・・。これでは、せっかくトップページによい画像を使っていても、意味がありませんよね。だいたい、トップページを見に来る人自体極めて少ないので、トップページ以外のヘッダー画像を充実させることの方が優先順位が高いと思います。
そこで、トップページ以外のページに別のヘッダー画像を表示する方法です。
やってみると、まずトップページ以外のページでは高さの低い画像しか使えません。よって、トップページのヘッダー画像を切り取って、トップページ以外のページのヘッダー画像に使おうとすると、結局、左右に余白ができたりしました。
そして、画面サイズによりいろいろ状況が変わってきます。パソコンで見た場合とスマホで見た場合でずいぶん違います。しかも、スマホを縦にして見た場合と、横にして見た場合で大きく違います。
トップページ以外のページのヘッダー画像に別の画像を指定する方法
要するに、トップページに使っているヘッダー画像を非表示にして、別の画像を指定するだけです。
body:not(.home) .wp-custom-header img {
display: none;
}
body:not(.home) .custom-header {
background-image: url(使いたい画像のＵＲＬ);
background-repeat: no-repeat;
background-position: center;
height:使いたい画像の高さ（ピクセルで指定）;
}no-repeatにしないと、顔が二つ現れたりして変でした（笑）。それから、位置も中央にしないと左端に寄ってしまいます。
しかし、こうすると、どうしても左右に余白ができてしまいます。
ヘッダー画像の左右の余白を消す
都合のよいことに、このブログのヘッダ画像の端は木立で、しかも暗いので、ここを左右足してしまいます。元の画像に足してもいいのですが、もう一つ木立だけの背景画像を作って、重ねてみました（笑）。
下の画像のサイズは、横幅が2000pxで、高さは上の画像と同じにします。
body:not(.home) .custom-header {
background-image: url(上の画像のＵＲＬ), url(下の画像のＵＲＬ);
background-repeat: no-repeat;
background-position: center;
height:画像の高さ;
}
}こんな具合です。
さらに画面のサイズごとに別々のヘッダー画像を用意してみました。画面サイズは、デフォルトは980pxとして、979px以下の場合と、599px以下の場合を考えました。
979px以下（600px～979px）の画面には、横600px、縦150pxの画像を用意して、599px以下の画面には、横350px、縦150pxの画像を用意してみました。
@media screen and (max-width: 979px) {
body:not(.home) .custom-header {
background-image: url(上の画像のＵＲＬ), url(下の画像のＵＲＬ);
background-repeat: no-repeat;
background-position: center;
height: 150px;
}
}
@media screen and (max-width: 599px)) {
body:not(.home) .custom-header {
background-image: url(上の画像のＵＲＬ), url(下の画像のＵＲＬ);
background-repeat: no-repeat;
background-position: center;
height: 150px;
}
}画像は重ねなくても、一枚にしてもいいかもしれません。要は、どちらにした方が早く表示できるかだけの問題です。ただ、一番上の画像はjpgの場合、画像サイズが最小になりましたが、下の画像は単純であるためか、pngの方が小さくなりました。
こだわりがあったら、どちらが早くなるか実験してみるといいでしょう。私もそのうち暇ができたら、実験してみようかと思います。
まあ、よく見ると、画像が重なっていることに気がつくかもしれないと言うことはあり得ますね。
追記（２０２０年３月２３日）：
その後、重ねて見たところ、その方が画像のサイズが半分または半分以下になる上、表示も速くなり、スマホを縦から横にしたときもスムーズに表示されることを発見しました。結局、背景と真ん中の画像を分けるのではなく、最初から合成した方がいいという結論になりました。合成は、その辺の画像処理ソフトでできるので、やってみて下さい。私はホームページ・ビルダーに付属しているウェブアートデザイナーでやりました。