質問編集履歴

1

該当箇所のhtmlとcssのコードを追記しました

2020/11/02 09:57

投稿

shunsaku87
shunsaku87

スコア39

test CHANGED
File without changes
test CHANGED
@@ -28,7 +28,279 @@
28
28
 
29
29
 
30
30
 
31
- すみません、phpコード等がたくさん入っていますので、ここに書くと長くなってしまうので、デベロッパーツールでコード確認していただけると嬉しいです。
31
+ ```html
32
+
33
+ <p class="mv-catch inner">CELL SMOOTH 60 TRILLION</p>
34
+
35
+ <div class="inner m-top-20 tr sp">
36
+
37
+ <a href="https://airrsv.net/cs60nagoya/calendar" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/btn-calendar_sp.svg" alt="" width="25%"></a>
38
+
39
+ </div>
40
+
41
+
42
+
43
+ <div class="sp indexNews">
44
+
45
+ <div class="inner">
46
+
47
+ <table class="top-news-cat">
48
+
49
+ <tbody>
50
+
51
+ phpコード
52
+
53
+ </tbody>
54
+
55
+ </table>
56
+
57
+ </div>
58
+
59
+ </div>
60
+
61
+
62
+
63
+ <section class="top-blog-link-sec">
64
+
65
+ <div class="inner960">
66
+
67
+ phpコード
68
+
69
+ </div>
70
+
71
+ <div class="tbl-flex-item2">
72
+
73
+ <p class="pc top-blog-contents-cap">ENERGY WELLNESS COLUMN</p>
74
+
75
+ <div class="top-blog-contents">
76
+
77
+ <p class="top-blog-contents-p1">
78
+
79
+ <?php the_time('Y.m.d'); ?>
80
+
81
+ </p>
82
+
83
+ <p class="top-blog-contents-p2">
84
+
85
+ <?php the_title();?>
86
+
87
+ </p>
88
+
89
+ <p class="top-blog-contents-p3">
90
+
91
+ <?php the_excerpt(); ?>
92
+
93
+ </p>
94
+
95
+ <p class="top-blog-contents-arrow">
96
+
97
+ <a href="<?php the_permalink(); ?>">
98
+
99
+ <img src="<?php echo get_template_directory_uri(); ?>/assets/img/top-blog-contents-arrow-8.png" srcset="<?php echo get_template_directory_uri(); ?>/assets/img/top-blog-contents-arrow-8.png 1x,<?php echo get_template_directory_uri(); ?>/assets/img/top-blog-contents-arrow@2x-8.png 2x" alt="矢印">
100
+
101
+ </a>
102
+
103
+ </p>
104
+
105
+ </div>
106
+
107
+ </div>
108
+
109
+ </div>
110
+
111
+ <?php endforeach; ?>
112
+
113
+ <?php wp_reset_postdata(); ?>
114
+
115
+ <div class="top-blog-more-button tc">
116
+
117
+ <button>
118
+
119
+ <a href="<?php echo home_url(); ?>/blog/">
120
+
121
+ <span>記事をもっと見る</span><img src="<?php echo get_template_directory_uri(); ?>/assets/img/top-blog-more-arrow-8.png" srcset="<?php echo get_template_directory_uri(); ?>/assets/img/top-blog-more-arrow-8.png 1x,<?php echo get_template_directory_uri(); ?>/assets/img/top-blog-more-arrow@2x-8.png 2x" alt="">
122
+
123
+ </a>
124
+
125
+ </button>
126
+
127
+ </div>
128
+
129
+ </div>
130
+
131
+ </section>
132
+
133
+ ```
134
+
135
+
136
+
137
+ ```css
138
+
139
+ .top-blog-link{
140
+
141
+ padding:50px 20px;
142
+
143
+ }
144
+
145
+ .tbl-flex-item1{
146
+
147
+ width:454px;
148
+
149
+ /* height:303px; */
150
+
151
+ max-width:100%;
152
+
153
+ }
154
+
155
+ .tbl-flex-item2{
156
+
157
+ width:560px;
158
+
159
+ height:286px;
160
+
161
+ max-width:100%;
162
+
163
+ }
164
+
165
+ .top-blog-img img{
166
+
167
+ box-shadow:10px 5px 10px rgba(0,0,0,0.4);
168
+
169
+ width:100%;
170
+
171
+ /* height:100%; */
172
+
173
+ }
174
+
175
+ .top-blog-contents{
176
+
177
+ padding:40px;
178
+
179
+ box-shadow:10px 5px 10px rgba(0,0,0,0.4);
180
+
181
+ background-color:white;
182
+
183
+ height:230px;
184
+
185
+ }
186
+
187
+ .top-blog-contents-cap{
188
+
189
+ font-family : "Gotham-Rounded-Medium",sans-serif;
190
+
191
+ font-size : 11px;
192
+
193
+ line-height : 11px;
194
+
195
+ letter-spacing : 1.32px;
196
+
197
+ color : #1F8ABC;
198
+
199
+ margin-bottom:30px;
200
+
201
+ padding-left:30px;
202
+
203
+ padding-top:15px;
204
+
205
+ }
206
+
207
+ .top-blog-contents-p1{
208
+
209
+ font-family :"Gotham-Book",sans-serif;
210
+
211
+ font-size : 10px;
212
+
213
+ line-height : 10px;
214
+
215
+ letter-spacing : 4px;
216
+
217
+ color : #808080;
218
+
219
+ margin-bottom:30px;
220
+
221
+ }
222
+
223
+ .top-blog-contents-p2{
224
+
225
+ font-family : "HiraMaru-Std-W6",sans-serif;
226
+
227
+ font-size : 23px;
228
+
229
+ line-height : 31.2px;
230
+
231
+ letter-spacing : 3.07px;
232
+
233
+ font-weight:700;
234
+
235
+ color : #1F85B7;
236
+
237
+ margin-bottom:15px;
238
+
239
+ }
240
+
241
+ .top-blog-contents-p3{
242
+
243
+ font-family : "源ノ角ゴシック-Regular",sans-serif;
244
+
245
+ font-size : 13px;
246
+
247
+ line-height : 21px;
248
+
249
+ letter-spacing : 1.4px;
250
+
251
+ color : #666666;
252
+
253
+ margin-bottom:20px;
254
+
255
+ }
256
+
257
+ .top-blog-contents-arrow{
258
+
259
+ text-align:right;
260
+
261
+ }
262
+
263
+ .top-blog-more-button button a{
264
+
265
+ display:inline-block;
266
+
267
+ font-family : "源ノ角ゴシック-Regular",sans-serif;
268
+
269
+ font-weight : bold;
270
+
271
+ font-size : 13px;
272
+
273
+ line-height : 13px;
274
+
275
+ letter-spacing : 2.08px;
276
+
277
+ color : #666666;
278
+
279
+ border:1px solid #666666;
280
+
281
+ padding:15px 10px 15px 20px;
282
+
283
+ }
284
+
285
+ .top-blog-more-button button a span{
286
+
287
+ display:inline-block;
288
+
289
+ margin-right:20px;
290
+
291
+ }
292
+
293
+ .top-blog-link-sec{
294
+
295
+ background:url(assets/img/top-blog-link-bg@1.5x-8.png) no-repeat center;
296
+
297
+ background-size:cover;
298
+
299
+ }
300
+
301
+ ```
302
+
303
+
32
304
 
33
305
 
34
306