teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問WordPressで画像が枠からはみ出る

編集履歴

質問編集履歴

2

htmlとcssの追加

2021/05/05 01:33

投稿

seakai
seakai

スコア24

test CHANGED
File without changes
test CHANGED
@@ -16,271 +16,567 @@
16
16
 
17
17
 
18
18
 
19
+ コードが見にくかったら申し訳ありません。
20
+
21
+
22
+
19
23
 
20
24
 
21
25
  ### 該当のソースコード
22
26
 
23
27
 
24
28
 
25
- ```php
29
+ ```html
26
30
 
27
31
  <section class="blog">
28
32
 
29
- <h3 class="blog_title">ブログ</h3>
33
+ 　　<h3 class="blog_title">ブログ</h3>
30
-
34
+
31
- <div class="blog_articles">
35
+ 　　<div class="blog_articles">
32
-
33
- <?php if (have_posts()) : ?>
36
+
34
-
35
- <?php while (have_posts()) : the_post(); ?>
36
-
37
- <article id="post-<?php the_ID(); ?>" <?php post_class('blog_article') ?>>
37
+ 　　<article id="post-1241" class="blog_article post-1241 post type-post status-publish format-standard sticky hentry category-53 tag-template tag-sticky">
38
-
38
+
39
- <figure class="blog_article-img-box"><img src="<?php the_permalink(); ?>">
39
+ 　　<figure class="blog_article-img-box">
40
-
41
- <?php if (has_post_thumbnail()) : ?>
40
+
42
-
43
- <?php the_post_thumbnail('medium'); ?>
41
+ 　　　　　　　　　<img src="http://engress.local/template-sticky/">
44
-
45
- <?php else : ?>
42
+
46
-
47
- <img src="<?php echo get_template_directory_uri(); ?>/img/sample01.svg">
43
+ 　　<img src="http://engress.local/wp-content/themes/heighter/img/sample01.svg">
48
-
49
- <?php endif; ?>
44
+
50
-
51
- <small class="blog_category">カテゴリー</small>
45
+ <small class="blog_category">カテゴリー</small>
52
-
46
+
53
- </figure>
47
+ </figure>
54
-
48
+
55
- <div class="blog_article-text-box">
49
+ <div class="blog_article-text-box">
56
-
50
+
57
- <p class="blog_article-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
51
+ 　　<p class="blog_article-title"><a href="http://engress.local/template-sticky/">テンプレート: 先頭固定表示</a></p>
58
-
52
+
59
- <time class="blog_article-date" datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y-m-d'); ?></time>
53
+ <time class="blog_article-date" datetime="2012-01-07">2012-01-07</time>
60
-
54
+
61
- </div>
55
+ </div>
62
-
56
+
63
- </article>
57
+ </article>
64
-
65
- <?php endwhile; ?>
58
+
66
-
67
- <?php endif; ?>
68
-
69
- </div>
59
+ </div>
70
-
60
+
71
- </section>
61
+ </section>
72
62
 
