teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問特定の記事カードで新着記事を出したい

編集履歴

質問編集履歴

2

悩み・要望点の具体化

2020/11/19 14:29

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -18,6 +18,4 @@
18
18
 
19
19
 
20
20
 
21
-
22
-
23
- https://codepen.io/pen/?__cf_chl_jschl_tk__=a17b0822dad4a4b8129445bb39977ca155472134-1605795791-0-Aaivrdk2mUGdEjmL3B_cJqscvfSMKalkKPKZwtmW85v605I4_12VLaaq_e5ewXX1o2GBMVwWF8-ow51urIkqU9oCFHUlnrOxLTZuU-6yrdS-B_EYKtvYbZSQ0VlC1onIwVWrIrUvoyn5IkzKAxa62FqUzxcNVR5bPOCe2HfEdHBiH8gnMNS1hDnRgLTy9RL2DP2Gj8eM6Uss303YofaBSscYNwCBVZYg2SUo8BLGIStA_iqu3n0a0AoOmb0QKgUku9fpMUoB6Gi-N9qG5rMNs4RPtY4ljq12C--zxO8Zk9tl4ih0qFkmyzrTNSdnsA30ijCrfxPuEnRtPLSCScv2nwsxpfAMbeNCOK6rtGKzJtcQac4e-BLP500aN5E1x_mnkA
21
+ https://codepen.io/jcqvayeu/pen/bGeyReM?__cf_chl_jschl_tk__=a17b0822dad4a4b8129445bb39977ca155472134-1605795791-0-Aaivrdk2mUGdEjmL3B_cJqscvfSMKalkKPKZwtmW85v605I4_12VLaaq_e5ewXX1o2GBMVwWF8-ow51urIkqU9oCFHUlnrOxLTZuU-6yrdS-B_EYKtvYbZSQ0VlC1onIwVWrIrUvoyn5IkzKAxa62FqUzxcNVR5bPOCe2HfEdHBiH8gnMNS1hDnRgLTy9RL2DP2Gj8eM6Uss303YofaBSscYNwCBVZYg2SUo8BLGIStA_iqu3n0a0AoOmb0QKgUku9fpMUoB6Gi-N9qG5rMNs4RPtY4ljq12C--zxO8Zk9tl4ih0qFkmyzrTNSdnsA30ijCrfxPuEnRtPLSCScv2nwsxpfAMbeNCOK6rtGKzJtcQac4e-BLP500aN5E1x_mnkA

1

悩み・要望点の具体化

2020/11/19 14:29

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- (wordpress)新着記事の出し方
1
+ 特定の記事カードで新着記事を出したい
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- 下記の記事カードデザイン（下記コード参照）を使用して、カテゴリID２０（cat-20）の新着記事を4つ表示させるようなカスタマイズをしたいです。
5
+ 下記linkのコードによる記事カードデザイン（下記コード参照）を使用して、カテゴリID２０（cat-20）の新着記事を4つ表示させるようなカスタマイズをしたいです。
6
6
 
7
7
  また、二つのカードデザイン（card、card2）がございますが、それぞれを交互に表示させるイメージです。
8
8
 
@@ -20,328 +20,4 @@
20
20
 
21
21
 
