新テーマ「STORK SE」をリリースしました!

ハミングバードでコンテンツ背景を白色に変更するCSSカスタマイズ

ハミングバードではサイト全体の背景色が本文にも適用されており、コンテンツ部分(本文の背景)に色を設定することはできません。

それをアルバトロスのように本文部分にのみ白い背景色を設定する方法をご紹介します。

本文に白背景を適用するCSS

ハミングバードの本文に白背景を適用するには下記CSSを子テーマのstyle.cssなどに追記していただくことで変更可能です。

まずは、ブログ記事ページと固定ページのみに適用する場合のコード。

1. 投稿・固定ページのみで背景色を白にする

上記コードを下記CSSを子テーマのstyle.cssなどに追記していただくことで、記事ページと固定ページのメインコンテンツエリアの背景が白に変わります。

記事ページ背景色適用(PC)
記事ページ背景色適用(スマホ)

簡単に説明すると背景色を白にしつつ、エリア内の余白を追加するためのCSSです。
余白をいれないと、本文の左右が窮屈になってしまいますので、paddingを適用しています。

ただし、上記CSSの場合はトップページや記事一覧ページには背景色が適用されません。
サイト全体で白の背景色を適用したい場合は、代わりに下記のコードを利用します。

2. サイト全体で、メインエリアの背景色を白にする

1で説明したコードの代わりに、こちらの2のCSSを適用することで、記事・固定ページ、トップページ、記事一覧ページでも白背景を適用することが可能になります。

記事一覧ページにも背景色を適用

※このカスタマイズの注意点

ただ、このCSSを追加した場合の注意点として、余白分コンテンツ幅が小さくなってしまいます。

通常は横幅728pxのコンテンツ幅なのですが、余白分幅が小さくなることにより、設置している広告がはみ出てしまう可能性がございます。

その場合は、小さな広告に張り替えるなどの制約がでてきますので、その点は事前にご注意ください。

 

おすすめのWordPressテーマ

ブロックエディタ」に完全対応したSTORK19。

CHECK! OPENCAGEのアフィリエイトプログラムについて /

NEWモデル

STORK SE

よりコンテンツに集中させるテーマ
STORK SE(ストークSE)

STORK SEはシングルカラム(1カラム)に特化したテーマなので、より訴求力の高いページやブログ記事を作成するのに向いています。

究極のモバイルファーストテーマ
STORK19(ストーク19)

ブログを書くのが楽しくなる仕掛けや機能がたっぷり!STORK19は読む人も書く人も快適なWordPressテーマです。

ABOUT US
アバター画像
オープンケージ
ブロガー・アフィリエイター向けのWordPressテーマを制作しています。