73
63
  ```
74
64
 
75
65
 
76
66
 
67
+ ```css
68
+
69
+
70
+
71
+ html {
72
+
73
+ font-size: 62.5%;
74
+
75
+ /* -> 10px; */
76
+
77
+ }
78
+
79
+
80
+
81
+ body {
82
+
83
+ font-family: "游ゴシック体", "游ゴシック", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
84
+
85
+ }
86
+
87
+
88
+
89
+ .is-fixed {
90
+
91
+ height: 100%;
92
+
93
+ overflow: hidden;
94
+
95
+ }
96
+
97
+
98
+
99
+ h1 {
100
+
101
+ font-size: 4rem;
102
+
103
+ font-weight: bold;
104
+
105
+ line-height: 1.3;
106
+
107
+ color: #1B224C;
108
+
109
+ }
110
+
111
+
112
+
113
+ @media screen and (min-width: 1280px) {
114
+
115
+ h1 {
116
+
117
+ font-size: 4.8rem;
118
+
119
+ line-height: 1.4;
120
+
121
+ }
122
+
123
+ }
124
+
125
+
126
+
127
+ h2 {
128
+
129
+ font-weight: bold;
130
+
131
+ line-height: 1.4;
132
+
133
+ font-size: 2.1rem;
134
+
135
+ color: #1B224C;
136
+
137
+ }
138
+
139
+
140
+
141
+ @media screen and (min-width: 1280px) {
142
+
143
+ h2 {
144
+
145
+ font-size: 3.6rem;
146
+
147
+ }
148
+
149
+ }
150
+
151
+
152
+
153
+ h3 {
154
+
155
+ font-size: 2rem;
156
+
157
+ font-weight: bold;
158
+
159
+ line-height: 1.7;
160
+
161
+ color: #1B224C;
162
+
163
+ }
164
+
165
+
166
+
167
+ @media screen and (min-width: 1280px) {
168
+
169
+ h3 {
170
+
171
+ font-size: 3.2rem;
172
+
173
+ }
174
+
175
+ }
176
+
177
+
178
+
179
+ h4 {
180
+
181
+ font-weight: bold;
182
+
183
+ line-height: 1.5;
184
+
185
+ font-size: 1.8rem;
186
+
187
+ color: #1B224C;
188
+
189
+ }
190
+
191
+
192
+
193
+ @media screen and (min-width: 1280px) {
194
+
195
+ h4 {
196
+
197
+ font-size: 2.6rem;
198
+
199
+ }
200
+
201
+ }
202
+
203
+
204
+
205
+ h5 {
206
+
207
+ font-size: 1.8rem;
208
+
209
+ font-weight: 200;
210
+
211
+ line-height: 1.5;
212
+
213
+ color: #1B224C;
214
+
215
+ }
216
+
217
+
218
+
219
+ @media screen and (min-width: 1280px) {
220
+
221
+ h5 {
222
+
223
+ line-height: 1.7;
224
+
225
+ }
226
+
227
+ }
228
+
229
+
230
+
231
+ p,
232
+
233
+ .p {
234
+
235
+ font-size: 1.5rem;
236
+
237
+ font-weight: 200;
238
+
239
+ line-height: 1.5;
240
+
241
+ color: #1B224C;
242
+
243
+ }
244
+
245
+
246
+
247
+ @media screen and (min-width: 1280px) {
248
+
249
+ p,
250
+
251
+ .p {
252
+
253
+ line-height: 1.7;
254
+
255
+ font-size: 1.6rem;
256
+
257
+ }
258
+
259
+ }
260
+
261
+
262
+
263
+ small {
264
+
265
+ font-size: 1.2rem;
266
+
267
+ font-weight: 200;
268
+
269
+ line-height: 1.7;
270
+
271
+ color: #1B224C;
272
+
273
+ }
274
+
275
+
276
+
277
+ a {
278
+
279
+ text-decoration: none;
280
+
281
+ }
282
+
283
+
284
+
285
+ a:hover {
286
+
287
+ opacity: .8;
288
+
289
+ }
290
+
291
+
292
+
293
+ ul {
294
+
295
+ list-style: none;
296
+
297
+ }
298
+
299
+
300
+
301
+ .smallDone {
302
+
303
+ display: block;
304
+
305
+ }
306
+
307
+
308
+
309
+ @media screen and (min-width: 1280px) {
310
+
311
+ .smallDone {
312
+
313
+ display: none;
314
+
315
+ }
316
+
317
+ }
318
+
319
+
320
+
321
+ .smallNone {
322
+
323
+ display: none;
324
+
325
+ }
326
+
327
+
328
+
329
+ @media screen and (min-width: 1280px) {
330
+
331
+ .smallNone {
332
+
333
+ display: block;
334
+
335
+ }
336
+
337
+ }
338
+
339
+
340
+
341
+ .container {
342
+
343
+ margin: 0 auto;
344
+
345
+ max-width: 1600px;
346
+
347
+ width: 90%;
348
+
349
+ }
350
+
351
+
352
+
353
+ @media screen and (min-width: 768px) {
354
+
355
+ .container {
356
+
357
+ width: 70.3125vw;
358
+
359
+ }
360
+
361
+ }
362
+
363
+
364
+
365
+ .blog-news {
366
+
367
+ padding: 13.43284vh 0 17.76119vh;
368
+
369
+ }
370
+
371
+
372
+
373
+ @media screen and (min-width: 1280px) {
374
+
375
+ .blog-news-container {
376
+
377
+ display: -webkit-box;
378
+
379
+ display: -ms-flexbox;
380
+
381
+ display: flex;
382
+
383
+ }
384
+
385
+ }
386
+
387
+
388
+
389
+ @media screen and (min-width: 1280px) {
390
+
391
+ .blog {
392
+
393
+ width: 33.59375vw;
394
+
395
+ }
396
+
397
+ }
398
+
399
+
400
+
401
+ .blog_article {
402
+
403
+ display: -webkit-box;
404
+
405
+ display: -ms-flexbox;
406
+
407
+ display: flex;
408
+
409
+ padding-top: 4.47761vh;
410
+
411
+ }
412
+
413
+
414
+
415
+ .blog_article-img-box {
416
+
417
+ position: relative;
418
+
419
+ }
420
+
421
+
422
+
423
+ .blog_article-img-box img {
424
+
425
+ width: 10rem;
426
+
427
+ height: 11rem;
428
+
429
+ position: absolute;
430
+
431
+ top: 0;
432
+
433
+ left: 0;
434
+
435
+ -o-object-fit: cover;
436
+
437
+ object-fit: cover;
438
+
439
+ position: relative;
440
+
441
+ }
442
+
443
+
444
+
445
+ @media screen and (min-width: 1000px) {
446
+
447
+ .blog_article-img-box img {
448
+
449
+ width: 11.71875vw;
450
+
451
+ }
452
+
453
+ }
454
+
455
+
456
+
457
+ .blog_category {
458
+
459
+ position: absolute;
460
+
461
+ top: 0;
462
+
463
+ left: 0;
464
+
465
+ line-height: 1;
466
+
467
+ background-color: #1B224C;
468
+
469
+ color: #FFFFFF;
470
+
471
+ border: 1px solid #707070;
472
+
473
+ font-size: 1.2rem;
474
+
475
+ padding: .4rem .7rem;
476
+
477
+ }
478
+
479
+
480
+
481
+ .blog_article-text-box {
482
+
483
+ display: -webkit-box;
484
+
485
+ display: -ms-flexbox;
486
+
487
+ display: flex;
488
+
489
+ -webkit-box-orient: vertical;
490
+
491
+ -webkit-box-direction: normal;
492
+
493
+ -ms-flex-direction: column;
494
+
495
+ flex-direction: column;
496
+
497
+ margin-left: 2rem;
498
+
499
+ }
500
+
501
+
502
+
503
+ .blog_article-title {
504
+
505
+ -webkit-box-flex: 1;
506
+
507
+ -ms-flex-positive: 1;
508
+
509
+ flex-grow: 1;
510
+
511
+ font-weight: bold;
512
+
513
+ }
514
+
515
+
516
+
517
+ .blog_article-date {
518
+
519
+ font-size: 1.2rem;
520
+
521
+ font-weight: 200;
522
+
523
+ line-height: 1.7;
524
+
525
+ }
526
+
527
+ /*# sourceMappingURL=blog.css.map */
528
+
529
+ ```
530
+
531
+
532
+
533
+
534
+
535
+
536
+
537
+ ### 試したこと
538
+
539
+
540
+
77
541
  ```scss
