SWELL 記事・固定ページのタイトル背景画像を常に同じに設定するには？

SWELLには、投稿や固定ページのタイトル領域の背景画像としてアイキャッチ画像を表示する機能があります。

この機能で表示される画像は、アイキャッチ画像、アイキャッチ画像が無い場合はNo Image画像になります。

アイキャッチ画像の有無によらず、タイトル背景に常に同じ画像を表示したい、との思いからテーマの機能を調べたら、テーマにその機能がありました。

この記事では、SWELLのタイトル背景画像を常に同じ画像にする設定方法をご紹介します。

カスタマイズ⇒サイト全体設定⇒コンテンツヘッダーに設定がある

わかりにくいのですが、SWELLのタイトル背景部分の設定は、コンテンツヘッダーにあります。

タイトル背景用デフォルト画像を指定することで、すべてのページの背景画像が指定のものに切り替わります。

この指定は、アイキャッチ画像よりも優先されます。

画像フィルターやオーバーレイの設定も変更できます。

SWELLのコンテンツヘッダーの見た目のカスタマイズ

コンテンツヘッダーのカスタマイズは、カスタマイザーにある項目しかありませんので、ダイナミックな見た目の変更を行うことはできません。

SWELLのコンテンツヘッダーは全幅になります。

背景画像はobject-fit:coverになりますので、画像がきれいに表示されないことが多いです。

例えば、サイトでコンテンツヘッダーの見た目を次のようにカスタマイズしたいときにはどうしたらよいでしょうか？

• コンテンツヘッダーをサイト幅にする＋サイト幅のその側の背景を塗りつぶす
• 背景画像を画像サイズのまま表示する

コンテンツヘッダーをサイト幅にする＋サイト幅のその側の背景を塗りつぶす

SWELLのコンテンツヘッダーは全幅です。

コンテンツヘッダーをコンテンツ領域と同じ幅にするにはカスタマイズが必要です。

シンプルにコンテンツヘッダーをサイト幅と同じくするだけであれば、CSSで対応できます。

#top_title_area {
    max-width: var(--container_size);
    margin: 0 auto;
}

このままだと、コンテンツヘッダー領域がサイト幅になってしまうので、サイト幅の外側の領域の背景色を変えたい時に指定できません。

コンテンツヘッダー領域にラッパーのdivをかぶせてあげるようにテンプレートパーツ（parts/top_title_area.php）をカスタマイズします。

この記事のカスタマイズは子テーマを使います。

<div class="top_title_area_pre"><!-- 追加 -->
<div id="top_title_area" class="l-topTitleArea <?=esc_attr( $filter_class )?>">
	<?php



</div>
</div><!-- 追加 -->

#top_title_area {
    max-width: var(--container_size);
    margin: 0 auto;
}
.top_title_area_pre {
    background: #f2ede3;
    border-bottom: 1px solid #e3d1be;
}

背景画像を画像サイズのまま表示する

背景画像を画像のサイズそのままで表示したい場合は、object-fit:noneに変更します。

その上で、画像の表示位置をobject-positionで調整します。

画像を右に寄せて表示する場合は、object-position: right center;となります。

#top_title_area .u-obf-cover {
    object-fit: none;
    object-position: right center;
}

まとめ

SWELLのコンテンツヘッダーのタイトル背景画像の表示機能を使って、アイキャッチ画像によらず同一の画像が表示される設定をご紹介しました。

また、コンテンツヘッダーを全幅からサイト幅にするカスタマイズもご紹介しました。