知り合いの貸しログハウスのWEBサイトを作ったのですが、
WordPress標準テンプレート「twenty seventeen」のヘッダー画像に、
ログハウスの写真を入れてみたところ、
思いの外、しっくり来ました。
今まで、一度も使ったことがなかったのですが、
ページ1枚もので、ドーンと商品をアピールするには、良いテンプレートですネ！
しかし、残念なことに、スクロールすると、
ページトップにメニューが載っているだけの、
真っ白で、味気ないページになってしまいます。（背景色指定は可）
ということで、
背景にも、ヘッダー画像を表示
したら、かっこよくなるんじゃないかと思い、やってみました。
いろいろ探してみましたが、ドンピシャで解説してくれているページがなくて、
結局、透過させるCSSを参考に、自力で見つけたので、公開します。
まず、管理画面のテーマの「カスタマイズ」から、
「追加CSS」を選び、以下のCSSを追加します。
.site-content-contain {
background-color: rgba( 255, 255, 255, 0.70 );
}
.site-content .wrap {
background-color: rgba( 255, 255, 255, 0.70 );
}
上記を貼り付けて、「公開」すれば、背景が透過されます。
一応、解説
- .site-content-contain
メニューより下の領域のDIVタグのクラス - .site-content .wrap
文章領域のDIVタグのクラス
を、それぞれrgbaで色指定。（aは、alphaの略だと思われる）
255, 255, 255＝白が、それぞれ70%の濃さで表示させています。
※opacity という透過できる定義もありますが、
文字まで適応されるため、rgbaを使用
.site-content-containには、opacityでの指定でも良いかもしれません。
文章を記載した箇所と、またその背景とを、
ヘッダー画像の30%減、それの更に30%減で、２段階で透過させています。
文字を読むのに邪魔にならないけど、とてもいい感じになりました。
冬のレジャーで、ひるがの辺りをうろうろすることがありますが、
お仕事の関係で、冬以外もひるがの辺りに行くこともありますが、
自然遊びを満喫でき、エアコンいらずの涼しさで、移住したくなるぐらい、とてもいいところです！
PS
ああ、今日は、お誕生日だったｗ