質問編集履歴

3

書式の改善

2019/01/07 10:08

投稿

meeee
meeee

スコア12

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
 
14
14
 
15
- ![イメージ説明](4b4065b4b9fa1a5abb2cf1174fcc2416.jpeg)
15
+ ![イメージ説明](3087207c9415ce10b3bb22fbe354254e.jpeg)
16
16
 
17
17
 
18
18
 

2

書式の改善

2019/01/07 10:08

投稿

meeee
meeee

スコア12

test CHANGED
File without changes
test CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
 
22
22
 
23
- ![イメージ説明](a67f788e91accb88f9fb7ec63bf5fb97.jpeg)
23
+ ![イメージ説明](4e9688409a84edfbdd56beb7a77562db.jpeg)
24
24
 
25
25
 
26
26
 

1

書式の改善

2019/01/07 10:07

投稿

meeee
meeee

スコア12

test CHANGED
File without changes
test CHANGED
@@ -179,3 +179,467 @@
179
179
 
180
180
 
181
181
  ```
182
+
183
+
184
+
185
+
186
+
187
+ ```CSS
188
+
189
+
190
+
191
+ /*--------------------------------------------------------------
192
+
193
+ 13.1 Header
194
+
195
+ --------------------------------------------------------------*/
196
+
197
+
198
+
199
+ #masthead .wrap {
200
+
201
+ position: relative;
202
+
203
+ }
204
+
205
+
206
+
207
+ .site-header {
208
+
209
+ background-color: #fafafa;
210
+
211
+ position: relative;
212
+
213
+ }
214
+
215
+
216
+
217
+ /* Site branding */
218
+
219
+
220
+
221
+ .site-branding {
222
+
223
+ padding: 1em 0;
224
+
225
+ position: relative;
226
+
227
+ -webkit-transition: margin-bottom 0.2s;
228
+
229
+ transition: margin-bottom 0.2s;
230
+
231
+ z-index: 3;
232
+
233
+ }
234
+
235
+
236
+
237
+ .site-branding a {
238
+
239
+ text-decoration: none;
240
+
241
+ -webkit-transition: opacity 0.2s;
242
+
243
+ transition: opacity 0.2s;
244
+
245
+ }
246
+
247
+
248
+
249
+ .site-branding a:hover,
250
+
251
+ .site-branding a:focus {
252
+
253
+ opacity: 0.7;
254
+
255
+ }
256
+
257
+
258
+
259
+ .site-title {
260
+
261
+ clear: none;
262
+
263
+ font-size: 24px;
264
+
265
+ font-size: 1.5rem;
266
+
267
+ font-weight: 800;
268
+
269
+ line-height: 1.25;
270
+
271
+ letter-spacing: 0.08em;
272
+
273
+ margin: 0;
274
+
275
+ padding: 0;
276
+
277
+ text-transform: uppercase;
278
+
279
+ }
280
+
281
+
282
+
283
+ .site-title,
284
+
285
+ .site-title a {
286
+
287
+ color: #222;
288
+
289
+ opacity: 1; /* Prevent opacity from changing during selective refreshes in the customize preview */
290
+
291
+ }
292
+
293
+
294
+
295
+ body.has-header-image .site-title,
296
+
297
+ body.has-header-video .site-title,
298
+
299
+ body.has-header-image .site-title a,
300
+
301
+ body.has-header-video .site-title a {
302
+
303
+ color: #fff;
304
+
305
+ }
306
+
307
+
308
+
309
+ .site-description {
310
+
311
+ color: #666;
312
+
313
+ font-size: 13px;
314
+
315
+ font-size: 0.8125rem;
316
+
317
+ margin-bottom: 0;
318
+
319
+ }
320
+
321
+
322
+
323
+ body.has-header-image .site-description,
324
+
325
+ body.has-header-video .site-description {
326
+
327
+ color: #fff;
328
+
329
+ opacity: 0.8;
330
+
331
+ }
332
+
333
+
334
+
335
+ .custom-logo-link {
336
+
337
+ display: inline-block;
338
+
339
+ padding-right: 1em;
340
+
341
+ vertical-align: middle;
342
+
343
+ width: auto;
344
+
345
+ }
346
+
347
+
348
+
349
+ .custom-logo-link img {
350
+
351
+ display: inline-block;
352
+
353
+ max-height: 80px;
354
+
355
+ width: auto;
356
+
357
+ }
358
+
359
+
360
+
361
+ body.home.title-tagline-hidden.has-header-image .custom-logo-link img,
362
+
363
+ body.home.title-tagline-hidden.has-header-video .custom-logo-link img {
364
+
365
+ max-height: 200px;
366
+
367
+ max-width: 100%;
368
+
369
+ }
370
+
371
+
372
+
373
+ .custom-logo-link a:hover,
374
+
375
+ .custom-logo-link a:focus {
376
+
377
+ opacity: 0.9;
378
+
379
+ }
380
+
381
+
382
+
383
+ body:not(.title-tagline-hidden) .site-branding-text {
384
+
385
+ display: inline-block;
386
+
387
+ vertical-align: middle;
388
+
389
+ }
390
+
391
+
392
+
393
+ .custom-header {
394
+
395
+ position: relative;
396
+
397
+ }
398
+
399
+
400
+
401
+ .has-header-image.twentyseventeen-front-page .custom-header,
402
+
403
+ .has-header-video.twentyseventeen-front-page .custom-header,
404
+
405
+ .has-header-image.home.blog .custom-header,
406
+
407
+ .has-header-video.home.blog .custom-header {
408
+
409
+ display: table;
410
+
411
+ height: 15vh;
412
+
413
+ width: 100%;
414
+
415
+ }
416
+
417
+
418
+
419
+ .custom-header-media {
420
+
421
+ bottom: 0;
422
+
423
+ left: 0;
424
+
425
+ overflow: hidden;
426
+
427
+ position: absolute;
428
+
429
+ right: 0;
430
+
431
+ top: 0;
432
+
433
+ width: 100%;
434
+
435
+ }
436
+
437
+
438
+
439
+ .custom-header-media:before {
440
+
441
+ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.3+75 */
442
+
443
+ background: -moz-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* FF3.6-15 */
444
+
445
+ background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* Chrome10-25,Safari5.1-6 */
446
+
447
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
448
+
449
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#4d000000", GradientType=0); /* IE6-9 */
450
+
451
+ bottom: 0;
452
+
453
+ content: "";
454
+
455
+ display: block;
456
+
457
+ height: 100%;
458
+
459
+ left: 0;
460
+
461
+ position: absolute;
462
+
463
+ right: 0;
464
+
465
+ z-index: 2;
466
+
467
+ }
468
+
469
+
470
+
471
+ .has-header-image .custom-header-media img,
472
+
473
+ .has-header-video .custom-header-media video,
474
+
475
+ .has-header-video .custom-header-media iframe {
476
+
477
+ position: fixed;
478
+
479
+ height: auto;
480
+
481
+ left: 50%;
482
+
483
+ max-width: 1000%;
484
+
485
+ width: auto;
486
+
487
+ top: 50%;
488
+
489
+ padding-bottom: 1px; /* Prevent header from extending beyond the footer */
490
+
491
+ -ms-transform: translateX(-50%) translateY(-50%);
492
+
493
+ -moz-transform: translateX(-50%) translateY(-50%);
494
+
495
+ -webkit-transform: translateX(-50%) translateY(-50%);
496
+
497
+ transform: translateX(-50%) translateY(-50%);
498
+
499
+ }
500
+
501
+
502
+
503
+ .wp-custom-header .wp-custom-header-video-button { /* Specificity prevents .color-dark button overrides */
504
+
505
+ background-color: rgba(34, 34, 34, 0.5);
506
+
507
+ border: 1px solid rgba(255, 255, 255, 0.6);
508
+
509
+ color: rgba(255, 255, 255, 0.6);
510
+
511
+ height: 45px;
512
+
513
+ overflow: hidden;
514
+
515
+ padding: 0;
516
+
517
+ position: fixed;
518
+
519
+ right: 30px;
520
+
521
+ top: 30px;
522
+
523
+ -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
524
+
525
+ transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
526
+
527
+ width: 45px;
528
+
529
+ }
530
+
531
+
532
+
533
+ .wp-custom-header .wp-custom-header-video-button:hover,
534
+
535
+ .wp-custom-header .wp-custom-header-video-button:focus { /* Specificity prevents .color-dark button overrides */
536
+
537
+ border-color: rgba(255, 255, 255, 0.8);
538
+
539
+ background-color: rgba(34, 34, 34, 0.8);
540
+
541
+ color: #fff;
542
+
543
+ }
544
+
545
+
546
+
547
+ .admin-bar .wp-custom-header-video-button {
548
+
549
+ top: 62px;
550
+
551
+ }
552
+
553
+
554
+
555
+ .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
556
+
557
+ bottom: 0;
558
+
559
+ position: absolute;
560
+
561
+ top: auto;
562
+
563
+ -ms-transform: translateX(-50%) translateY(0);
564
+
565
+ -moz-transform: translateX(-50%) translateY(0);
566
+
567
+ -webkit-transform: translateX(-50%) translateY(0);
568
+
569
+ transform: translateX(-50%) translateY(0);
570
+
571
+ }
572
+
573
+
574
+
575
+ /* For browsers that support 'object-fit' */
576
+
577
+ @supports ( object-fit: cover ) {
578
+
579
+ .has-header-image .custom-header-media img,
580
+
581
+ .has-header-video .custom-header-media video,
582
+
583
+ .has-header-video .custom-header-media iframe,
584
+
585
+ .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
586
+
587
+ height: 100%;
588
+
589
+ left: 0;
590
+
591
+ -o-object-fit: cover;
592
+
593
+ object-fit: cover;
594
+
595
+ top: 0;
596
+
597
+ -ms-transform: none;
598
+
599
+ -moz-transform: none;
600
+
601
+ -webkit-transform: none;
602
+
603
+ transform: none;
604
+
605
+ width: 100%;
606
+
607
+ }
608
+
609
+ }
610
+
611
+
612
+
613
+ /* Hides div in Customizer preview when header images or videos change. */
614
+
615
+
616
+
617
+ body:not(.has-header-image):not(.has-header-video) .custom-header-media {
618
+
619
+ display: none;
620
+
621
+ }
622
+
623
+
624
+
625
+ .has-header-image.twentyseventeen-front-page .site-branding,
626
+
627
+ .has-header-video.twentyseventeen-front-page .site-branding,
628
+
629
+ .has-header-image.home.blog .site-branding,
630
+
631
+ .has-header-video.home.blog .site-branding {
632
+
633
+ display: table-cell;
634
+
635
+ height: 100%;
636
+
637
+ vertical-align: bottom;
638
+
639
+ }
640
+
641
+
642
+
643
+
644
+
645
+ ```