WordPress カスタム―――トップメニューバーの半透明化

WordPressのテーマの一つであるTwenty Seventeenのカスタムについての備忘録です。

ブラックテーマで恰好良いのですが、少し透過させたいと思いカスタムしました。
トップメニューバーのCSSに「opacity」を指定しました。

最初は勉強不足でbackground-colorにrgba指定するものだと思ってました。

設定は本当に簡単。「style.css」を直接変更するだけです。
(Twenty Seventeenバージョン: 3.1の場合)

※カスタマイズされている他所様のサイトでは大方、「style.cssを直接変更する場合は子テーマを作成する」という記述を見かけます。本サイトではオリジナルテーマ化しておりますので、その編は割愛しております。

①外観>テーマファイルエディタから「style.css」を開きます。

②キーボード「ctrl+F」で検索窓を開き [ navigation-top ]と入力しenter。

③「opacity: (透過割合の数字0~1)」を追記する。

 透過割合の数字は(0=透明)~(1=不透明)まで、0.01単位で指定できます。
 0に近いほうが透明で1に近づくと不透明になります。 

実際の変更(追記)箇所は下記。

/* Navigation */

	.navigation-top {		
		bottom: 0;
		font-size: 14px;
		font-size: 0.875rem;	
		left: 0;
		position: absolute;
		right: 0;
		width: 100%;
		z-index: 3;
	      opacity: 0.7; ← これを追記する
	}

今回、CSSを変更してからプレビューをする際にF5やブラウザの更新ボタンを押しても反映されずに心配になりましたが、急いで確認する時はブラウザのキャッシュクリアが必須であると学びました。