WordPressテーマ「SWELL」カスタマイズ。コンテンツヘッダーの画像サイズをちょっと大きくする。

2020 6/05

2020.06.05

WordPressテーマ「SWELL」カスタマイズの備忘。

SWELLERS（SWELLユーザー）のSlackコミュニティでふと見かけて、同様のカスタマイズを行なっていたので残しておきます。パッと書いちゃいます。

SWELLではタイトルの表示位置を「コンテンツ上」に設定するとコンテンツヘッダーというエリアが表示されますが、そのエリア全体の縦幅を広げるCSSコードです。

.l-topTitleArea {
  min-height: 300px;
}

こちらの「300px」の箇所を好きな数値に変えてもらえれば、お好みのコンテンツヘッダーエリアの高さを設定することができます。

ただ、これだとスマホ表示時のコンテンツヘッダーエリアの高さも調節されてしまうんですね。スマホで300pxはちょっと大きいかもしれません。

そういうときには次のようにメディアクエリを使用して、スマホとPC画面でそれぞれ違った高さを表示させるようカスタマイズするのもありだと思います。

PCのみ反映させる（デフォルトの高さは240pxくらい）

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

スマホのみ反映させる（デフォルトの高さは150pxくらい）

@media (max-width: 480px) {
.l-topTitleArea {
  min-height: 180px;
}}

といった具合、数値は自由に変えてみると良いと思います。

参考として、WordPressテーマ「SWELL」を使ったWebサイト/ブログギャラリー＆リンク集のページではPCだけコンテンツヘッダーエリアの高さを300pxにカスタマイズしています。「これくらいなんだ」と目安になれば幸いです。

通常の投稿では使う必要のないカスタマイズだと思いますが、キラーコンテンツや固定ページなどでコンテンツヘッダーを少し目立たせたいときなどには、高さを変えてみるのも良いんじゃないかなあと思います。