(1)画像を選択する
BusinessPressにおいても、もちろんサーバーに保存した画像をWeb上に表示することができる。そして、BusinessPressのヘッダー画像には二種類ある。
1)いわゆるヘッダー画像と2)ホームページヘッダー(の画像)である。
なお、ホームページヘッダー(の画像)とヘッダー画像は、同じ位置に重なって配置されている。
1)外観 >> カスタマイズ >> ヘッダー画像
ホームページヘッダーを〈無効〉にしたとき表示される。
つまり、「外観 >> カスタマイズ >> ホームページヘッダー」で
「ホームページヘッダーを有効にする」のチェックを外す。
ヘッダー画像の選択をする場合などでは、このチェックを外しておくとよい。
なお、「ヘッダー画像」画面で、「サブヘッダーを表示しない」にチェックを入れると、サブヘッダー(文字列)の表示を外すことができる。
2)外観 >> カスタマイズ >> ホームページヘッダー
フロントページ(トップページ、ホームページ)のヘッダーを調整することができる。
そして、ここにも画像を配置することができる。
ホームページヘッダーは、ホームページヘッダーを〈有効〉にしたとき表示される。
つまり、「外観 >> カスタマイズ >> ホームページヘッダー」で
「ホームページヘッダーを有効にする」にチェックを入れる。
(2)画像のくすみについて
上記1)、2)の画像共に、多少”艶消し効果?”がかかっており、クールな感じがコーポレートサイトにふさわしい。
BusinessPressのデフォルト画像は、職場の女性にも好評である。
(iPhone7にて確認)
とは言うものの、たまには華やかな画像を置いてみたいとも思う。
style.cssの中に、次のようなコードを発見した。
1)ヘッダー画像に対する設定:
.jumbotron-overlay {
background-color: rgba( 0, 0, 0, 0.4 );
}
2)ホームページヘッダーに対する設定:
.home-header-overlay {
background-color: rgba( 0, 0, 0, 0.4 );
}
両者共に、RGBAカラーモデル(red, green, blue, alpha(色の透明度))で、不透明度40%(やや不透明)になっている。
これを0%にすれば、くすみ?はなくなるはずである。
外観 >> カスタマイズ >> 追加CSS
それぞれのコードを、追加CSSに書き込んだ。
そして、それぞれに対する数値を変える(0→1.0) と、それに伴って画像の色調が変化することを確かめた。
追加CSSでの設定は、子テーマのstyle.cssなどよりも優先して反映される。
つまり、追加CSSで編集しながら、ライブプレビューを行うことができる。
(3)画像の高さについて
「height: 540px;」という大きな画像の設置を試みた。
1)ヘッダー画像の高さ(height):
子テーマの functions.php に、以下を追記する。(この方法は、未だ理解できていない)
add_filter( ‘businesspress_custom_header_args’, function( $args ) {
$args[‘height’] = 540;
return $args;
});
2)ホームページヘッダーの表示サイズを変更する:
追加CSSに、以下を追記する。(確認済み)
.home-header-content {
height: 540px;
}
別サイトがあり種々検討した。
その結果、白地の背景画に対して、不透明度10%(ほぼ透明)、height:270pxでノートパソコン、iPhone共にいい感じのフロントページができあがった。(iPhone用の設定は特に何も行っていない)
3)子テーマのstyle.cssに書き込む
最終的には、以下の設定を子テーマ(style.css)に書き込んだ。
.jumbotron-overlay {
background-color: rgba( 0, 0, 0, 0.1 );
}
.home-header-overlay {
background-color: rgba( 0, 0, 0, 0.1 );
}
.home-header-content {
height: 270px;
}