STINGER3カスタマイズ記録―メイン、サイドバー、メニューバーの背景を白半透明にする―

2013/12/16 2017/07/06

STINGER3のカスタマイズ、続きましてはメインウィンドウとサイドバー、メニューバーの背景を変更します。

前回サイト全体の背景をフルスクリーンの写真に変えたので、そこに重なっている文字が読みづらくなってしまいました。これでは読者に優しくないので、重なってしまった部分に背景をつけます。

更に、せっかく背景を写真にしたのに完全に白背景で隠したらもったいないよね、ということで、その背景を半透明にして下の写真がうっすら見えるように変えました。

サイドバーに背景を追加し、半透明にする

最初はサイドバーに白い背景を追加します。参考にしたのは下記のブログ。

stingerのカスタマイズ　背景の変更｜ウィンドミル　いわしブログ

こちらの通りに直接テーマのスタイルシートを編集してもできるんですが、最初のに子テーマを作ったのでそちらでの編集をしたいと思います。→子テーマの作り方

子テーマの中のstyle.cssファイルをTerapadで開きます。私はいつも編集するファイルを開くときはFFFTPからデスクトップのTerapadにドラッグ＆ドロップで開いてます。

そうすると、まだ中身は何もいじっていないので下記のコードのみが書いてあると思います。

/*
Theme Name: stinger-child
Template: stinger3ver20131023
*/
@import url(‘../stinger3ver20131023/style.css’);

子テーマでの編集のいいところは、直接ファイルを書き換えずに、この下にどんどん必要なカスタマイズの内容を書き足していくと、それが元のテーマに上書きされて反映されるところです。サイドバーの背景を追加するには、下記のコードをこの下に書き足しました。

#wrap #wrap-in #side {

 float: right;
 width: 336px;
 border: 1px solid #ccc;
 background-color: #FFF;
 border-radius: 4px 4px 4px 4px;
 padding-bottom: 20px;
 padding-top: 10px;
}

これでサイドバーにメインと同じ白い背景が追加されます。私はCSSの知識がほぼ皆無で余白とかを調整するスキルはないので、参照したコードをそのまま貼りましたがうまくいきました（笑）

更にこの背景を半透明にするには下記のコードを追加します。

background: rgba(255,255,255,0.8);

これをbackground-color: #FFF;の下の段に挿入しました。

最後の0.8の数字は透明度の指定なので、もっと透明度を上げる場合は数字を0に近づけ、透明度を下げたい場合は数字を１に近づけます。１が完全な不透明です。

透明度を調整する方法を調べていて、最初はalpha(opacity=透明度);というやり方を見つけてそれでやってみたんですが、こっちだと背景だけでなくその上の文字や画像も透過されてしまうようです。背景だけ透過させたいならbackground: rgbaを使ったらいいと思います。

メインの背景を半透明に

続けて、同じ要領でメインの背景も透過させます。もともとのファイルのコードは

#wrap #wrap-in #main {

 float: left;
 width: 550px;
 padding-right: 39px;
 padding-left: 39px;
 padding-top: 20px;
 border: 1px solid #ccc;
 background-color: #FFF;
 border-radius: 4px 4px 4px 4px;
 padding-bottom: 20px;
}

になっているはずなので、子テーマのCSSには透明度を指定する先ほどのコードを追加するだけでOKです。

#wrap #wrap-in #main {

background: rgba(255,255,255,0.8);
}

これで背景も半透明になりました！下の写真がうまい具合に透けて見えて、いい感じです。

メニューバーに白半透明の背景を追加

最後にメニューバーにも背景を追加します。同じ要領でcssに下記のコードを追加しました。

#navi-in li {
 background-color: #FFF;
 background: rgba(255,255,255,0.5);
 border-radius: 4px 4px 4px 4px;
 padding-bottom: 5px;
}

ちょっと知識がなさすぎて細かいことはわからないんですが（笑）

Cromeの要素を検証からメニューバーの部分を変えるにはどこのCSSをいじればいいか？を調べて、それっぽいところに背景のコードを追加したらできました。

CSSを編集するときに、どこをいじればどこに反映されるのか、いまいちまだわかってないので触りながら勉強していかなければ…。

そんなレベルの超初心者でも、とりあえずカスタマイズはできるので、stingerって本当に素敵なテーマですね。

追記。

背景を半透明にすると、エントリのタイトルの背景だけ白く残ってしまいます。こちらの対処法は、子テーマ内で背景色の指定を削除するだけだとできないようです。

もとのテーマに戻って記事タイトルの背景カラーを削除する、というのが一番シンプルなんですが、私は最初わからなくて、わざわざ子テーマにタイトル背景をrgba(255,255,255,0)みたいに透明度100%にして消してました。

せっかく子テーマを作ったのに元のCSSファイルをいじるのはちょっと癪なのでそのままにしています。

#container #wrap #wrap-in #main .post .entry .entry-content .entry-title-ac {
 background-color: #FFF;
 background: rgba(255,255,255,0);

最新記事のタイトル部分も白く残ってしまうので、こちらもついでに透過させました。

#wrap #wrap-in #main .post .sumbox02 #topnews div dl dd .saisin{
 background-color: #FFF;
 background: rgba(255,255,255,0);
}

ひとまずこれで消えていますが、なんだか余計なコードをいろいろ書いている気もします。クラスとかの指定もよくわからない。スマートじゃないけど仕方が知識不足ですのでとりあえず仕方ないですね…もっと勉強しなくては。

それでは！

この記事が気に入ったら
いいね！しよう

最新情報をお届けします

Twitterで早をフォローしよう！

