teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問cssのみで「続きを読む（もっと見る）のCSS　でグラデーションがかからない。

編集履歴

質問編集履歴

3

追記

2021/10/15 09:44

投稿

niconic73027793
niconic73027793

スコア215

test CHANGED
File without changes
test CHANGED
@@ -195,3 +195,15 @@
195
195
 
196
196
 
197
197
  どうすればテストサイト2もグラデーションがかかるのでしょうか？
198
+
199
+
200
+
201
+ ちなみに　ただの文章をいれた投稿だと
202
+
203
+
204
+
205
+ [リンク内容](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/)
206
+
207
+
208
+
209
+ グラデーションが反映されます。

2

読みやすく修正　URL差し替え

2021/10/15 09:44

投稿

niconic73027793
niconic73027793

スコア215

test CHANGED
File without changes
test CHANGED
@@ -10,15 +10,19 @@
10
10
 
11
11
 
12
12
 
13
- [テストサイト](http://tktktktjp.wp.xdomain.jp/css-only-read-more/)
13
+ [テストサイト1](https://best-trust.biz/custom/2021/10/15/css-readmore-html/)
14
14
 
15
15
 
16
16
 
17
- テストサイトに実装しています。
17
+ [テストサイト2](https://best-trust.biz/wp24/area/)
18
18
 
19
19
 
20
20
 
21
+ テストサイト1とテストサイト2　に実装しています。
22
+
23
+
24
+
21
- 下記が参考のソースです。
25
+ 下記がテストサイトのソースです。
22
26
 
23
27
 
24
28
 
@@ -42,6 +46,8 @@
42
46
 
43
47
  ```ここに言語を入力
44
48
 
49
+ /*CSS 続きを読むを隠す　ここから*/
50
+
45
51
  .readmore{
46
52
 
47
53
  position: relative;
@@ -55,176 +61,6 @@
55
61
  padding: 10px;
56
62
 
57
63
  border: 1px solid #CCC;
58
-
59
- }
60
-
61
-
62
-
63
- .readmore-content{
64
-
65
- position: relative;
66
-
67
- overflow: hidden;
68
-
69
- /*以下お好み*/
70
-
71
- /*高さの初期値*/
72
-
73
- height: 100px;
74
-
75
- }
76
-
77
- .readmore-content::before {
78
-
79
- display: block;
80
-
81
- position: absolute;
82
-
83
- bottom: 0;
84
-
85
- left: 0;
86
-
87
- width: 100%;
88
-
89
- content: "";
90
-
91
- /*以下お好み グラデーションの色と高さ 高さはreadmoreのheight以下にすること*/
92
-
93
- height: 50px;
94
-
95
- 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%);
96
-
97
- 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%);
98
-
99
- }
100
-
101
-
102
-
103
- /* 続きを読むボタン */
104
-
105
- .readmore-label{
106
-
107
- display: table;
108
-
109
- bottom: 5px;
110
-
111
- position: absolute;
112
-
113
- bottom: 5px;
114
-
115
- left: 50%;
116
-
117
- transform: translateX(-50%);
118
-
119
- -webkit-transform: translateX(-50%);
120
-
121
- margin: 0 auto;
122
-
123
- z-index: 2;
124
-
125
- padding: 0 10px;
126
-
127
- background-color: #ff7777;
128
-
129
- border-radius: 10px;
130
-
131
- color: #FFF;
132
-
133
- }
134
-
135
- .readmore-label:before{
136
-
137
- content: '続きを読む';
138
-
139
- }
140
-
141
-
142
-
143
- .readmore-check{
144
-
145
- display: none;
146
-
147
- }
148
-
149
- /*チェック時にボタンを非表示*/
150
-
151
- .readmore-check:checked ~ .readmore-label{
152
-
153
- position: static;
154
-
155
- transform: translateX(0);
156
-
157
- -webkit-transform: translateX(0);
158
-
159
- /* 「続きを読む」を押した後、元に戻す必要がない場合は、上のオプションを消してこの1行だけにする */
160
-
161
- /* display: none; */
162
-
163
- }
164
-
165
- .readmore-check:checked ~ .readmore-label:before{
166
-
167
- content: '閉じる';
168
-
169
- }
170
-
171
- /*チェック時に高さを自動に戻す*/
172
-
173
- .readmore-check:checked ~ .readmore-content{
174
-
175
- height: auto;
176
-
177
- }
178
-
179
- /*チェック時グラデーション等を削除*/
180
-
181
- .readmore-check:checked ~ .readmore-content::before {
182
-
183
- display: none;
184
-
185
- }
186
-
187
- ```
188
-
189
- 参考サイトのサンプルではグラデーションがかかっているのに、テストサイトに入れたものには
190
-
191
- グラデーションがかかりません。
192
-
193
-
194
-
195
- どうすればグラデーションがかかるようになるのでしょうか？
196
-
197
-
198
-
199
- 下記がテストサイトにいれたCSSソースです。
200
-
201
-
202
-
203
- ```ここに言語を入力
204
-
205
- /* CSS 続きを読む　**/
206
-
207
-
208
-
209
-
210
-
211
-
212
-
213
-
214
-
215
- .readmore{
216
-
217
- position: relative;
218
-
219
- box-sizing: border-box;
220
-
221
- /*以下お好み*/
222
-
223
- /* ボーダーを付ける場合 */
224
-
225
- /* padding: 10px;
226
-
227
- border: 1px solid #CCC; */
228
64
 
229
65
  }
230
66
 
@@ -260,13 +96,11 @@
260
96
 
261
97
  /*以下お好み グラデーションの色と高さ 高さはreadmoreのheight以下にすること*/
262
98
 
263
-    height: 50px;
99
+ height: 50px;
264
100
 
265
101
  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%);
266
102
 
267
103
  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%);
268
-
269
-
270
104
 
271
105
  }
272
106
 
@@ -322,11 +156,11 @@
322
156
 
323
157
  .readmore-check:checked ~ p .readmore-label{
324
158
 
159
+ /* 「続きを読む」を押した後、元に戻す必要がない場合は、上のオプションを消してこの1行だけにする */
160
+
325
- display: none;
161
+ display: none;
326
162
 
327
163
  }
328
-
329
-
330
164
 
331
165
  .readmore-check:checked ~ .readmore-label:before{
332
166
 
@@ -350,8 +184,14 @@
350
184
 
351
185
  }
352
186
 
187
+ /*CSS 続きを読むを隠す　ここまで*/
188
+
189
+ ```
190
+
191
+ テストサイト1は　グラデーションが　かかりますが、
192
+
193
+ テストサイト2はグラデーションがかかりません。
353
194
 
354
195
 
355
- /* CSS 続きを読む ここまで　**/
356
196
 
357
- ```
197
+ どうすればテストサイト2もグラデーションがかかるのでしょうか？

1

修正

2021/10/15 09:38

投稿

niconic73027793
niconic73027793

スコア215

test CHANGED
File without changes
test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
 
12
12
 
13
- [テストサイト](http://tktktktjp.wp.xdomain.jp/css%e3%81%ae%e3%81%bf%e3%81%a7%e3%80%8c%e7%b6%9a%e3%81%8d%e3%82%92%e8%aa%ad%e3%82%80%ef%bc%88%e3%82%82%e3%81%a3%e3%81%a8%e8%a6%8b%e3%82%8b%ef%bc%89%e3%80%8d%e3%82%92%e5%ae%9f%e8%a3%85/)
13
+ [テストサイト](http://tktktktjp.wp.xdomain.jp/css-only-read-more/)
14
14
 
15
15
 
16
16