22
22
 
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
- ```CSS
52
-
53
- .clcontainer{width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}
54
-
55
-
56
-
57
- .clcontainer .clcard{position:relative;width:500px;height:200px;background-color:#fff;overflow:hidden;margin-bottom:4px}
58
-
59
-
60
-
61
- .clcontainer .clcard:before{content:"";z-index:99;position:absolute;top:-10px;left:32px;display:block;width:16px;height:16px;border-radius:16px;background-color:#e6e5e1}
62
-
63
-
64
-
65
- .clcontainer .clcard:after{content:"";z-index:99;position:absolute;bottom:-10px;left:32px;display:block;width:16px;height:16px;border-radius:16px;background-color:#e6e5e1}
66
-
67
-
68
-
69
- .clcontainer .clcard ul{z-index:99;position:absolute;left:39px;top:5px;list-style-type:none}
70
-
71
-
72
-
73
- .clcontainer .clcard ul li{width:2px;height:2px;border-radius:2px;margin:6px 0;background-color:#e6e5e1}
74
-
75
-
76
-
77
- .clcontainer .clcard h62{z-index:99;font-family:"Poppins", sans-serif;position:absolute;bottom:0;right:130px;font-size:60px;font-weight:700;color:#fff}
78
-
79
-
80
-
81
- .clcontainer .clcard .fa-arrow-right{z-index:100;position:absolute;right:75px;bottom:25px;font-size:40px;cursor:pointer}
82
-
83
-
84
-
85
- .clcontainer .clcard clp{z-index:99;position:absolute;top:20px;right:70px;color:#333;opacity:0.7;font-size:12px;letter-spacing:1px;writing-mode:vertical-lr;-webkit-transition:all 0.2s ease;transition:all 0.2s ease}
86
-
87
-
88
-
89
- .clcontainer .clcard .pic{z-index:100;width:400px;height:200px;background-image:url("https://images.unsplash.com/photo-1525543907410-b2562b6796d6?ixlib=rb-0.3.5&s=9ff8e5e718a6a40cbd0e1471235912f4&auto=format&fit=crop&w=3452&q=80");background-size:100% 100%;filter:grayscale(100%)}
90
-
91
-
92
-
93
- .clcontainer .clcard .social{position:absolute;left:60px;top:0;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:180px;height:64px;border-radius:80px}
94
-
95
-
96
-
97
- .clcontainer .clcard .social i:nth-of-type(1){-webkit-transition-delay:0.4s;transition-delay:0.4s}.clcontainer .clcard .social i:nth-of-type(2){-webkit-transition-delay:0.3s;transition-delay:0.3s}.clcontainer .clcard .social i:nth-of-type(3){-webkit-transition-delay:0.2s;transition-delay:0.2s}.clcontainer .clcard .social i:nth-of-type(4){-webkit-transition-delay:0.1s;transition-delay:0.1s}.clcontainer .clcard:hover i{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
98
-
99
-
100
-
101
- .clcontainer .clcard button{position:absolute;right:14px;bottom:14px;width:30px;height:30px;background-color:#da4d1d;border:none;border-radius:30px;cursor:pointer;outline:none;transition:all 0.3s ease;mix-blend-mode:hard-light}
102
-
103
-
104
-
105
- .clcontainer .clcard button i{font-size:3rem}
106
-
107
-
108
-
109
- .clcontainer .clcard:hover button{transform:scale(16.5)}
110
-
111
-
112
-
113
- .clcontainer .clcard:hover p{color:#fff}
114
-
115
-
116
-
117
- .clcontainer .clcard:hover .pic{filter:grayscale(0)}
118
-
119
-
120
-
121
- .clcontainer .clcard2 .pic{background-image:url("https://images.unsplash.com/photo-1528785198459-ec50485704c7?ixlib=rb-0.3.5&s=3a2fc3039516555bbb2e9cd2967bd321&auto=format&fit=crop&w=1537&q=80")}
122
-
123
-
124
-
125
- .clcontainer .clcard2 button{background-color:#2b26c3}.dr{position:absolute;bottom:16px;right:16px;width:100px}
126
-
127
-
128
-
129
- ```HTML
130
-
131
- <div class="clcard">
132
-
133
- <h62>North</h62>
134
-
135
- <i class="fas fa-arrow-right"></i>
136
-
137
- <clp>a lonely trip.</clp>
138
-
139
- <div class="pic"></div>
140
-
141
- <ul>
142
-
143
- <li></li>
144
-
145
- <li></li>
146
-
147
- <li></li>
148
-
149
- <li></li>
150
-
151
- <li></li>
152
-
153
- <li></li>
154
-
155
- <li></li>
156
-
157
- <li></li>
158
-
159
- <li></li>
160
-
161
- <li></li>
162
-
163
- <li></li>
164
-
165
- <li></li>
166
-
167
- <li></li>
168
-
169
- <li></li>
170
-
171
- <li></li>
172
-
173
- <li></li>
174
-
175
- <li></li>
176
-
177
- <li></li>
178
-
179
- <li></li>
180
-
181
- <li></li>
182
-
183
- <li></li>
184
-
185
- <li></li>
186
-
187
- <li></li>
188
-
189
- </ul>
190
-
191
- <div class="social">
192
-
193
- <i class="fab fa-facebook-f"></i>
194
-
195
- <i class="fab fa-twitter"></i>
196
-
197
- <i class="fab fa-instagram"></i>
198
-
199
- <i class="fab fa-github"></i>
200
-
201
- </div>
202
-
203
- <button>
204
-
205
- </button>
206
-
207
- </div>
208
-
209
- <div class="clcard clcard2">
210
-
211
- <title>Vauxhall</title>
212
-
213
- <i class="fas fa-arrow-right"></i>
214
-
215
- <clp>a lonely trip.</clp>
216
-
217
- <div class="pic"></div>
218
-
219
- <ul>
220
-
221
- <li></li>
222
-
223
- <li></li>
224
-
225
- <li></li>
226
-
227
- <li></li>
228
-
229
- <li></li>
230
-
231
- <li></li>
232
-
233
- <li></li>
234
-
235
- <li></li>
236
-
237
- <li></li>
238
-
239
- <li></li>
240
-
241
- <li></li>
242
-
243
- <li></li>
244
-
245
- <li></li>
246
-
247
- <li></li>
248
-
249
- <li></li>
250
-
251
- <li></li>
252
-
253
- <li></li>
254
-
255
- <li></li>
256
-
257
- <li></li>
258
-
259
- <li></li>
260
-
261
- <li></li>
262
-
263
- <li></li>
264
-
265
- <li></li>
266
-
267
- </ul>
268
-
269
- <div class="social">
270
-
271
- <i class="fab fa-facebook-f"></i>
272
-
273
- <i class="fab fa-twitter"></i>
274
-
275
- <i class="fab fa-instagram"></i>
276
-
277
- <i class="fab fa-github"></i>
278
-
279
- </div>
280
-
281
- <button>
282
-
283
- </button>
284
-
285
- </div>
286
-
287
- </div>
288
-
289
-
290
-
291
- <a href="https://dribbble.com/YancyMin" class="dr-url" target="_blank"><img class="dr" src="https://cdn.dribbble.com/assets/logo-footer-hd-a05db77841b4b27c0bf23ec1378e97c988190dfe7d26e32e1faea7269f9e001b.png" alt=""></a>
292
-
293
-
294
-
295
-
296
-
297
-
298
-
299
- ### 前提・実現したいこと
300
-
301
-
302
-
303
- ここに質問の内容を詳しく書いてください。
304
-
305
- （例）PHP(CakePHP)で●●なシステムを作っています。
306
-
307
- ■■な機能を実装中に以下のエラーメッセージが発生しました。
308
-
309
-
310
-
311
- ### 発生している問題・エラーメッセージ
312
-
313
-
314
-
315
- ```
316
-
317
- エラーメッセージ
318
-
319
- ```
320
-
321
-
322
-
323
- ### 該当のソースコード
324
-
325
-
326
-
327
- ```ここに言語名を入力
328
-
329
- ソースコード
330
-
331
- ```
332
-
333
-
334
-
335
- ### 試したこと
336
-
337
-
338
-
339
- ここに問題に対して試したことを記載してください。
340
-
341
-
342
-
343
- ### 補足情報（FW/ツールのバージョンなど）
344
-
345
-
346
-
347
- ここにより詳細な情報を記載してください。
23
+ https://codepen.io/pen/?__cf_chl_jschl_tk__=a17b0822dad4a4b8129445bb39977ca155472134-1605795791-0-Aaivrdk2mUGdEjmL3B_cJqscvfSMKalkKPKZwtmW85v605I4_12VLaaq_e5ewXX1o2GBMVwWF8-ow51urIkqU9oCFHUlnrOxLTZuU-6yrdS-B_EYKtvYbZSQ0VlC1onIwVWrIrUvoyn5IkzKAxa62FqUzxcNVR5bPOCe2HfEdHBiH8gnMNS1hDnRgLTy9RL2DP2Gj8eM6Uss303YofaBSscYNwCBVZYg2SUo8BLGIStA_iqu3n0a0AoOmb0QKgUku9fpMUoB6Gi-N9qG5rMNs4RPtY4ljq12C--zxO8Zk9tl4ih0qFkmyzrTNSdnsA30ijCrfxPuEnRtPLSCScv2nwsxpfAMbeNCOK6rtGKzJtcQac4e-BLP500aN5E1x_mnkA