メインカラムとサイドバーの透過方法について

Simplicityの特徴 フォーラム Simplicityについての質問 メインカラムとサイドバーの透過方法について

  • このトピックには3件の返信、2人の参加者があり、最後にめぐみにより11年前に更新されました。
3件の返信スレッドを表示中
  • 投稿者
    投稿
    • #26759
      めぐみ
      ゲスト

      わいひら様

      お世話になります。

      【WordPressに背景画像を設定して固定表示にする方法】
      http://wp-simplicity.com/background-no-repeat/

      上記の記事内に
      >>※メインカラムとサイドバーは、透明度を指定して透かしてあります。
      とございますが、どうような方法で実現できるものでしょうか?

      cssで”background: rgba(255,255,255,0.7)”などを加えるのだとして
      それはどこになりますでしょうか?

      お手数おかけいたしますが
      ご回答のほどよろしくお願い致します。

    • #26766
      hidekichi
      ゲスト
      #main{
        background-color:#fff;
      }

      これが色情報なので質問にあるようにrgbaでaのアルファ値を設定すればメインの背景は透けます。しかしもっと全体的に(文字やらも含めて)透かせたいのであれば、

      #main {
        //何かしらのプロパティ
        opacity: 0.8;
      }

      とかでしょうか。opacityは1で非透過、0で透過です。同様に、#sidebarも透けさせられるので、子テーマあたりに、

      #main, #sidebar {
        opacity: 0.5;
      }

      とかにするとよりわかるかも知れません。問題点があるとすればIEとかの古いやつやら、opacityをサポートしてないブラウザに対しては効きません。

      全体的なブラウザに対応させようとすると、

      #main, #sidebar {
        opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */
        filter: alpha(opacity=75); /* IE lt 8 */
        -ms-filter: "alpha(opacity=75)"; /* IE 8 */
        -khtml-opacity: .75; /* Safari 1.x */
        -moz-opacity: .75; /* FF lt 1.5, Netscape */
      }

      こうする必要があると思いますが、IEは既に、新しいブラウザ(edge: 旧呼称spartan)をマイクロソフトがリリースする予定なのでもうサポートしなくていいんじゃないかと思ったりもします。
      firefoxもopacityは効きますし、書くとすればスマホ向けの設定でも書いておけばよいのではと思ったりも。まぁスマホも最近のはたいてい問題ないですけどね。

      半透明にしないとデザインが損なわれるという場合を除いて、opacityだけで良いと僕は思います。

      ちなみに、わいひらさんがどうやったのか、その方法はわかりません(笑)が、まぁ同じようなことができると思います。

    • #26770
      アバター画像わいひら
      キーマスター

      僕も、opacityで指定しました。手軽なので。

    • #26789
      めぐみ
      ゲスト

      >hidekichi様

      希望通りの設定ができました。
      ご提案の通り、IEについてはスルーします。

      とても詳しいご説明ありがとうございました!

      >わいひら様
      素晴らしいテーマのご提供ありがとうございます。
      引き続き利用させていただきます!

3件の返信スレッドを表示中
  • トピック「メインカラムとサイドバーの透過方法について」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)