おすすめ記事
【TCD】FAKEのヘッダーカスタマイズ

TCDのFAKEテンプレートを利用している場合、ヘッダー部の背景を変更する手順になります。

ヘッダーにロゴを表示したけど、ロゴが背景動画(画像)に紛れて目立たない、ヘッダーの背景色を変更したいけどWordpress管理画面から変更するメニューがなくて困る、という方に向けてヘッダーの背景色変更作業について説明します。

TCDのFAKEテンプレートとは?

TCDWordpressテーマのひとつである「FAKE

トップ画面のファーストビューでは動画または画像によるアピールを行うことができ、インパクトのあるコーポレートサイトを構築することが可能です。

 

ヘッダーのロゴが目立ない?

確かに背景の画像に紛れて目立ちにくくなっています。

ロゴ及びヘッダーメニューが少し目立ちにくく感じます。

FAKEテンプレートのヘッダー部カスタマイズ前

ヘッダーの背景色を変更

そこでヘッダー背景色を白・文字色を黒にすることでロゴとヘッダーメニューが目立つようにカスタマイズします。

style.cssをカスタマイズすることでヘッダー背景色を変更できます。カスタマイズといっても背景色定義を追加するだけで簡単に変更できます。

#header{
	background-color:#FFFFFF!important;
}

FAKEテンプレートのヘッダー部カスタマイズ(CSS定義修正)

上記の通りCSSファイルを修正すると、、、

FAKEテンプレートのヘッダー部カスタマイズ後

ロゴとメニューの背景色を白になって、ロゴとメニューが目立つようになりました。

CSSを変更したけど画面に変化がない場合

CSSでよるあるのが「変更して保存したけど画面に反映されない」です。

そういう場合は落ち着いてキャッシュのクリアを行いました。利用しているブラウザによってキャッシュのクリア方法は異なってきます。自身が利用しているブラウザのキャッシュをクリアし、再表示することでCSSが適用されて画面に反映されるはずです。

※それでも反映されない場合はCSSがしっかり保存されているのか、修正したCSSファイルは適切なのかを確認しましょう!

 

おすすめの記事