ヘッダー画像を設定する(BusinessPress)

(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;
}

山本明正(やまもと あきまさ)

1970年3月(昭和45)徳島大学薬学部卒(薬剤師)
1970年4月(昭和45)塩野義製薬株式会社入社
2012年1月(平成24)定年後再雇用満期4年で退職
2012年2月(平成24)保険薬局薬剤師(フルタイム)
2023年4月(令和5)現在、保険薬局薬剤師(パートタイム)

コメントをどうぞ

メールアドレスが公開されることはありません。