WordPress

「STINGER PLUS+(AFFINGER5)の背景色透過ができない」をわかりやすく解決

投稿日:2016年7月7日 更新日:

使いやすくSEOにも最適と評判のWordPress無料テーマSTINGERシリーズ。そらよりも別のサイトでSTINGER PLUS+を導入させていただきました。でもカスタマイズの最初からいきなりつまずいてしまったので、解決法をシェアしておきます。

引っ掛かったのは「外観」の「カスタマイズ」で操作する記事エリア背景色の透過処理の方法です。

 

背景画像を透過で見えるようにしたい

STINGERの公式サイトで紹介されているデモ「Sample01 美容院のサイト」のように背景画像が記事エリアで透けて見えるようにしたいと思いました。でも、どれをどう設定したら、そうなるのか最初はちょっとわからなかった。つまずきのきっかけは「背景色」と名の付くものが複数あったことなんです。

下の画像をご覧ください。これは「外観」>「カスタマイズ」>「基本カラーと各メニュー設定」で表示されるパネルの上部を切り取ったものです。①背景色、②サイト背景色、③記事エリア背景色と三つあります。しかも②サイト背景色は「サイト全体を包括する背景色」と説明されています。

背景色の透過

 

WordPressによるサイト構築に馴れている人なら難なく理解できることなのかもしれません。でも、経験が浅く、しかも少々頭の固いそらよりには、これらが何を示しているのか、さっぱりわかりませんでした。ごめんなさい、開発者様。悪く言おうというわけではないのです。僕のようなポンコツでもぜひ使ってみたくなるほどSTINGERシリーズ(STINGER PLUS+)は魅力的なのです。

 

三つの背景色

さて、ここでまずそれぞれの「背景色」について違いを明らかにしてまいりましょう。

各部説明580

 

①背景色

ブラウザのウィンドウで表示されるすべての部分のことです。「カスタマイズ」で「背景画像」を設定すると、この背景色の上に画像が配置されます。つまり「背景画像」を設定するのであれば、この部分は「デフォルト」のままで、何も設定しなくてよい、ということになります。

②サイト背景色

これはヘッダーとフッター、右カラムと記事エリアすべてを含んだ部分の背景色です。ここにもしもカラーを設定すると、下の①背景色及び「背景画像」はカラーに隠れて見えなくなります。

③記事エリア背景色

これは文字通り、投稿記事や固定記事が反映される部分の背景色です。ここに「背景色透過」の設定が適用されます。

ちなみに「⑤サイト上部のライン」は冒頭のパネル画像の点線で囲んだ部分の説明です。「ラインの横幅を100%にする」にチェックを入れると①背景色の上部にラインが入ります。チェックを入れなければ②サイト背景色の上部のみとなります。

 

各背景色の設定方法

ここでは「背景画像」を透過させる方法をご説明します。もう一度「基本カラーと各メニュー設定」パネルを見てみましょう。

背景色の透過

①背景色は前述のとおりデフォルトのままでかまいません。どうせ「背景画像」で隠されてしまうのですから。そんな方は少ないと思うのですが、もしもウィンドウの一部だけにしか画像を配置しないという場合は任意の背景色を選択してください。

②サイト背景色は「クリア」を選択してください。ここにカラーを設定すると、以下の操作で「背景画像」を透過させることはできません。

③記事エリア背景色はデフォルトのままでかまいません。あるいは白でも任意のカラーを設定してもかまいません。ここでもじつはつまずいてしまいました。④にある「背景色透過※白のみ」に惑わされてしまったのが原因です。「※白のみ」とは何を指す言葉なのか。最初①や②、③を白にしてみましたが、いま一つ意味がわかりませんでした。いろいろ試して気付いたのですが、これは③でどんなカラーを設定しても「白にしかなりませんよ」ということだったのですね。たとえば③で赤を選択しても、その上に白が被り、その白の濃淡で「透過」を表現する、ということなのでした。このハードルを突破できたところで一気に透過の仕組みがわかりました。

AFFINGER5では

「外観」>「カスタマイズ」>「基本エリア設定」で表示されるパネルの「記事エリア背景色」が③④に当たります。

1805touka

④の「▼」をクリックすると透過濃度の候補が表示されます。%の数字を上げるごとに背景の色や画像がより鮮明に(白が薄く)なっていきます。

いかがですか。これであなたも目の前の霧が晴れませんでしたか。知っている人から見ればささいなことでも、門外漢にとっては謎だらけ。そらよりはこれからも初心者目線でこんな謎を解明してまいりたいと思います。

 

-WordPress
-

Copyright© IT-SORAYORI , 2018 All Rights Reserved.