無料のワードプレステーマ「BusinessPress」のヘッダー画像やホームページヘッダーの背景画像を明るくしたいと思ったことはないですか？
Contents
BusinessPressのヘッダー画像は暗い
「BusinessPress」のヘッダー画像やホームページヘッダーの背景画像は、上に乗せたタイトルやテキストの文字色が白なので、文字が見やすいように暗くなっています。
そのままの状態（暗い）
カスタマイズ後（明るい）
今回は、この画像の明るさを調整したいと思います。
ヘッダー画像、ホームページヘッダーの明るさを調整する追加CSS
ヘッダー画像、ホームページヘッダーの背景画像の明るさは、追加CSSで調整できます。
ダッシュボード左側「外観」＞「カスタマイズ」をクリックし、「追加CSS」をクリックしたら、以下のコードを追加します。
.jumbotron-overlay{
background-color: rgba(0,0,0,0.4);
}
.home-header-overlay{
background-color: rgba(0,0,0,0.4);
}.jumbotron-overlayクラスは、ヘッダー画像上のフィルターの役割をしています。
background-color: rgba(0,0,0,0.4);の数字の最初の３桁はRGB、R＝赤、G＝緑、B＝青の色の濃さ（0～255）を表していて、最後の４桁目の数字0.4（0～1）は、不透明度を表しています。
つまり、rgba(0,0,0,0.4)は、赤＝0、緑＝0、青＝0なので黒、不透明度は0.4（0だと透明、1だと真っ黒）ということになります。
この不透明度0.4というのは、BusinessPressの規定値なので、これより小さくすれば明るく、大きくすればより暗くなります。
同様に.home-header-overlayクラスは、ホームページヘッダーの背景画像のフィルターの役割をしています。
ヘッダー画像おすすめの設定
思い切って不透明度を０にすると、もともとの画像の明るさになるのでおすすめです。
.jumbotron-overlay{
background-color: rgba(0,0,0,0);
}ただ、これだと画像の上に乗っているタイトル文字色が白で見づらくなると思うので、もうひと工夫必要です。
まず、タイトルの文字色を変えるのは、
.jumbotron-title{
color: #000;
}これでタイトル文字色が黒になります。
もしくは、タイトルの文字色は白のままで、影を付けて見やすくする方法もあります。
.jumbotron-title{
text-shadow:2px 2px 8px #000;
}タイトルにはBusinessPressのもともとで影がついているのですが、もともとのは微妙なので、もう少しぼかした感じにしました。
ちなみにホームページヘッダーのタイトルは、.home-header-titleクラス、テキストは、.home-header-textクラスになりますので、影を変えたかったら以下のようになります。
.home-header-title{
text-shadow:2px 2px 8px #000;
}
.home-header-text{
text-shadow:2px 2px 8px #000;
}まとめ
最終的に、ホームページヘッダーもヘッダー画像も明るくして、タイトル、テキストの影を調整した追加CSSが以下になります。
.jumbotron-overlay, .home-header-overlay{
background-color: rgba(0,0,0,0.4);
}
.jumbotron-title, .home-header-title, .home-header-text{
text-shadow:2px 2px 8px #000;
}ワードプレスの無料テーマ「BusinessPress」では簡単に、シンプルだけどおしゃれでスタイリッシュなヘッダー画像やホームページヘッダーの設定が出来ます。
ただ、細かなところまでカスタマイザーで設定できるわけではないので、後は追加CSSで微調整する必要があります。
「BusinessPress」は、構造がシンプルで分かりやすいのでカスタマイズしやすくおすすめです。