Follow @sakihaya515

◆noteで日記も書いてます。面白かったらフォローしてね！

　note | 早《saki》

- ブログ運営

Comment

フィリッププレインコピー通販より:

03/06/2017 11:33 AM

段ボールばかりで中身はほとんどわからなかったが、PS3やXbox 360本体の並行品や、ゲームソフトの卸売なども行なわれているようだ。
シュプリームタンクトップコピーより:

02/09/2017 3:14 PM

これはジャケット以外にアウターでもそうなっていて、今の若い奴は風邪ひきそうな薄着で過ごしているような感じなのです。
subcopy より:

10/27/2016 6:16 PM

時計の分解清掃はいくら位しますか。
Stinger3カスタマイズ（マイ）ブーム再燃 | xbeeing - road to Lamborghini - より:

04/30/2014 11:33 PM

[…] STINGER3カスタマイズ記録―メイン、サイドバー、メニューバーの背景を白半透明にする―　これも読み込み時間が重くなりそうだったけど、もう見た目優先ブログということで思い切っ […]
stinger3　備忘録　６より:

04/30/2014 11:20 AM

[…] メイン、サイドバー、メニューバーの背景を白半透明にする […]
【Stinger3】サイドバーに背景を加えた。更に背景を半透明にした | きちデンより:

03/09/2014 7:02 AM

[…] 参考にした記事：STINGER3カスタマイズ記録―メイン、サイドバー、メニューバーの背景を白半透明にする― […]
Stinger3のメニュー、メイン・サイドバーを半透明にしてみました | 大雅写真事務所（StudioTAIGA）より:

02/17/2014 7:09 AM

[…] […]
こーたろより:

01/28/2014 2:41 PM

はじめまして。最近、wordpressを触り始めて
HTML,CSSともにど素人なのですが、最後に追記で
書かれていた、エントリのタイトルの半透明のやり方を
ご存知であれば、教えていただけませんでしょうか？
- こーたろより:
  
  01/28/2014 3:01 PM
  
  すいません。下の記事ですが、自己解決できました。
  - Saki より:
    
    01/30/2014 12:00 AM
    
    解決できたようでよかったです！
    一応追記の部分を詳しく追加してみましたが、私もこの部分は自信がないです…
    いい方法があればぜひ教えてください(^^)
SENSE より:

01/04/2014 6:12 PM

こんばんは。
sakiさんの記事を参考に私もサイトの背景とそしてコンテンツ部分を半透明にさせていただきました。
本当にわかりやすく紹介されていたので、サイトは違えど比較的簡単に変更ができました。

http://xn--cckd6h3fsbw858a9g9a.net/

まだまだ作りたてのサイトではありますが、参考にさせていただきながらサイトのカスタマイズに励みたいと思います。
これからもよろしくお願いいたします。
- Saki より:
  
  01/30/2014 12:05 AM
  
  こんにちは！
  コメント頂きありがとうございます(^^)
  私も本当に初心者なんですが、参考になったのでしたら嬉しいです。
  だんだん背景写真×半透明仲間が増えてきている気がします！笑
STINGER3をカスタマイズ-バックグラウンドを高知県の海に、サイドカラムを白く、さらに半透明により:

01/04/2014 11:44 AM

[…] ＞＞STINGER3カスタマイズ記録―メイン、サイドバー、メニューバーの背景を白半透明にする― […]
主婦ブログより:

01/02/2014 6:17 PM

[…] “STINGER3カスタマイズ記録―メイン、サイドバー、メニューバーの背景を白半透明にする“ […]
stingerのカスタマイズ　背景の変更 | ウィンドミル　いわしブログより:

12/28/2013 2:56 AM

[…] STINGER3カスタマイズ記録―メイン、サイドバー、メニューバーの背景を白半透明にする― […]
geren より:

12/21/2013 4:51 PM

20年前にHTML直打ちでHPを作った事はありましたが、
全くの浦島状態でHP製作に取り掛かりました。
友人が経営する居酒屋のHPを作っているのですが、
wordpress?? css??ってところから始めたので、こちらの記事を参考に作ってたら、何とか友人と打ち合わせできるレベルになって来ました。

半透明にしたらオシャレになったので「私が」誉められました。
ホント助かりました。ありがとうございました。

PS.母子共に無事で元気な赤ちゃんが生まれますように。
- Saki より:
  
  12/22/2013 1:03 AM
  
  ご覧いただきありがとうございます！
  私もまだまだ初心者中の初心者なのですが、お役に立てたのであれば何よりです。
  HP作り大変ですがお互い頑張りましょう。
ここを見ておけば検索不要！Stingerカスタマイズ辞典より:

12/19/2013 11:37 PM

[…] メイン、サイドバー、メニューバーの背景を白半透明にする […]
- Emily より:
  
  08/22/2016 12:43 PM
  
  I had no idea how to approach this beon-erfow I’m locked and loaded.
- compliance in insurance より:
  
  09/23/2016 11:12 PM
  
  I recently came across your article and have been reading along. I want to express my admiration of your writing skill and ability to make readers read from the beginning to the end. I would like to read newer posts and to share my thoughts with you.
ウィンドミル　いわしより:

12/16/2013 4:24 PM

記事の引用ありがとうございます。
私はメインとサイドを白地にしましたが、半透明もなかなかオシャレで良い感じですね。
次からはオイラも半透明にしよっと・・・(^_^)
- 早より:
  
  12/19/2013 7:14 PM
  
  コメントありがとうございます！
  記事参考にさせていただいたおかげで、思っていたカスタマイズか出来ました(^^)