質問編集履歴

1

文字制限の為自分で追記したCSSのみ入れます

2020/07/13 08:33

投稿

hati3693
hati3693

スコア24

test CHANGED
File without changes
test CHANGED
@@ -62,305 +62,717 @@
62
62
 
63
63
  ```css
64
64
 
65
- div.content {
66
-
67
- /* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
68
-
69
- display: none;
70
-
71
- float: right;
72
-
73
- width: 550px;
74
-
75
- }
65
+ .detail_img_inner {
66
+
67
+ display: -webkit-box;
68
+
69
+ display: -ms-flexbox;
70
+
71
+ display: flex;
72
+
73
+ -webkit-box-orient: horizontal;
74
+
75
+ -webkit-box-direction: reverse;
76
+
77
+ -ms-flex-flow: row-reverse;
78
+
79
+ flex-flow: row-reverse;
80
+
81
+ -webkit-box-pack: center;
82
+
83
+ -ms-flex-pack: center;
84
+
85
+ justify-content: center;
86
+
87
+ }
88
+
89
+
90
+
91
+ #gallery.content {
92
+
93
+ display: none;
94
+
95
+ float: right;
96
+
97
+ width: 550px;
98
+
99
+ width: 60%;
100
+
101
+ height: auto;
102
+
103
+ display: block;
104
+
105
+ float: none;
106
+
107
+ position: relative;
108
+
109
+ }
110
+
111
+
112
+
113
+ div.slideshow-container {
114
+
115
+ position: relative;
116
+
117
+ clear: both;
118
+
119
+ height: auto;
120
+
121
+ }
122
+
123
+
124
+
125
+ div.slideshow img {
126
+
127
+ vertical-align: middle;
128
+
129
+ border: none;
130
+
131
+ width: auto;
132
+
133
+ }
134
+
135
+
136
+
137
+ #loading.loader {
138
+
139
+ position: absolute;
140
+
141
+ top: 0;
142
+
143
+ left: 0;
144
+
145
+ background-image: url(loader.gif);
146
+
147
+ background-repeat: no-repeat;
148
+
149
+ background-position: center;
150
+
151
+ width: 100%;
152
+
153
+ height: auto;
154
+
155
+ }
156
+
157
+
158
+
159
+ ul.thumbs img {
160
+
161
+ border: none;
162
+
163
+ display: block;
164
+
165
+ margin: 0 auto 2px auto;
166
+
167
+ }
168
+
169
+
170
+
171
+ div.nav-controls {
172
+
173
+ float: none;
174
+
175
+ }
176
+
177
+
178
+
179
+ div.slideshow a.advance-link {
180
+
181
+ display: block;
182
+
183
+ width: 550px;
184
+
185
+ height: auto;
186
+
187
+ text-align: center;
188
+
189
+ line-height: normal;
190
+
191
+ width: auto;
192
+
193
+ }
194
+
195
+
196
+
197
+ #thumbs.navigation {
198
+
199
+ float: none;
200
+
201
+ width: 38%;
202
+
203
+ margin-right: .5%;
204
+
205
+ background: #f7f3ef;
206
+
207
+ position: relative;
208
+
209
+ text-align: center;
210
+
211
+ padding: 1%;
212
+
213
+ overflow: hidden;
214
+
215
+ }
216
+
217
+
218
+
219
+ ul.thumbs li.selected a.thumb {
220
+
221
+ background: #ffffff;
222
+
223
+ -webkit-box-shadow: 0 0 0 3px #f3cd64 inset;
224
+
225
+ box-shadow: 0 0 0 3px #f3cd64 inset;
226
+
227
+ border: 1px solid #f3cd64;
228
+
229
+ }
230
+
231
+
232
+
233
+ ul.thumbs {
234
+
235
+ clear: both;
236
+
237
+ width: 100%;
238
+
239
+ display: -webkit-box;
240
+
241
+ display: -ms-flexbox;
242
+
243
+ display: flex;
244
+
245
+ -webkit-box-orient: horizontal;
246
+
247
+ -webkit-box-direction: normal;
248
+
249
+ -ms-flex-flow: row wrap;
250
+
251
+ flex-flow: row wrap;
252
+
253
+ -webkit-box-pack: start;
254
+
255
+ -ms-flex-pack: start;
256
+
257
+ justify-content: flex-start;
258
+
259
+ position: relative;
260
+
261
+ height: 100%;
262
+
263
+ overflow-y: scroll;
264
+
265
+ }
266
+
267
+
268
+
269
+ .scrollbar-primary::-webkit-scrollbar {
270
+
271
+ width: 12px;
272
+
273
+ background-color: #fff;
274
+
275
+ border-radius: 5px;
276
+
277
+ }
278
+
279
+
280
+
281
+ .scrollbar-primary::-webkit-scrollbar-thumb {
282
+
283
+ border-radius: 10px;
284
+
285
+ background-color: #f3cd64;
286
+
287
+ }
288
+
289
+
290
+
291
+ ul.thumbs li {
292
+
293
+ float: left;
294
+
295
+ padding: 0;
296
+
297
+ margin: 4px 3px 4px 3px;
298
+
299
+ list-style: none;
300
+
301
+ width: calc(34% - 6px - 1%);
302
+
303
+ }
304
+
305
+
306
+
307
+ div.navigation div.top, div.navigation div.bottom {
308
+
309
+ height: 25px;
310
+
311
+ display: -webkit-box;
312
+
313
+ display: -ms-flexbox;
314
+
315
+ display: flex;
316
+
317
+ margin: 25px 0 12px 0;
318
+
319
+ }
320
+
321
+
322
+
323
+ div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
324
+
325
+ display: block;
326
+
327
+ margin-right: 2px;
328
+
329
+ padding: 4px 7px 2px 7px;
330
+
331
+ border: 1px solid #ccc;
332
+
333
+ height: 31px;
334
+
335
+ display: -webkit-box;
336
+
337
+ display: -ms-flexbox;
338
+
339
+ display: flex;
340
+
341
+ -webkit-box-align: center;
342
+
343
+ -ms-flex-align: center;
344
+
345
+ align-items: center;
346
+
347
+ float: none;
348
+
349
+ }
350
+
351
+
352
+
353
+ .pagination_wrap {
354
+
355
+ display: -webkit-box;
356
+
357
+ display: -ms-flexbox;
358
+
359
+ display: flex;
360
+
361
+ -webkit-box-pack: center;
362
+
363
+ -ms-flex-pack: center;
364
+
365
+ justify-content: center;
366
+
367
+ height: 50px;
368
+
369
+ }
370
+
371
+
372
+
373
+ div.controls {
374
+
375
+ margin-top: 0;
376
+
377
+ height: 0;
378
+
379
+ }
380
+
381
+
382
+
383
+ .nav-controls a:nth-child(1) {
384
+
385
+ position: absolute;
386
+
387
+ top: 50%;
388
+
389
+ left: 2%;
390
+
391
+ width: 60px;
392
+
393
+ background: #a9927b;
394
+
395
+ height: 60px;
396
+
397
+ z-index: 2;
398
+
399
+ -webkit-transform: translateY(-50%);
400
+
401
+ transform: translateY(-50%);
402
+
403
+ border-radius: 1em;
404
+
405
+ -webkit-transition: .5s;
406
+
407
+ transition: .5s;
408
+
409
+ opacity: .8;
410
+
411
+ }
412
+
413
+
414
+
415
+ .nav-controls a:nth-child(1)::before {
416
+
417
+ content: "";
418
+
419
+ width: 100%;
420
+
421
+ height: 100%;
422
+
423
+ display: block;
424
+
425
+ top: 0;
426
+
427
+ left: 0;
428
+
429
+ background-image: url(left.svg);
430
+
431
+ background-repeat: no-repeat;
432
+
433
+ -webkit-transform: rotate(180deg);
434
+
435
+ transform: rotate(180deg);
436
+
437
+ position: absolute;
438
+
439
+ background-size: 45%;
440
+
441
+ background-position: center,center;
442
+
443
+ }
444
+
445
+
446
+
447
+ .nav-controls a:nth-child(2) {
448
+
449
+ position: absolute;
450
+
451
+ top: 50%;
452
+
453
+ right: 2%;
454
+
455
+ width: 60px;
456
+
457
+ background: #a9927b;
458
+
459
+ height: 60px;
460
+
461
+ z-index: 2;
462
+
463
+ -webkit-transform: translateY(-50%);
464
+
465
+ transform: translateY(-50%);
466
+
467
+ border-radius: 1em;
468
+
469
+ -webkit-transition: .5s;
470
+
471
+ transition: .5s;
472
+
473
+ opacity: .8;
474
+
475
+ }
476
+
477
+
478
+
479
+ .nav-controls a:nth-child(2)::before {
480
+
481
+ content: "";
482
+
483
+ width: 100%;
484
+
485
+ height: 100%;
486
+
487
+ display: block;
488
+
489
+ top: 0;
490
+
491
+ left: 0;
492
+
493
+ background-image: url(left.svg);
494
+
495
+ background-repeat: no-repeat;
496
+
497
+ position: absolute;
498
+
499
+ background-size: 45%;
500
+
501
+ background-position: center,center;
502
+
503
+ }
504
+
505
+
506
+
507
+ .nav-controls a:nth-child(1):hover, .nav-controls a:nth-child(2):hover {
508
+
509
+ background: #a9927b;
510
+
511
+ -webkit-transition: .5s;
512
+
513
+ transition: .5s;
514
+
515
+ }
516
+
517
+
518
+
519
+ div.pagination a {
520
+
521
+ background: #FFF;
522
+
523
+ }
524
+
525
+
526
+
527
+ div.pagination span.current {
528
+
529
+ font-weight: bold;
530
+
531
+ background-color: #6f6255;
532
+
533
+ border-color: #6f6255;
534
+
535
+ color: #fff;
536
+
537
+ }
538
+
539
+
540
+
541
+ div.navigation div.bottom {
542
+
543
+ margin-top: 10px;
544
+
545
+ bottom: 10px;
546
+
547
+ }
548
+
549
+
550
+
551
+ a.thumb {
552
+
553
+ padding: 6px 4px 2px 4px;
554
+
555
+ display: block;
556
+
557
+ border: 1px solid #c3bbb3;
558
+
559
+ background: #FFF;
560
+
561
+ }
562
+
563
+
564
+
565
+ div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
566
+
567
+ display: block;
568
+
569
+ margin-right: 2px;
570
+
571
+ padding: 5px 10px 4px 10px;
572
+
573
+ border: 1px solid #6f6255;
574
+
575
+ height: 31px;
576
+
577
+ display: -webkit-box;
578
+
579
+ display: -ms-flexbox;
580
+
581
+ display: flex;
582
+
583
+ -webkit-box-align: center;
584
+
585
+ -ms-flex-align: center;
586
+
587
+ align-items: center;
588
+
589
+ float: none;
590
+
591
+ border-radius: 5em;
592
+
593
+ margin: 0 3px;
594
+
595
+ }
596
+
597
+
598
+
599
+ div.pagination a:hover {
600
+
601
+ background-color: #f5eadf;
602
+
603
+ text-decoration: none;
604
+
605
+ }
606
+
607
+
608
+
609
+ .bottom.pagination a {
610
+
611
+ font-size: 1em;
612
+
613
+ }
614
+
615
+
616
+
617
+ div.pagination a {
618
+
619
+ background: #FFF;
620
+
621
+ }
622
+
623
+
624
+
625
+ div.slideshow span.image-wrapper {
626
+
627
+ display: block;
628
+
629
+ position: absolute;
630
+
631
+ top: 0;
632
+
633
+ left: 0;
634
+
635
+ border: 1px solid #ceb9a4;
636
+
637
+ padding: 5px;
638
+
639
+ width: 100%;
640
+
641
+ }
642
+
643
+
644
+
645
+ div.pagination span.current {
646
+
647
+ font-weight: bold;
648
+
649
+ background-color: #6f6255;
650
+
651
+ border-color: #6f6255;
652
+
653
+ color: #fff;
654
+
655
+ }
656
+
657
+
76
658
 
77
659
  div.content a, div.navigation a {
78
660
 
79
- text-decoration: none;
80
-
81
- color: #777;
82
-
83
- }
84
-
85
- div.content a:focus, div.content a:hover, div.content a:active {
86
-
87
- text-decoration: underline;
88
-
89
- }
90
-
91
- div.controls {
92
-
93
- margin-top: 5px;
94
-
95
- height: 23px;
96
-
97
- }
98
-
99
- div.controls a {
100
-
101
- padding: 5px;
102
-
103
- }
104
-
105
- div.ss-controls {
106
-
107
- float: left;
108
-
109
- }
110
-
111
- div.nav-controls {
112
-
113
- float: right;
114
-
115
- }
116
-
117
- div.slideshow-container {
118
-
119
- position: relative;
120
-
121
- clear: both;
122
-
123
- height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
124
-
125
- }
126
-
127
- div.loader {
128
-
129
- position: absolute;
130
-
131
- top: 0;
132
-
133
- left: 0;
134
-
135
- background-image: url('loader.gif');
136
-
137
- background-repeat: no-repeat;
138
-
139
- background-position: center;
140
-
141
- width: 550px;
142
-
143
- height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
144
-
145
- }
146
-
147
- div.slideshow {
148
-
149
-
150
-
151
- }
152
-
153
- div.slideshow span.image-wrapper {
154
-
155
- display: block;
156
-
157
- position: absolute;
158
-
159
- top: 0;
160
-
161
- left: 0;
162
-
163
- }
164
-
165
- div.slideshow a.advance-link {
166
-
167
- display: block;
168
-
169
- width: 550px;
170
-
171
- height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
172
-
173
- line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
174
-
175
- text-align: center;
176
-
177
- }
178
-
179
- div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
180
-
181
- text-decoration: none;
182
-
183
- }
184
-
185
- div.slideshow img {
186
-
187
- vertical-align: middle;
188
-
189
- border: 1px solid #ccc;
190
-
191
- }
192
-
193
- div.download {
194
-
195
- float: right;
196
-
197
- }
198
-
199
- div.caption-container {
200
-
201
- position: relative;
202
-
203
- clear: left;
204
-
205
- height: 75px;
206
-
207
- }
208
-
209
- span.image-caption {
210
-
211
- display: block;
212
-
213
- position: absolute;
214
-
215
- width: 550px;
216
-
217
- top: 0;
218
-
219
- left: 0;
220
-
221
- }
222
-
223
- div.caption {
224
-
225
- padding: 12px;
226
-
227
- }
228
-
229
- div.image-title {
230
-
231
- font-weight: bold;
232
-
233
- font-size: 1.4em;
234
-
235
- }
236
-
237
- div.image-desc {
238
-
239
- line-height: 1.3em;
240
-
241
- padding-top: 12px;
242
-
243
- }
244
-
245
- div.navigation {
246
-
247
- /* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
248
-
249
- }
250
-
251
- ul.thumbs {
252
-
253
- clear: both;
254
-
255
- margin: 0;
256
-
257
- padding: 0;
258
-
259
- }
260
-
261
- ul.thumbs li {
262
-
263
- float: left;
264
-
265
- padding: 0;
266
-
267
- margin: 5px 10px 5px 0;
268
-
269
- list-style: none;
270
-
271
- }
272
-
273
- a.thumb {
274
-
275
- padding: 2px;
276
-
277
- display: block;
278
-
279
- border: 1px solid #ccc;
280
-
281
- }
282
-
283
- ul.thumbs li.selected a.thumb {
284
-
285
- background: #000;
286
-
287
- }
288
-
289
- a.thumb:focus {
290
-
291
- outline: none;
292
-
293
- }
294
-
295
- ul.thumbs img {
296
-
297
- border: none;
298
-
299
- display: block;
300
-
301
- }
302
-
303
- div.pagination {
304
-
305
- clear: both;
306
-
307
- }
308
-
309
- div.navigation div.top {
310
-
311
- margin-bottom: 12px;
312
-
313
- height: 11px;
314
-
315
- }
316
-
317
- div.navigation div.bottom {
318
-
319
- margin-top: 12px;
320
-
321
- }
322
-
323
- div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
324
-
325
- display: block;
326
-
327
- float: left;
328
-
329
- margin-right: 2px;
330
-
331
- padding: 4px 7px 2px 7px;
332
-
333
- border: 1px solid #ccc;
334
-
335
- }
336
-
337
- div.pagination a:hover {
338
-
339
- background-color: #eee;
340
-
341
- text-decoration: none;
342
-
343
- }
344
-
345
- div.pagination span.current {
346
-
347
- font-weight: bold;
348
-
349
- background-color: #000;
350
-
351
- border-color: #000;
352
-
353
- color: #fff;
354
-
355
- }
356
-
357
- div.pagination span.ellipsis {
358
-
359
- border: none;
360
-
361
- padding: 5px 0 3px 2px;
362
-
363
- }
661
+ text-decoration: none;
662
+
663
+ color: #333;
664
+
665
+ font-size: .8em;
666
+
667
+ line-height: 18px;
668
+
669
+ }
670
+
671
+ @media screen and (max-width: 880px) {
672
+
673
+ .detail_img_inner {
674
+
675
+ display: block;
676
+
677
+ height: auto !important;
678
+
679
+ }
680
+
681
+ #gallery.content {
682
+
683
+ width: 100%;
684
+
685
+ margin: 0 auto;
686
+
687
+ }
688
+
689
+ .nav-controls a:nth-child(1) {
690
+
691
+ width: 12%;
692
+
693
+ left: 2%;
694
+
695
+ }
696
+
697
+ .nav-controls a:nth-child(2) {
698
+
699
+ width: 12%;
700
+
701
+ right: 2%;
702
+
703
+ }
704
+
705
+ #thumbs.navigation {
706
+
707
+ float: none;
708
+
709
+ width: 100%;
710
+
711
+ margin-right: 0;
712
+
713
+ background: #f7f3ef;
714
+
715
+ position: static;
716
+
717
+ text-align: center;
718
+
719
+ padding: .5%;
720
+
721
+ display: block;
722
+
723
+ margin: 2.5em 0 0 0;
724
+
725
+ }
726
+
727
+ ul.thumbs {
728
+
729
+ display: -ms-flexbox;
730
+
731
+ display: -webkit-box;
732
+
733
+ display: flex;
734
+
735
+ -webkit-box-orient: vertical;
736
+
737
+ -webkit-box-direction: normal;
738
+
739
+ -ms-flex-flow: unset;
740
+
741
+ flex-flow: unset;
742
+
743
+ overflow-x: scroll;
744
+
745
+ overflow-y: unset;
746
+
747
+ }
748
+
749
+ ul.thumbs li {
750
+
751
+ width: calc(25% - 10px);
752
+
753
+ margin: 4px 4px 10px 6px;
754
+
755
+ -webkit-box-flex: 0;
756
+
757
+ -ms-flex: 0 0 100px;
758
+
759
+ flex: 0 0 100px;
760
+
761
+ min-width: 80px;
762
+
763
+ }
764
+
765
+ ul.thumbs img {
766
+
767
+ border: none;
768
+
769
+ display: block;
770
+
771
+ width: 100px;
772
+
773
+ }
774
+
775
+ }
364
776
 
365
777
  ```
366
778