78
542
 
543
+ .blog_article-img-box {
544
+
545
+ position: relative;
546
+
547
+
548
+
549
+ img {
550
+
551
+ width: 10rem;
552
+
553
+ height: 11rem;
554
+
79
- //style.scss
555
+ position: absolute;
556
+
80
-
557
+ top: 0;
558
+
81
-
559
+ left: 0;
560
+
82
-
561
+ object-fit: cover;
562
+
563
+ position: relative;
564
+
565
+
566
+
83
- @function vw($width, $px) {
567
+ @media screen and (min-width: 1000px) {
84
-
568
+
85
- @return $px / $width * 100vw;
569
+ width: vw(1280, 150);
86
-
570
+
87
- }
571
+ }
88
-
89
-
90
-
91
- $spc: 1280px;
572
+
92
-
93
- @mixin spc {
94
-
95
- @media screen and (min-width: $spc) {
96
-
97
- @content;
98
-
99
- }
573
+ }
100
-
574
+
101
- }
575
+ }
102
-
103
-
104
-
105
- $navyBlue: #1B224C;
106
-
107
- $white: #FFFFFF;
108
576
 
109
577
  ```
110
578
 
111
-
112
-
113
- ```scss
114
-
115
- //blog.scss
116
-
117
-
118
-
119
- .blog {
120
-
121
-
122
-
123
- @include spc {
124
-
125
- width: vw(1280, 430);
126
-
127
- }
128
-
129
- }
130
-
131
-
132
-
133
- .blog_article {
134
-
135
- display: flex;
136
-
137
- padding-top: vh(670, 30);
138
-
139
- }
140
-
141
-
142
-
143
- .blog_article-img-box {
144
-
145
- position: relative;
146
-
147
-
148
-
149
- img {
150
-
151
- width: 10rem;
152
-
153
- height: 11rem;
154
-
155
- position: absolute;
156
-
157
- top: 0;
158
-
159
- left: 0;
160
-
161
- object-fit: cover;
162
-
163
- position: relative;
164
-
165
-
166
-
167
- @media screen and (min-width: 1000px) {
168
-
169
- width: vw(1280, 150);
170
-
171
- }
172
-
173
- }
174
-
175
- }
176
-
177
-
178
-
179
- .blog_category {
180
-
181
- position: absolute;
182
-
183
- top: 0;
184
-
185
- left: 0;
186
-
187
- line-height: 1;
188
-
189
- background-color: $navyBlue;
190
-
191
- color: $white;
192
-
193
- border: 1px solid #707070;
194
-
195
- font-size: 1.2rem;
196
-
197
- padding: .4rem .7rem;
198
-
199
- }
200
-
201
-
202
-
203
- .blog_article-text-box {
204
-
205
- display: flex;
206
-
207
- flex-direction: column;
208
-
209
- margin-left: 2rem;
210
-
211
- }
212
-
213
-
214
-
215
- .blog_article-title {
216
-
217
- flex-grow: 1;
218
-
219
- font-weight: bold;
220
-
221
- }
222
-
223
-
224
-
225
- .blog_article-date {
226
-
227
- font-size: 1.2rem;
228
-
229
- font-weight: 200;
230
-
231
- line-height: 1.7;
232
-
233
- }
234
-
235
-
236
-
237
- ```
238
-
239
-
240
-
241
- ### 試したこと
242
-
243
-
244
-
245
- ```scss
246
-
247
- .blog_article-img-box {
248
-
249
- position: relative;
250
-
251
-
252
-
253
- img {
254
-
255
- width: 10rem;
256
-
257
- height: 11rem;
258
-
259
- position: absolute;
260
-
261
- top: 0;
262
-
263
- left: 0;
264
-
265
- object-fit: cover;
266
-
267
- position: relative;
268
-
269
-
270
-
271
- @media screen and (min-width: 1000px) {
272
-
273
- width: vw(1280, 150);
274
-
275
- }
276
-
277
- }
278
-
279
- }
280
-
281
- ```
282
-
283
- 上のscssを一つずつコメントアウトしたりした。
579
+ 上のscssを一つずつコメントアウトしたりしました。
284
580
 
285
581
 
286
582
 
@@ -288,4 +584,4 @@
288
584
 
289
585
 
290
586
 
291
- リセットcssとscssを使っています。
587
+ リセットcss([http://html5doctor.com/html-5-reset-stylesheet/](http://html5doctor.com/html-5-reset-stylesheet/))とscssを使っています。

1

画像の追加

2021/05/05 01:33

投稿

seakai
seakai

スコア24

test CHANGED
File without changes
test CHANGED
@@ -8,6 +8,14 @@
8
8
 
9
9
 
10
10
 
11
+ 今はこんな感じです。
12
+
13
+
14
+
15
+ ![![イメージ説明](d495a431af6f551fb12f3958245a51a1.png)]
16
+
17
+
18
+
11
19
 
12
20
 
13
21
  ### 該当のソースコード