質問編集履歴
3
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -96,4 +96,10 @@
|
|
|
96
96
|
テストサイト1は グラデーションが かかりますが、
|
|
97
97
|
テストサイト2はグラデーションがかかりません。
|
|
98
98
|
|
|
99
|
-
どうすればテストサイト2もグラデーションがかかるのでしょうか？
|
|
99
|
+
どうすればテストサイト2もグラデーションがかかるのでしょうか？
|
|
100
|
+
|
|
101
|
+
ちなみに ただの文章をいれた投稿だと
|
|
102
|
+
|
|
103
|
+
[リンク内容](https://best-trust.biz/wp24/css%e3%80%80%e7%b6%9a%e3%81%8d%e3%82%92%e8%aa%ad%e3%82%80%e3%80%80%e3%82%b0%e3%83%a9%e3%83%87%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%80%80%e3%83%86%e3%82%b9%e3%83%88/)
|
|
104
|
+
|
|
105
|
+
グラデーションが反映されます。
|
2
読みやすく修正 URL差し替え
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -4,12 +4,14 @@
|
|
|
4
4
|
上記の参考サイトをみて
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
[テストサイト](
|
|
7
|
+
[テストサイト1](https://best-trust.biz/custom/2021/10/15/css-readmore-html/)
|
|
8
8
|
|
|
9
|
-
テストサイト
|
|
9
|
+
[テストサイト2](https://best-trust.biz/wp24/area/)
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
テストサイト1とテストサイト2 に実装しています。
|
|
12
12
|
|
|
13
|
+
下記がテストサイトのソースです。
|
|
14
|
+
|
|
13
15
|
```ここに言語を入力
|
|
14
16
|
<div class="readmore">
|
|
15
17
|
<input id="check1" class="readmore-check" type="checkbox">
|
|
@@ -20,6 +22,7 @@
|
|
|
20
22
|
</div>
|
|
21
23
|
```
|
|
22
24
|
```ここに言語を入力
|
|
25
|
+
/*CSS 続きを読むを隠す ここから*/
|
|
23
26
|
.readmore{
|
|
24
27
|
position: relative;
|
|
25
28
|
box-sizing: border-box;
|
|
@@ -34,7 +37,7 @@
|
|
|
34
37
|
overflow: hidden;
|
|
35
38
|
/*以下お好み*/
|
|
36
39
|
/*高さの初期値*/
|
|
37
|
-
height:
|
|
40
|
+
height: 840px;
|
|
38
41
|
}
|
|
39
42
|
.readmore-content::before {
|
|
40
43
|
display: block;
|
|
@@ -61,92 +64,6 @@
|
|
|
61
64
|
margin: 0 auto;
|
|
62
65
|
z-index: 2;
|
|
63
66
|
padding: 0 10px;
|
|
64
|
-
background-color: #ff7777;
|
|
65
|
-
border-radius: 10px;
|
|
66
|
-
color: #FFF;
|
|
67
|
-
}
|
|
68
|
-
.readmore-label:before{
|
|
69
|
-
content: '続きを読む';
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.readmore-check{
|
|
73
|
-
display: none;
|
|
74
|
-
}
|
|
75
|
-
/*チェック時にボタンを非表示*/
|
|
76
|
-
.readmore-check:checked ~ .readmore-label{
|
|
77
|
-
position: static;
|
|
78
|
-
transform: translateX(0);
|
|
79
|
-
-webkit-transform: translateX(0);
|
|
80
|
-
/* 「続きを読む」を押した後、元に戻す必要がない場合は、上のオプションを消してこの1行だけにする */
|
|
81
|
-
/* display: none; */
|
|
82
|
-
}
|
|
83
|
-
.readmore-check:checked ~ .readmore-label:before{
|
|
84
|
-
content: '閉じる';
|
|
85
|
-
}
|
|
86
|
-
/*チェック時に高さを自動に戻す*/
|
|
87
|
-
.readmore-check:checked ~ .readmore-content{
|
|
88
|
-
height: auto;
|
|
89
|
-
}
|
|
90
|
-
/*チェック時グラデーション等を削除*/
|
|
91
|
-
.readmore-check:checked ~ .readmore-content::before {
|
|
92
|
-
display: none;
|
|
93
|
-
}
|
|
94
|
-
```
|
|
95
|
-
参考サイトのサンプルではグラデーションがかかっているのに、テストサイトに入れたものには
|
|
96
|
-
グラデーションがかかりません。
|
|
97
|
-
|
|
98
|
-
どうすればグラデーションがかかるようになるのでしょうか？
|
|
99
|
-
|
|
100
|
-
下記がテストサイトにいれたCSSソースです。
|
|
101
|
-
|
|
102
|
-
```ここに言語を入力
|
|
103
|
-
/* CSS 続きを読む **/
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
.readmore{
|
|
109
|
-
position: relative;
|
|
110
|
-
box-sizing: border-box;
|
|
111
|
-
/*以下お好み*/
|
|
112
|
-
/* ボーダーを付ける場合 */
|
|
113
|
-
/* padding: 10px;
|
|
114
|
-
border: 1px solid #CCC; */
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
.readmore-content{
|
|
118
|
-
position: relative;
|
|
119
|
-
overflow: hidden;
|
|
120
|
-
/*以下お好み*/
|
|
121
|
-
/*高さの初期値*/
|
|
122
|
-
height: 840px;
|
|
123
|
-
}
|
|
124
|
-
.readmore-content::before {
|
|
125
|
-
display: block;
|
|
126
|
-
position: absolute;
|
|
127
|
-
bottom: 0;
|
|
128
|
-
left: 0;
|
|
129
|
-
width: 100%;
|
|
130
|
-
content: "";
|
|
131
|
-
/*以下お好み グラデーションの色と高さ 高さはreadmoreのheight以下にすること*/
|
|
132
|
-
height: 50px;
|
|
133
|
-
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);
|
|
134
|
-
background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);
|
|
135
|
-
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
/* 続きを読むボタン */
|
|
139
|
-
.readmore-label{
|
|
140
|
-
display: table;
|
|
141
|
-
bottom: 5px;
|
|
142
|
-
position: absolute;
|
|
143
|
-
bottom: 5px;
|
|
144
|
-
left: 50%;
|
|
145
|
-
transform: translateX(-50%);
|
|
146
|
-
-webkit-transform: translateX(-50%);
|
|
147
|
-
margin: 0 auto;
|
|
148
|
-
z-index: 2;
|
|
149
|
-
padding: 0 10px;
|
|
150
67
|
background-color: #172d81;
|
|
151
68
|
border-radius: 10px;
|
|
152
69
|
color: #FFF;
|
|
@@ -160,9 +77,9 @@
|
|
|
160
77
|
}
|
|
161
78
|
/*チェック時にボタンを非表示*/
|
|
162
79
|
.readmore-check:checked ~ p .readmore-label{
|
|
80
|
+
/* 「続きを読む」を押した後、元に戻す必要がない場合は、上のオプションを消してこの1行だけにする */
|
|
163
|
-
|
|
81
|
+
display: none;
|
|
164
82
|
}
|
|
165
|
-
|
|
166
83
|
.readmore-check:checked ~ .readmore-label:before{
|
|
167
84
|
content: '閉じる';
|
|
168
85
|
}
|
|
@@ -174,6 +91,9 @@
|
|
|
174
91
|
.readmore-check:checked ~ .readmore-content::before {
|
|
175
92
|
display: none;
|
|
176
93
|
}
|
|
94
|
+
/*CSS 続きを読むを隠す ここまで*/
|
|
95
|
+
```
|
|
96
|
+
テストサイト1は グラデーションが かかりますが、
|
|
97
|
+
テストサイト2はグラデーションがかかりません。
|
|
177
98
|
|
|
178
|
-
|
|
99
|
+
どうすればテストサイト2もグラデーションがかかるのでしょうか？
|
|
179
|
-
```
|
1
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
上記の参考サイトをみて
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
[テストサイト](http://tktktktjp.wp.xdomain.jp/css
|
|
7
|
+
[テストサイト](http://tktktktjp.wp.xdomain.jp/css-only-read-more/)
|
|
8
8
|
|
|
9
9
|
テストサイトに実装しています。
|
|
10
10
|
|