質問編集履歴

2

画像の追加

2020/12/01 09:15

投稿

__akiko
__akiko

スコア0

test CHANGED
File without changes
test CHANGED
@@ -880,6 +880,12 @@
880
880
 
881
881
 
882
882
 
883
+ ![![イメージ説明](aaed3e984a443ac6794adb535efbec51.png)]
884
+
885
+ ![イメージ説明](bda8e26447280b00be67cd83babbdd61.png)
886
+
887
+
888
+
883
889
 
884
890
 
885
891
 

1

CSSを追加しました。

2020/12/01 09:15

投稿

__akiko
__akiko

スコア0

test CHANGED
File without changes
test CHANGED
@@ -90,6 +90,786 @@
90
90
 
91
91
  ```
92
92
 
93
+ ```
94
+
95
+ /* ヘッダー
96
+
97
+ ------------------------------------------------------------*/
98
+
99
+ #header{
100
+
101
+ text-align: center;
102
+
103
+ }
104
+
105
+
106
+
107
+ #logo{
108
+
109
+ padding-top: 10px;
110
+
111
+ }
112
+
113
+
114
+
115
+ #logo img{
116
+
117
+ transform: scale(.5);
118
+
119
+ }
120
+
121
+
122
+
123
+ #mainnav a{
124
+
125
+ color: #000;
126
+
127
+ font-family: 'Noto Sans JP', serif;
128
+
129
+ }
130
+
131
+
132
+
133
+ #mainImg img{
134
+
135
+ width: 100%;
136
+
137
+ height: auto;
138
+
139
+ margin-bottom: 80px;
140
+
141
+ }
142
+
143
+
144
+
145
+ /* 共通
146
+
147
+ ------------------------------------------------------------*/
148
+
149
+ h1, h2{
150
+
151
+ font-family: 'Noto Sans JP', serif;
152
+
153
+ }
154
+
155
+
156
+
157
+ h3{
158
+
159
+ font-size: 120%;
160
+
161
+ }
162
+
163
+
164
+
165
+ img{
166
+
167
+ max-width: 100%;
168
+
169
+ height: auto;
170
+
171
+ }
172
+
173
+
174
+
175
+ .inner{
176
+
177
+ width: 80%;
178
+
179
+ margin: 0 auto;
180
+
181
+ padding-bottom: 50px;
182
+
183
+ }
184
+
185
+
186
+
187
+ .innerS{
188
+
189
+ width: 60%;
190
+
191
+ margin: 0 auto;
192
+
193
+ padding-bottom: 50px;
194
+
195
+ }
196
+
197
+
198
+
199
+
200
+
201
+
202
+
203
+ /* ページ・投稿
204
+
205
+ ------------------------------------------------------------*/
206
+
207
+ #singleImg{
208
+
209
+ text-align: center;
210
+
211
+ margin-bottom: 40px;
212
+
213
+ }
214
+
215
+
216
+
217
+ #singleImg img{
218
+
219
+ width: 100%;
220
+
221
+ height: auto;
222
+
223
+ }
224
+
225
+
226
+
227
+ .header{
228
+
229
+ width: 60%;
230
+
231
+ margin: 0 auto;
232
+
233
+ background: url(images/borderBlack.png) repeat-x 0 50%;
234
+
235
+ background-size: 1px 1px;
236
+
237
+ }
238
+
239
+
240
+
241
+ .header h1{
242
+
243
+ padding: 10px;
244
+
245
+ }
246
+
247
+
248
+
249
+ .header h1 span{
250
+
251
+ display: inline-block;
252
+
253
+ background: #fff;
254
+
255
+ padding: 0 80px;
256
+
257
+ }
258
+
259
+
260
+
261
+ section header h1{
262
+
263
+ text-align: center;
264
+
265
+ font-size: 120%;
266
+
267
+ margin-bottom: 30px;
268
+
269
+ }
270
+
271
+
272
+
273
+ .entry-footer{
274
+
275
+ clear: both;
276
+
277
+ padding-top: 30px;
278
+
279
+ font-size: 80%;
280
+
281
+ text-align: right;
282
+
283
+ }
284
+
285
+
286
+
287
+ .entry-footer span{
288
+
289
+ padding-right: 10px;
290
+
291
+ }
292
+
293
+
294
+
295
+
296
+
297
+
298
+
299
+ /* アーカイブ
300
+
301
+ ------------------------------------------------------------*/
302
+
303
+ .col3 .thumb{
304
+
305
+ text-align: center;
306
+
307
+ margin-bottom: 15px;
308
+
309
+ }
310
+
311
+
312
+
313
+ .col3 .thumb img{
314
+
315
+ width: 100%;
316
+
317
+ height: auto;
318
+
319
+ }
320
+
321
+
322
+
323
+ .col3 h3{
324
+
325
+ margin-bottom: 10px;
326
+
327
+ line-height: 1.5;
328
+
329
+ }
330
+
331
+
332
+
333
+ .date{
334
+
335
+ margin-top: 10px;
336
+
337
+ font-size: 80%;
338
+
339
+ }
340
+
341
+
342
+
343
+
344
+
345
+ /* ページナビ
346
+
347
+ ------------------------------------------------------------*/
348
+
349
+ .pagination, #pageLinks{
350
+
351
+ clear: both;
352
+
353
+ padding-top: 30px;
354
+
355
+ text-align: center;
356
+
357
+ }
358
+
359
+
360
+
361
+ .pagination li{
362
+
363
+ display: inline-block;
364
+
365
+ margin: 0 5px;
366
+
367
+ height: 35px;
368
+
369
+ width: 35px;
370
+
371
+ line-height: 35px;
372
+
373
+ text-align: center;
374
+
375
+ border-radius: 100px;
376
+
377
+ box-shadow: 0 0 1px 0 rgba(0, 0, 0, .2);
378
+
379
+ }
380
+
381
+
382
+
383
+
384
+
385
+ #pageLinks span{
386
+
387
+ padding: 0 5px;
388
+
389
+ }
390
+
391
+
392
+
393
+
394
+
395
+
396
+
397
+ /* RESPONSIVE 設定
398
+
399
+ ------------------------------------------------------------*/
400
+
401
+
402
+
403
+ @media only screen and (min-width: 800px){
404
+
405
+ body{
406
+
407
+ font-size:15px;
408
+
409
+ }
410
+
411
+ a#menu{
412
+
413
+ display:none;
414
+
415
+ }
416
+
417
+ .panel{
418
+
419
+ display:block !important;
420
+
421
+ padding-bottom: 50px;
422
+
423
+ }
424
+
425
+ #mainnav li{
426
+
427
+ display: inline-block;
428
+
429
+ position: relative;
430
+
431
+ padding: 0 30px;
432
+
433
+ font-size: 14px;
434
+
435
+ }
436
+
437
+ #mainnav li a{
438
+
439
+ display: block;
440
+
441
+ }
442
+
443
+ #mainnav li ul{
444
+
445
+ display: none;
446
+
447
+ }
448
+
449
+ #mainnav li:hover ul{
450
+
451
+ display: block;
452
+
453
+ position: absolute;
454
+
455
+ top: 25px;
456
+
457
+ left: 0;
458
+
459
+ z-index: 500;
460
+
461
+ background: rgba(255,255,255,.8)
462
+
463
+ }
464
+
465
+ #mainnav li li{
466
+
467
+ padding: 10px;
468
+
469
+ line-height: 1.5;
470
+
471
+ border-bottom: 1px solid #fff;
472
+
473
+ text-align: left;
474
+
475
+ }
476
+
477
+ #footer{
478
+
479
+ padding: 30px 10px 70px 0;
480
+
481
+ }
482
+
483
+ }
484
+
485
+
486
+
487
+ @media only screen and (min-width: 981px){
488
+
489
+ .col3{
490
+
491
+ width: 80%;
492
+
493
+ margin: 0 auto;
494
+
495
+ }
496
+
497
+
498
+
499
+ .col3 > li{
500
+
501
+ display: inline-block;
502
+
503
+ width: 30%;
504
+
505
+ padding: 0 1.5%;
506
+
507
+ margin-bottom: 50px;
508
+
509
+ vertical-align: top;
510
+
511
+ text-align: left;
512
+
513
+ }
514
+
515
+ }
516
+
517
+
518
+
519
+
520
+
521
+ @media only screen and (max-width: 980px){
522
+
523
+ .col3 > li{
524
+
525
+ width: 80%;
526
+
527
+ margin: 0 auto 30px;
528
+
529
+ }
530
+
531
+ .header{
532
+
533
+ width: 80%;
534
+
535
+ margin-bottom: 30px;
536
+
537
+ }
538
+
539
+ .header h1 span{
540
+
541
+ padding: 0 15px;
542
+
543
+ }
544
+
545
+ #mainImg img{
546
+
547
+ margin-bottom: 0;
548
+
549
+ }
550
+
551
+ .innerS{
552
+
553
+ width: 80%;
554
+
555
+ padding-bottom: 30px;
556
+
557
+ }
558
+
559
+ }
560
+
561
+
562
+
563
+
564
+
565
+ @media only screen and (max-width: 799px){
566
+
567
+ #header{
568
+
569
+ position: fixed;
570
+
571
+ width: 100%;
572
+
573
+ z-index: 500;
574
+
575
+ }
576
+
577
+ #headerWrap{
578
+
579
+ position: relative;
580
+
581
+ width: 100%;
582
+
583
+ height: 70px;
584
+
585
+ background: #fff;
586
+
587
+ border-bottom: 1px solid #ccc;
588
+
589
+ }
590
+
591
+ #logo{
592
+
593
+ padding-top: 10px;
594
+
595
+ }
596
+
597
+ #logo img{
598
+
599
+ max-height: 45px;
600
+
601
+ width: auto !important;
602
+
603
+ transform: scale(1);
604
+
605
+ }
606
+
607
+ a#menu{
608
+
609
+ display: inline-block;
610
+
611
+ position: relative;
612
+
613
+ width: 40px;
614
+
615
+ height: 40px;
616
+
617
+ margin: 10px;
618
+
619
+ }
620
+
621
+
622
+
623
+ #menuBtn{
624
+
625
+ display: block;
626
+
627
+ position: absolute;
628
+
629
+ top: 50%;
630
+
631
+ left: 50%;
632
+
633
+ width: 18px;
634
+
635
+ height: 2px;
636
+
637
+ margin: -1px 0 0 -7px;
638
+
639
+ background: #000;
640
+
641
+ transition: .2s;
642
+
643
+ }
644
+
645
+ #menuBtn:before, #menuBtn:after{
646
+
647
+ display: block;
648
+
649
+ content: "";
650
+
651
+ position: absolute;
652
+
653
+ top: 50%;
654
+
655
+ left: 0;
656
+
657
+ width: 18px;
658
+
659
+ height: 2px;
660
+
661
+ background: #000;
662
+
663
+ transition: .3s;
664
+
665
+ }
666
+
667
+
668
+
669
+ #menuBtn:before{
670
+
671
+ margin-top: -7px;
672
+
673
+ }
674
+
675
+
676
+
677
+ #menuBtn:after{
678
+
679
+ margin-top: 5px;
680
+
681
+ }
682
+
683
+
684
+
685
+ a#menu .close{
686
+
687
+ background: transparent;
688
+
689
+ }
690
+
691
+
692
+
693
+ a#menu .close:before, a#menu .close:after{
694
+
695
+ margin-top: 0;
696
+
697
+ }
698
+
699
+
700
+
701
+ a#menu .close:before{
702
+
703
+ transform: rotate(-45deg);
704
+
705
+ -webkit-transform: rotate(-45deg);
706
+
707
+ }
708
+
709
+
710
+
711
+ a#menu .close:after{
712
+
713
+ transform: rotate(-135deg);
714
+
715
+ -webkit-transform: rotate(-135deg);
716
+
717
+ }
718
+
719
+
720
+
721
+ .panel{
722
+
723
+ width: 100%;
724
+
725
+ display: none;
726
+
727
+ overflow: hidden;
728
+
729
+ position: relative;
730
+
731
+ left: 0;
732
+
733
+ top: 0;
734
+
735
+ z-index: 100;
736
+
737
+ }
738
+
739
+ #mainnav{
740
+
741
+ position: absolute;
742
+
743
+ top: 0;
744
+
745
+ width: 100%;
746
+
747
+ text-align: right;
748
+
749
+ z-index:500;
750
+
751
+ }
752
+
753
+ #mainnav ul{
754
+
755
+ background: #fff;
756
+
757
+ text-align: left;
758
+
759
+ }
760
+
761
+ #mainnav ul ul li{
762
+
763
+ padding-left: 20px;
764
+
765
+ }
766
+
767
+
768
+
769
+ #mainnav li a{
770
+
771
+ position: relative;
772
+
773
+ display:block;
774
+
775
+ padding:15px 25px;
776
+
777
+ border-bottom: 1px solid #ccc;
778
+
779
+ color: #000;
780
+
781
+ font-weight: 400;
782
+
783
+ }
784
+
785
+ #mainnav li.menu-item-has-children a{
786
+
787
+ border-bottom: 0;
788
+
789
+ }
790
+
791
+ #mainnav li.menu-item-has-children{
792
+
793
+ border-bottom: 1px solid #ccc;
794
+
795
+ }
796
+
797
+ #mainnav li a:before{
798
+
799
+ display: block;
800
+
801
+ content: "";
802
+
803
+ position: absolute;
804
+
805
+ top: 50%;
806
+
807
+ left: 5px;
808
+
809
+ width: 6px;
810
+
811
+ height: 6px;
812
+
813
+ margin: -4px 0 0 0;
814
+
815
+ border-top: solid 2px #000;
816
+
817
+ border-right: solid 2px #000;
818
+
819
+ -webkit-transform: rotate(45deg);
820
+
821
+ transform: rotate(45deg);
822
+
823
+ }
824
+
825
+ #mainImg{
826
+
827
+ padding-top: 70px;
828
+
829
+ z-index: -100;
830
+
831
+ }
832
+
833
+ section{
834
+
835
+ padding-top: 100px;
836
+
837
+ }
838
+
839
+ section#toppage{
840
+
841
+ padding-top: 30px;
842
+
843
+ }
844
+
845
+ section h2{
846
+
847
+ margin: 0 auto 20px;
848
+
849
+ }
850
+
851
+ section h2 span {
852
+
853
+ padding: 0 30px;
854
+
855
+ }
856
+
857
+ .alignright, .alignleft{
858
+
859
+ float: none;
860
+
861
+ display: block;
862
+
863
+ margin: 10px auto;
864
+
865
+ }
866
+
867
+ }
868
+
869
+ ```
870
+
871
+
872
+
93
873
  ### 試したこと
94
874
 
95
875