さきはやすみます

やすみたいが口癖

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

      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に近づけ、透明度を下げたい場合は数字を1に近づけます。1が完全な不透明です。

透明度を調整する方法を調べていて、最初は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で早をフォローしよう!

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

 note | 早《saki》

 - ブログ運営

ad

ad

Comment

  1. 段ボールばかりで中身はほとんどわからなかったが、PS3やXbox 360本体の並行品や、ゲームソフトの卸売なども行なわれているようだ。

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

  3. subcopy より:

    時計の分解清掃はいくら位しますか。

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

  5. […] メイン、サイドバー、メニューバーの背景を白半透明にする […]

  6. […] 参考にした記事:STINGER3カスタマイズ記録―メイン、サイドバー、メニューバーの背景を白半透明にする― […]

  7. こーたろ より:

    はじめまして。最近、wordpressを触り始めて
    HTML,CSSともにど素人なのですが、最後に追記で
    書かれていた、エントリのタイトルの半透明のやり方を
    ご存知であれば、教えていただけませんでしょうか?

    • こーたろ より:

      すいません。下の記事ですが、自己解決できました。

      • Saki より:

        解決できたようでよかったです!
        一応追記の部分を詳しく追加してみましたが、私もこの部分は自信がないです…
        いい方法があればぜひ教えてください(^^)

  8. SENSE より:

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

    http://xn--cckd6h3fsbw858a9g9a.net/

    まだまだ作りたてのサイトではありますが、参考にさせていただきながらサイトのカスタマイズに励みたいと思います。
    これからもよろしくお願いいたします。

    • Saki より:

      こんにちは!
      コメント頂きありがとうございます(^^)
      私も本当に初心者なんですが、参考になったのでしたら嬉しいです。
      だんだん背景写真×半透明仲間が増えてきている気がします!笑

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

  10. 主婦ブログ より:

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

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

  12. geren より:

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

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

    PS.母子共に無事で元気な赤ちゃんが生まれますように。

    • Saki より:

      ご覧いただきありがとうございます!
      私もまだまだ初心者中の初心者なのですが、お役に立てたのであれば何よりです。
      HP作り大変ですがお互い頑張りましょう。

  13. […] メイン、サイドバー、メニューバーの背景を白半透明にする […]

    • Emily より:

      I had no idea how to approach this beon-erfow I’m locked and loaded.

    • 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.

  14. 記事の引用ありがとうございます。
    私はメインとサイドを白地にしましたが、半透明もなかなかオシャレで良い感じですね。
    次からはオイラも半透明にしよっと・・・(^_^)

    • より:

      コメントありがとうございます!
      記事参考にさせていただいたおかげで、思っていたカスタマイズか出来ました(^^)

  関連記事

Stinger3カスタマイズ記録―ブログタイトルを画像に変更―

こんにちは。 久しぶりにカスタマイズメモを更新したいと思います! ここしばらく本 …

Stinger3カスタマイズ記録―Background Managerで背景をフルスクリーン写真にする―

こんにちは。先日のエントリーが、このブログの使用テーマSTINGER3開発者、E …

さきはやすみます。っていうブログになりました。

すっごく久しぶりにブログを触りました。 あまりにも触らなすぎてあれこれ忘れている …

やらないと絶対損!言葉が主戦場でないクリエイターが、言葉を使えると強い。

最近ブログが楽しいです。 もともと文章を書くのが特別得意とか、好きとか言うわけで …

Stinger3カスタマイズ記録―子テーマを作成するには?―

前回は、ざっとデザイン変更でやったことを一覧で書きました。 羅列するといろいろあ …

WordPressテーマをSTINGER3 Ladysに変えてみたよ

いままでテーマはSTINGER3をカスタマイズして使っていたのですが、限定公開の …

電球のイメージ
WordPressテーマ「Stinger3」をおしゃれにカスタマイズする!

  ※こちらの記事は以前stingerをカスタマイズしたテーマを使用し …

Contact Form 7が急にエラーになった!解決方法は超簡単なことでした…

最近noteの方が楽しくてこちらはちょっとご無沙汰でした。早です。 先日、仕事の …