タグ・デザイン掲示板

[

ボックスの中を半透明じゃなく白色にしたい【解決済】
by もも

2016-11-12 11:02
タイトルの通りなのですが、ブログの記事ボックスの中を半透明じゃなく白色にしたくていろいろ挑戦したのですが出来なかったので質問させてください。
多分ですが、.title:after{　のところのborder-right-color: transparent;}このタグが多分邪魔をしているのではないかと思うのですが、削除するとボックスが消えてしまって文字だけ残ってしまうし、他の方法も試してみたのですが上手くいきませんでした。
ちなみに
background: -moz-linear-gradient(left, #fff, #fff 50%, #a2d7dd 50%, #a2d7dd);
background: -webkit-linear-gradient(left, #fff, #fff 50%, #a2d7dd 50%, #a2d7dd);
background: linear-gradient(left, #fff, #fff 50%, #a2d7dd 50%, #a2d7dd);
-moz-background-size: 20px 20px;
-webkit-background-size: 20px 20px;
background-size: 20px 20px;
}
というタグは、背景が欲しくて私が勝手に付け足したタグです。
ちなみに、
border-right-color: transparent;}
というタグをいじると、見出しの方のリボンみたいな風になっているのが四角くなります。
かなりいろいろ試してみたのですが結局うまくいかず…。
どなたかお分かりになる方、いらっしゃいましたらご助言願えませんでしょうか…よろしくお願いいたします。

<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>

<style type="text/css">

@media screen and (min-width: 600px){
.width{
width: 600px;
margin: 0px auto;}

}

body{
background: #fff;
font-family: "Indie Flower","メイリオ";
font-size: 10pt;
color: #7d7d7d;
letter-spacing: 3px;
line-height: 150%;
background: -moz-linear-gradient(left, #fff, #fff 50%, #a2d7dd 50%, #a2d7dd);
background: -webkit-linear-gradient(left, #fff, #fff 50%, #a2d7dd 50%, #a2d7dd);
background: linear-gradient(left, #fff, #fff 50%, #a2d7dd 50%, #a2d7dd);
-moz-background-size: 20px 20px;
-webkit-background-size: 20px 20px;
background-size: 20px 20px;
}

.title{
width: 450px;
position: relative;
z-index:10;
background: #b7282e;
color: #fdeff2;
font-size: 24px;
line-height: 1;
border-radius: 5px;
margin: 30px 0;
padding: 14px 5px 14px 20px;}

.title:after{
content: "";
position: absolute;
width: 0;
height: 0;
top: 0;
right: -26px;
height: 0;
width: 0;
border: 26px solid #b7282e;
border-right-color: transparent;}

.top{
background: #fff;
opacity: 0.8;
border: solid 1px;
border-radius: 5px;
z-index:9;
margin: -57px 10px 0px 20px;
padding: 35px 10px 10px 10px;}

a{
text-decoration: none;
color: #dc143c;

border-radius: 5px;}

a:hover,active{
text-decoration: none;
background: none;
color: #b7282e;}

</style>

pc
[編集]

by と

2016-11-12 13:04
全体レイアウトと記事画面レイアウトもお願いします

pc
[編集]

by もも

2016-11-12 16:42
申し訳ありません、と様。
全体レイアウトと記事レイアウト上げます。
こちらが全体レイアウトです↓
#blog#

記事画面レイアウトというか、そのページは何も書いていませんので、その代わりと言ってはなんですがこちらの一覧画面レイアウトを上げておきます。↓
上部表示テキスト
<div class="width">
一覧部分
<div class="title">#title#</div>
<div class="top">#text#<div style="text-align:right;" align="right">#ext_追記#
<br>
#date# #time#</div></div><br>
下部表示テキスト
<center>#prev_prev_prev# | #next_next_next#<br></center></div>

pc
[編集]

by と

2016-11-13 07:01
失礼しましたリアルタイム形式だったのですね。
.topの中の「opacity: 0.8;」を削除すれば白背景色が透過しなくなりますよ。

pc
[編集]

by もも

2016-11-13 12:03
と様

ありがとうございます！！
教えてくださったとおりにしましたら希望通りになりました！！
お力添え、本当に嬉しく思います。
貴重なお時間を割いてのご尽力、に感謝します。
ありがとうございました！！！

pc
[編集]

[