そらより

おもしろいと、かわいいと、おいしいと、うれしい。

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

   

 

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

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

 

スポンサーリンク

 

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

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

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

背景色の透過

 

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

 

三つの背景色

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

各部説明580

 

①背景色

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

②サイト背景色

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

③記事エリア背景色

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

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

 

各背景色の設定方法

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

背景色の透過

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

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

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

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

 

 

スポンサーリンク

 

スポンサーリンク

 

クリックしていただけると幸いです
にほんブログ村 ライフスタイルブログ 暮らしを楽しむへ

おススメ記事

歳の差婚250 1
「年の差婚(交際)」の最適年齢を割り出す法則が海外にあった!

数年前から「年の差婚」がブームです。人気キャスターや人気女優、人気歌手が、歳の離 ...

補色01 2
赤い点を30秒間じっと見つめてください。天井を見上げると不思議なことが!

  夏休みの想い出に友達と撮った記念写真。でも、後ろをふと眺めると壁や ...

パーティ開け11 3
「パーティ開け」不要!スナック菓子はもっとスマートにシェアできる!!

ポテチの袋、いつもどうやって開けてますか? 友達やパートナーとシェアして食べると ...

 - WordPress, デジタル

Copy Protected by Chetan's WP-Copyprotect.