気ままにアクアリウム

*

7.メイン記事欄とサイドバーを半透明(透過)にする。

      2014/06/02 6:41 pm    0

  • メイン記事欄とサイドバーを半透明にし、背景を透かすようにします。
  • 正確に書くと、サイドバーは背景がないので半透明の背景を追加します。(背景画像で文字が見づらくなるのを抑えるため)
  • 本ブログの場合、背景に画像は使用しませんが、アクアの透明感を表現するために設定します。

メイン記事欄とサイドバーを半透明(透過)にする方法

(1)スタイルシート(style.css)に変更、追記する。

メイン記事欄を半透明(透過)にする。

#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;
}

#wrap #wrap-in #main {
        float: left;
        width: 550px;
        padding-right: 39px;
        padding-left: 39px;
        padding-top: 20px;
        border: 1px solid #ccc;
        background-color: rgba(255,255,255,0.5);
        border-radius: 4px 4px 4px 4px;
        padding-bottom: 20px;
}

サイドバーに半透明(透過)の背景を追記する。

#wrap #wrap-in #side {
        float: right;
        width: 336px;
}

 #wrap #wrap-in #side {
        float: right;
        width: 336px;
        background-color: rgba(255,255,255,0.5);
}

記事タイトルの背景を透明にする。

.entry-title-ac {
        font-size: 24px;
        padding: 0px;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        font-weight: bold;
        font-size: 24px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 5px;
        margin-left: 0px;
        background-color: #FFF;
}

.entry-title-ac {
        font-size: 24px;
        padding: 0px;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        font-weight: bold;
        font-size: 24px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 5px;
        margin-left: 0px;
}

関連記事タイトルの背景を透明にする。

#wrap #wrap-in #main .post .sumbox02 #topnews div dl dd .saisin {
        background-color: #FFF;
        margin: 0px;
        padding: 0px;
}

#wrap #wrap-in #main .post .sumbox02 #topnews div dl dd .saisin {
        margin: 0px;
        padding: 0px;
}

※background-color は#RGB指定(#FFF)や直接指定(white)が可能です。好みの色等はRGB関連サイトでご確認ください。

※rgbaの引数は最初から3つがRGBの指定で、0.5は透明度の指定です(少ないほど薄い色になります)。好みの指定をしてください。

rgba(Red,Green,Blue,透明度);となります。

以上です。

 - Stinger3 , , ,

Shares