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

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

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

PS

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

-

隣の篠山市が「丹波篠山市」に?

昨日、NHKを見ていたら、お隣さんの篠山市が、「丹波篠山」に指名を変えようとしているという、ニュース。

理由は、

丹波市に、ブランドを持っていかれた
(丹波栗、丹波黒豆など、誤解しているお客さんが多い)

 

丹波市在住の私としては、

「篠山市の市民の仰る通り!」と、爆笑してしまった。

 

丹波市も、郡の合併で出来たが、

  • 丹波と名乗ることで、農産品のブランド力を上げる

という意見と、

  • 丹波市は、他人のふんどしで相撲を取るようで嫌だ
  • 氷上(ひかみ)郡から、そのまま、氷上市でいい

 

まあ、丹波エリアの「端くれ」だと思っていたところ、
「丹波」という名称を手に入れ、ブランド力はアップし、
他人のふんどしで、しっかり相撲が取れているのも事実で。

 

でも、市名を書くのめんどくさそうだな~~

-