固定ページの見出し画像にタイトルが重なる：追加 CSS でタイトルを画像の下に出す

文字の入った画像を固定ページの見出しに使ったら、ページのタイトルと重なって、どちらも読めなくなりました。そのサイトのテーマは、固定ページの上に見出し画像（背景画像）を大きく出し、その真ん中に白い枠でページのタイトルを重ねる作りになっています。写真だけの画像なら見栄えがよいのですが、アイキャッチのように文字を描いた画像を使うと、画像の文字とタイトルが重なって、どちらも読めなくなっていました。

テーマのファイルは直さずに、「外観 → カスタマイズ → 追加 CSS」だけで、タイトルを画像の下に出すようにしました。追加 CSS は、消せば元の表示に戻るので、試しやすいのも利点です。

起きていたこと

開発者ツールで見出しの部分を調べると、見え方のおかしなところは 2 つあり、それぞれ別の指定が原因でした。

cover は、枠をすき間なく埋めるように画像を広げ、はみ出した分を切る指定です。枠の縦横比と画像の縦横比が違うと、上下か左右のどちらかが切れるので、文字入りの画像では文字の一部が見えなくなることがあります。

追加した CSS

次の CSS を「外観 → カスタマイズ → 追加 CSS」に書いて公開しました。テーマのファイルは変えていません。

body.page #page_header {
    height: auto !important;
    padding-top: 61.45%;
    background-size: 100% auto !important;
    background-position: center top !important;
}

body.page #page_header .square_headline {
    position: static !important;
    top: auto !important;
    transform: none !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    padding: 18px 0 0 !important;
    text-align: left;
}

body.page #page_header .square_headline_inner {
    height: auto !important;
    top: auto !important;
    transform: none !important;
}

body.page #page_header #post_title {
    font-size: 26px;
    line-height: 1.5;
    text-align: left;
}

@media screen and (max-width: 767px) {
    body.page #page_header #post_title {
        font-size: 20px;
    }
}

#page_header や .square_headline は、このときのテーマでの名前です。テーマによって名前は違うので、開発者ツールで見出しの画像とタイトルの要素を選び、id や class を確認してから書き換えてください。!important は、テーマの CSS の指定に負けないように付けています。

padding-top の % で、画像の高さの分だけ場所を空ける

padding-top を % で書くと、高さではなく「親の幅」に対する割合になります。この決まりを使うと、画面の幅が変わっても縦横比を保った箱を作れます。今回の見出し画像は 830×510 だったので、510 ÷ 830 ＝ 0.6145 から 61.45% にしました。

background-size: 100% auto と組み合わせると、画像は幅いっぱい・高さは縦横比のままで出るので、空けた場所にちょうど収まり、上下は切れません。画像を差し替えるときは、縦横比が同じ画像にするか、% を計算し直します。今は aspect-ratio: 830 / 510 のような書き方もありますが、このテーマでは試していません。

真ん中に寄せる指定は、top と transform の両方を外す

要素を真ん中に寄せる書き方として、top: 50% と transform: translateY(-50%) を組み合わせる方法がよく使われます。top: 50% で枠の上の端を親の真ん中まで下げ、translateY(-50%) で自分の高さの半分だけ上に戻すので、両方がそろって初めて真ん中になります。

/* よくある「真ん中に寄せる」書き方 */
.square_headline_inner {
    position: absolute;
    top: 50%;                     /* 上の端を、親の高さの半分まで下げる */
    transform: translateY(-50%);  /* 自分の高さの半分だけ上に戻す */
}

そのため、片方だけを外すと、半分だけずれた位置に出ます。今回も最初は外側の枠（.square_headline）だけを直したのですが、内側の枠（.square_headline_inner）にも top: 50% と translateY(-50%) が残っていて、タイトルが画像の下の端にかかって出ました。開発者ツールで内側の要素も選び、「計算済み」のタブで top と transform の値を見たところで、残っていた指定に気づいたので、内側の枠にも top: auto と transform: none を足しています。親の要素の position や height も、決め打ちになっていないかを合わせて見ておきます。

確認したこと

追加 CSS は、カスタマイズの画面で保存する前にプレビューで見られます。CSS を足したあと、ページを PC の幅とスマホの幅の両方で開き、次のことを確認しました。

今回検証したサイトでは、PC の幅とスマホの幅の両方で、画像とタイトルが重ならずに出ることを確認しました。元に戻したいときは、追加 CSS に書いた分を消せば、テーマの元の表示に戻ります。

まとめ

セレクターの名前はテーマごとに違うので、開発者ツールで実際の名前を見てから書き、PC とスマホの両方の幅で表示を確認します。

参考

• Customizer（WordPress.org のドキュメント）
• padding-top（MDN）
• background-size（MDN）
• translateY()（MDN）