WordPressテーマ「Sentry」のヘッダー色をカスタマイズする方法

sentry カスタマイズ ヘッダー 色 アイキャッチ

先日、当ブログのヘッダー部分について問い合わせがありました。

そこで今回は、WordPressで「Sentry」を利用している方、利用しようと思っている方に向けた記事になります。

「Sentry」はデフォルトのカスタマイズでテーマ色を簡単にカスタマイズできます。ただ、部分別に色を変更できないのでデザイン的に平坦になってしまうのが残念なところですよね。

今回は当ブログのように、ヘッダーなどの色を変更してブログ全体を多色構成にするための方法を紹介していきます。「Sentry」の色に関して悩んでいる方は是非参考にしてみて下さい。

スポンサーリンク

まずは「Sentry」のCSSを確認!

sentry カスタマイズ 色 ヘッダー デベロッパーツール

まずはヘッダー部分のCSSを確認しましょう。

Chromeなどのブラウザではデベロッパーツールを利用して、CSSを確認することができますので試してみて下さい。

ちなみに当ブログのヘッダー部分は子テーマに

.header {
background: linear-gradient(-120deg, #A2D6E2, #77CFAB)!important;
}

を追記しています。

「Sentry」のヘッダーをカスタマイズする時は、基本的に「.header」を確認してカスタマイズしていくことになります。

「!important」を利用して優先的に色変更

sentry カスタマイズ ヘッダー 色 important

「Sentry」で部分別に色を変更する際には、上記コードの「!important」が重要です!

「Sentry」ではコードを書き込んでもデフォルトのカスタマイズで指定した色になってしまいます。「!important」を利用すれば追記したコードを優先的に読み込むので、指定した部分だけ色を変更できるようになります。

試しに下記のコードを「Sentry」の子テーマ、もしくは親テーマの「style.css」にコピペしてみて下さい。

.header {
background:  #A2D6E2 !important;
}

どうでしょうか? ヘッダーの部分だけ、テーマ色とは違う色に変更されているはずです。

余談ですが「Sentry」は親テーマでも子テーマでもコピペするだけでOKです。運営していく上では子テーマに追記して、子テーマを利用するほうが安全でしょう。

キャッシュクリアを要チェック!

sentry カスタマイズ ヘッダー 色 キャッシュ

ここまででヘッダーの色が変わっていないという人はキャッシュクリアを忘れていませんか?

CSSを変更した際にはブラウザのキャッシュが残っていては反映されません。

もしもキャッシュクリアを忘れていた人は、ブラウザの履歴消去機能でキャッシュをクリアしてみましょう。

キャッシュをクリアすれば、ヘッダーの色が変わっていることが確認できるはずです。

まとめ

今回は「Sentry」のテーマを利用している人に向けて、ヘッダーの色を変更する方法を紹介しました。

他にも部分別に色を変更してみたいと考えている人は、今回の記事を応用すれば可能なので試してみてはいかがでしょうか?

また「Sentry」のカスタマイズで質問などがあった際には、記事にしたいと思います。

お疲れ様でした。