WordPressテーマ「twenty seventeen」の背景を透過表示させる

知り合いの貸しログハウスのWEBサイトを作ったのですが、

WordPress標準テンプレート「twenty seventeen」のヘッダー画像に、
ログハウスの写真を入れてみたところ、
思いの外、しっくり来ました。

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%減で、２段階で透過させています。

文字を読むのに邪魔にならないけど、とてもいい感じになりました。

WordPressテーマ「twenty seventeen」の背景を透過表示

 

冬のレジャーで、ひるがの辺りをうろうろすることがありますが、
お仕事の関係で、冬以外もひるがの辺りに行くこともありますが、
自然遊びを満喫でき、エアコンいらずの涼しさで、移住したくなるぐらい、とてもいいところです！

>> ひるがの高原にある貸しログハウス「山宿」

PS

ああ、今日は、お誕生日だったｗ

WordPressテーマ「twenty seventeen」の背景を透過表示させる
Wordpress