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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

新作!究極のモバイルファースト
WPテーマ「ストーク」

「新しいスマホビュー時代をつくろう」というのをコンセプトに、スマホでの見やすさ、操作しやすさにとことんこだわりました。

インパクトのあるアニメーション
WPテーマ「ハミングバード」

インパクトのあるアニメーションでブログを演出します。

誰が使っても美しいデザイン
WPテーマ「アルバトロス」

シンプルかつ正統派のブログテーマです。

新ショートコード
新機能ボックスショートコードのテスト
現時点でストークテーマのみで実装。検証完了次第別テーマにも実装します。