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

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

 

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

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

 

スポンサーリンク

 

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

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

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

背景色の透過

 

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

 

三つの背景色

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

各部説明580

 

①背景色

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

②サイト背景色

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

③記事エリア背景色

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

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

 

各背景色の設定方法

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

背景色の透過

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

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

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

AFFINGER5では

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

1805touka

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

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

 

ピックアップ記事(一部広告)


ランクアップに応援ください
にほんブログ村 ライフスタイルブログ 暮らしを楽しむへ 人気ブログランキング
  • この記事を書いた人
  • 最新記事

sorayori

昭和半ば生まれのおじさんです。妻と娘と猫と金魚と東京・吉祥寺にひっそり暮らしています。息子夫婦に孫娘ちゃんもいます。くらしとデジタルとこころにうるおいをお届けしたいと思っています。

人気の記事

1

最近ココナッツオイルがブームとかで、我が家にも常備されるようになりました。朝食のパンやサラダだけでなく、コーヒーに溶いて飲むというようなことをしています。たおやかな甘さが口の中に広がり、南国パラダイス ...

horeizaiinhair 2

  本格的な夏がもうすぐやってきます。みなさん暑さ対策、熱中症予防はどのように工夫していますか。 うちの娘ちゃんによると、ポニーテールが結べるくらいの髪の長さがあれば、かんたんでとってもよい ...

12本体アップ 3

  いったいどれほどの方に役立てていただけるかまったく自信がございませんが、ニッチな話題が好きなそらよりは今回噴霧器のレビューを書くのであります。(2016年5月8日追記 「使用後の洗浄」に ...

hanazo 4

「花ぞ」の花は梅 東進の「全国統一中学生テストTVCM」で、先生が板書をしながら生徒に注意をうながします。 「この、花ぞの花は梅だからな」 すると一人の生徒が手を挙げ質問します。 「なぜ桜じゃなくて梅 ...

rakuchinpack01 5

  キッチン用保存容器の条件とは お料理上手の条件は段取り上手。手にヨリをかけて作ったせっかくのご馳走も冷めたり、伸びたりしては台無しです。美味しいものを美味しいうちにテーブルに並べるには、 ...

leplus01 6

  いままで900円台のイヤフォンを使っていた輩が、音がどうのこうのと申し上げるのは誠に恐縮なのですが、いやハイレゾイヤフォンの音の良さったらすごかったです。   スポンサーリンク ...

aircon_kojihikomi 7

  もう20年近く使ってきたエアコンが、この夏動かなくなりました。エアコンの買い替えはシーズンが替わる11月、それも水曜日が安いと耳に挟んだので、このたびちょい古な2016春夏モデルを購入し ...

EGT260DX01 8

50対1を守らないとどうなるか? 新規に購入した草刈機の最初の使用時に、間違って25対1の混合燃料を入れてしまいました。因果関係は不明ですが、エンジンが掛かりません。 こうした状況について推測できる範 ...

パスワード作成 9

  パスワードがいくつもあって管理できない、と昔から言われ続けていますが、いっこうに改善される気配がありません。 でもパスワードを使う場面はますます増えています。 もしもご自分のパスワードの ...

pdfedit 10

無料で配布されているPDFビューア「Acrobat Reader(旧Adobe Reader)」はPDF文書の表示、検索、印刷、テキストやフォームの入力、注釈機能の使用が可能です。 しかし画像を挿入・ ...

スプレー容器 11

春夏秋冬、汗っかきさんにとって気を緩めてよい季節なんてありませんよね。朝夕と昼の温度差が激しかったりしようものなら、うっかり服装のチョイスをまちがえ、外出先で大汗をかくということしばしばです。 そんな ...

sentakki_door03 12

  歳の瀬に朝から困ったことが起きました。洗濯機のドアが開かなくなってしまったのです。 2008年に購入したPanasonicのドラム式洗濯機NA-VR1200Lという機種です。購入してから ...

-AFFINGER, WordPress, セレクトワード, モバイル&PC
-

Copy Protected by Chetan's WP-Copyprotect.

Copyright© そらより , 2018 All Rights Reserved.