【SWELL】固定ページの「タイトルの背景画像」の高さを変更するカスタマイズ

ハシビィくん

SWELLを使っていると、固定ページの「タイトルの背景画像」部分をもう少し大きくしたいと思うことがあるっす。でも設定項目がないんすよね〜。

カピーさん

うむ。この部分は設定項目として実装されていない。だが、CSSで簡単に変更することができるから伝授しよう。

固定ページの「タイトルの背景画像」を変更することで、該当画像の見え方が変わり、記事内容に一致した画像によって印象付けることができたりします。

「タイトルの背景画像」の高さはCSSで変更が可能

「タイトルの背景画像」の設定項目はテーマ側で用意はされていません。

そこでCSSで変更することができます。CSSを貼り付ける箇所によって、有効範囲が異なりますので注意を。

特定のページにのみ有効にしたいケース【簡単】

@media (min-width: 768px) {
  .l-topTitleArea {
    min-height: 350px;
  }
}

特定の固定ページ（1ページ）にのみ「タイトルの背景画像」の高さを調整したい場合は、編集時の下部にある「CSS用コード」に貼り付けるのが簡単でおすすめです。

上記画像の入力箇所は各ページ（記事）に用意されています。有効にしたいページにのみ貼り付けることができるので、一括ではなく「問い合わせ」のみ有効にしたいケースはこちらの方法を選ぶのが簡単です。

全ての固定（投稿）ページに有効にしたい場合

@media (min-width: 600px){
  body .page .l-topTitleArea {
    min-height: 350px;
  }
}

固定ページ限定で「タイトルの背景画像」の高さを調整したい場合はこちらになります。pageで固定ページということを判断しています。

@media (min-width: 600px){
  body .single .l-topTitleArea {
    min-height: 350px;
  }
}

投稿ページ限定の場合は、singleの有無で判別される形となっています。

まとめ：固定ページの「タイトルの背景画像」の高さを変更するカスタマイズ

SWELLの固定ページや投稿ページでタイトルの背景画像の高さをカスタマイズする方法について解説しました。
WordPressのbodyクラスやテーマ特有のクラスを活用することで、特定のページにだけスタイルを適用できます。

メディアクエリを使えば画面サイズに応じた調整も簡単です。今回の方法を使って、より見やすくデザイン性の高いページを作成してみてください。