teratail
回答率
85.36%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問The image #~ couldn't be loadedとなり解決できないので助けてください????

編集履歴

質問編集履歴

6

内容詳細の修正

2020/12/28 09:11

投稿

ryryryry
ryryryry

スコア1

test CHANGED
File without changes
test CHANGED
@@ -336,10 +336,146 @@
336
336
 
337
337
  ```
338
338
 
339
- ###scripts.js
339
+ ###scripts.js -new-
340
340
 
341
341
  ```javascript
342
342
 
343
+ (function($) {
344
+
345
+ "use strict"; // Start of use strict
346
+
347
+
348
+
349
+ // Smooth scrolling using jQuery easing
350
+
351
+ $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
352
+
353
+ if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) {
354
+
355
+ var target = $(this.hash);
356
+
357
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
358
+
359
+ if (target.length) {
360
+
361
+ $('html, body').animate({
362
+
363
+ scrollTop: (target.offset().top - 72)
364
+
365
+ }, 1000, "easeInOutExpo");
366
+
367
+ return false;
368
+
369
+ }
370
+
371
+ }
372
+
373
+ });
374
+
375
+
376
+
377
+ // Closes responsive menu when a scroll trigger link is clicked
378
+
379
+ $('.js-scroll-trigger').click(function() {
380
+
381
+ $('.navbar-collapse').collapse('hide');
382
+
383
+ });
384
+
385
+
386
+
387
+ // Activate scrollspy to add active class to navbar items on scroll
388
+
389
+ $('body').scrollspy({
390
+
391
+ target: '#mainNav',
392
+
393
+ offset: 75
394
+
395
+ });
396
+
397
+
398
+
399
+ // Collapse Navbar
400
+
401
+ var navbarCollapse = function() {
402
+
403
+ if ($("#mainNav").offset().top > 100) {
404
+
405
+ $("#mainNav").addClass("navbar-scrolled");
406
+
407
+ } else {
408
+
409
+ $("#mainNav").removeClass("navbar-scrolled");
410
+
411
+ }
412
+
413
+ };
414
+
415
+ // Collapse now if page is not at top
416
+
417
+ navbarCollapse();
418
+
419
+ // Collapse the navbar when page is scrolled
420
+
421
+ $(window).scroll(navbarCollapse);
422
+
423
+
424
+
425
+ // Magnific popup calls
426
+
427
+ $('#portfolio').magnificPopup({
428
+
429
+ delegate: 'a',
430
+
431
+ type: 'image',
432
+
433
+ tLoading: 'Loading image #%curr%...',
434
+
435
+ mainClass: 'mfp-img-mobile',
436
+
437
+ gallery: {
438
+
439
+ enabled: true,
440
+
441
+ navigateByImgClick: true,
442
+
443
+ preload: [0, 1]
444
+
445
+ },
446
+
447
+ image: {
448
+
449
+ tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
450
+
451
+ }
452
+
453
+ });
454
+
455
+ })(jQuery); // End of use strict
456
+
457
+ $(".hover").mouseleave(
458
+
459
+ function () {
460
+
461
+ $(this).removeClass("hover");
462
+
463
+ }
464
+
465
+ );
466
+
467
+ $('#test').on('click', function(e){
468
+
469
+ e.stopPropagation();
470
+
471
+ })
472
+
473
+ ```
474
+
475
+ ###scripts.js -old-
476
+
477
+ ```javascript
478
+
343
479
  (function($) {
344
480
 
345
481
  "use strict"; // Start of use strict

5

ハッシュタグ追記

2020/12/28 09:11

投稿

ryryryry
ryryryry

スコア1

test CHANGED
File without changes
test CHANGED
File without changes

4

内容詳細の修正

2020/12/28 02:20

投稿

ryryryry
ryryryry

スコア1

test CHANGED
File without changes
test CHANGED
@@ -14,27 +14,59 @@
14
14
 
15
15
  ```html
16
16
 
17
+ <!-- Portfolio-->
18
+
19
+ <section class="page-section bg-dark" id="portfolio">
20
+
21
+
22
+
23
+ <!-- Call to action-->
24
+
25
+ <div class="container">
26
+
27
+ <div class="row justify-content-center">
28
+
29
+ <div class="col-lg-8 text-center">
30
+
31
+ <h2 class="text-white mt-0">ああああ</h2>
32
+
33
+ <hr class="divider my-4" />
34
+
35
+ <p class="text-white-50 mb-4">ああああ(</p>
36
+
37
+ </div>
38
+
39
+ </div>
40
+
41
+ <div class="row justify-content-center">
42
+
43
+ <div class="col-lg-4 col-sm-6">
44
+
45
+ <!-- hover effect 1(start) -->
46
+
17
- <figure class="snip1200">
47
+ <figure class="snip1200">
18
-
48
+
19
- <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample27.jpg" alt="sq-sample27" />
49
+ <img src="<?php echo get_template_directory_uri(); ?>/assets/img2/sq-sample27.jpg" alt="sq-sample27" />
20
-
50
+
21
- <figcaption>
51
+ <figcaption>
22
-
52
+
23
- <p>I say, if your knees aren't green by the end of the day, you ought to seriously re-examine your life.</p>
53
+ <p>I say, if your knees aren't green by the end of the day, you ought to seriously re-examine your life.</p>
24
-
54
+
25
- <div class="heading">
55
+ <div class="heading">
26
-
56
+
27
- <h2>My<span>Hobby</span></h2>
57
+ <h2><span>Cafe</span></h2>
28
-
58
+
29
- </div>
59
+ </div>
30
-
60
+
31
- </figcaption>
61
+ </figcaption>
32
-
62
+
33
- <a href="#"></a>
63
+ <a href="#"></a>
34
-
64
+
35
- </figure>
65
+ </figure>
66
+
36
-
67
+ <!-- hover effect 1(end)-->
68
+
37
-
69
+ </div>
38
70
 
39
71
  ```
40
72
 

3

内容詳細の修正

2020/12/27 10:29

投稿

ryryryry
ryryryry

スコア1

test CHANGED
File without changes
test CHANGED
@@ -40,7 +40,7 @@
40
40
 
41
41
  ###header.php
42
42
 
43
- ```html
43
+ ```php
44
44
 
45
45
  <?php
46
46
 
@@ -80,368 +80,366 @@
80
80
 
81
81
  ###styles.css
82
82
 
83
-
83
+ ```css
84
+
85
+ @import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
86
+
87
+ figure.snip1200 {
88
+
89
+ font-family: 'Raleway', Arial, sans-serif;
90
+
91
+ position: relative;
92
+
93
+ overflow: hidden;
94
+
95
+ margin: 10px;
96
+
97
+ min-width: 220px;
98
+
99
+ max-width: 310px;
100
+
101
+ max-height: 310px;
102
+
103
+ width: 100%;
104
+
105
+ background: #000000;
106
+
107
+ color: #ffffff;
108
+
109
+ text-align: center;
110
+
111
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
112
+
113
+ font-size: 16px;
114
+
115
+ }
116
+
117
+ figure.snip1200 * {
118
+
119
+ -webkit-box-sizing: border-box;
120
+
121
+ box-sizing: border-box;
122
+
123
+ -webkit-transition: all 0.45s ease-in-out;
124
+
125
+ transition: all 0.45s ease-in-out;
126
+
127
+ }
128
+
129
+ figure.snip1200 img {
130
+
131
+ max-width: 100%;
132
+
133
+ position: relative;
134
+
135
+ opacity: 0.9;
136
+
137
+ }
138
+
139
+ figure.snip1200 figcaption {
140
+
141
+ position: absolute;
142
+
143
+ top: 45%;
144
+
145
+ left: 7%;
146
+
147
+ right: 7%;
148
+
149
+ bottom: 45%;
150
+
151
+ border: 1px solid white;
152
+
153
+ border-width: 1px 1px 0;
154
+
155
+ }
156
+
157
+ figure.snip1200 .heading {
158
+
159
+ overflow: hidden;
160
+
161
+ -webkit-transform: translateY(50%);
162
+
163
+ transform: translateY(50%);
164
+
165
+ position: absolute;
166
+
167
+ bottom: 0;
168
+
169
+ width: 100%;
170
+
171
+ }
172
+
173
+ figure.snip1200 h2 {
174
+
175
+ display: table;
176
+
177
+ margin: 0 auto;
178
+
179
+ padding: 0 10px;
180
+
181
+ position: relative;
182
+
183
+ text-align: center;
184
+
185
+ width: auto;
186
+
187
+ text-transform: uppercase;
188
+
189
+ font-weight: 400;
190
+
191
+ }
192
+
193
+ figure.snip1200 h2 span {
194
+
195
+ font-weight: 800;
196
+
197
+ }
198
+
199
+ figure.snip1200 h2:before,
200
+
201
+ figure.snip1200 h2:after {
202
+
203
+ position: absolute;
204
+
205
+ display: block;
206
+
207
+ width: 1000%;
208
+
209
+ height: 1px;
210
+
211
+ content: '';
212
+
213
+ background: white;
214
+
215
+ top: 50%;
216
+
217
+ }
218
+
219
+ figure.snip1200 h2:before {
220
+
221
+ left: -1000%;
222
+
223
+ }
224
+
225
+ figure.snip1200 h2:after {
226
+
227
+ right: -1000%;
228
+
229
+ }
230
+
231
+ figure.snip1200 p {
232
+
233
+ top: 50%;
234
+
235
+ -webkit-transform: translateY(-50%);
236
+
237
+ transform: translateY(-50%);
238
+
239
+ position: absolute;
240
+
241
+ width: 100%;
242
+
243
+ padding: 0 20px;
244
+
245
+ margin: 0;
246
+
247
+ opacity: 0;
248
+
249
+ line-height: 1.6em;
250
+
251
+ font-size: 0.9em;
252
+
253
+ }
254
+
255
+ figure.snip1200 a {
256
+
257
+ left: 0;
258
+
259
+ right: 0;
260
+
261
+ top: 0;
262
+
263
+ bottom: 0;
264
+
265
+ position: absolute;
266
+
267
+ z-index: 1;
268
+
269
+ }
270
+
271
+ figure.snip1200:hover img,
272
+
273
+ figure.snip1200.hover img {
274
+
275
+ opacity: 0.25;
276
+
277
+ -webkit-transform: scale(1.1);
278
+
279
+ transform: scale(1.1);
280
+
281
+ }
282
+
283
+ figure.snip1200:hover figcaption,
284
+
285
+ figure.snip1200.hover figcaption {
286
+
287
+ top: 7%;
288
+
289
+ bottom: 7%;
290
+
291
+ }
292
+
293
+ figure.snip1200:hover p,
294
+
295
+ figure.snip1200.hover p {
296
+
297
+ opacity: 1;
298
+
299
+ -webkit-transition-delay: 0.35s;
300
+
301
+ transition-delay: 0.35s;
302
+
303
+ }
84
304
 
85
305
  ```
86
306
 
87
- @import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
88
-
89
- figure.snip1200 {
90
-
91
- font-family: 'Raleway', Arial, sans-serif;
92
-
93
- position: relative;
94
-
95
- overflow: hidden;
96
-
97
- margin: 10px;
98
-
99
- min-width: 220px;
100
-
101
- max-width: 310px;
102
-
103
- max-height: 310px;
104
-
105
- width: 100%;
106
-
107
- background: #000000;
108
-
109
- color: #ffffff;
110
-
111
- text-align: center;
112
-
113
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
114
-
115
- font-size: 16px;
116
-
117
- }
118
-
119
- figure.snip1200 * {
120
-
121
- -webkit-box-sizing: border-box;
122
-
123
- box-sizing: border-box;
124
-
125
- -webkit-transition: all 0.45s ease-in-out;
126
-
127
- transition: all 0.45s ease-in-out;
128
-
129
- }
130
-
131
- figure.snip1200 img {
132
-
133
- max-width: 100%;
134
-
135
- position: relative;
136
-
137
- opacity: 0.9;
138
-
139
- }
140
-
141
- figure.snip1200 figcaption {
142
-
143
- position: absolute;
144
-
145
- top: 45%;
146
-
147
- left: 7%;
148
-
149
- right: 7%;
150
-
151
- bottom: 45%;
152
-
153
- border: 1px solid white;
154
-
155
- border-width: 1px 1px 0;
156
-
157
- }
158
-
159
- figure.snip1200 .heading {
160
-
161
- overflow: hidden;
162
-
163
- -webkit-transform: translateY(50%);
164
-
165
- transform: translateY(50%);
166
-
167
- position: absolute;
168
-
169
- bottom: 0;
170
-
171
- width: 100%;
172
-
173
- }
174
-
175
- figure.snip1200 h2 {
176
-
177
- display: table;
178
-
179
- margin: 0 auto;
180
-
181
- padding: 0 10px;
182
-
183
- position: relative;
184
-
185
- text-align: center;
186
-
187
- width: auto;
188
-
189
- text-transform: uppercase;
190
-
191
- font-weight: 400;
192
-
193
- }
194
-
195
- figure.snip1200 h2 span {
196
-
197
- font-weight: 800;
198
-
199
- }
200
-
201
- figure.snip1200 h2:before,
202
-
203
- figure.snip1200 h2:after {
204
-
205
- position: absolute;
206
-
207
- display: block;
208
-
209
- width: 1000%;
210
-
211
- height: 1px;
212
-
213
- content: '';
214
-
215
- background: white;
216
-
217
- top: 50%;
218
-
219
- }
220
-
221
- figure.snip1200 h2:before {
222
-
223
- left: -1000%;
224
-
225
- }
226
-
227
- figure.snip1200 h2:after {
228
-
229
- right: -1000%;
230
-
231
- }
232
-
233
- figure.snip1200 p {
234
-
235
- top: 50%;
236
-
237
- -webkit-transform: translateY(-50%);
238
-
239
- transform: translateY(-50%);
240
-
241
- position: absolute;
242
-
243
- width: 100%;
244
-
245
- padding: 0 20px;
246
-
247
- margin: 0;
248
-
249
- opacity: 0;
250
-
251
- line-height: 1.6em;
252
-
253
- font-size: 0.9em;
254
-
255
- }
256
-
257
- figure.snip1200 a {
258
-
259
- left: 0;
260
-
261
- right: 0;
262
-
263
- top: 0;
264
-
265
- bottom: 0;
266
-
267
- position: absolute;
268
-
269
- z-index: 1;
270
-
271
- }
272
-
273
- figure.snip1200:hover img,
274
-
275
- figure.snip1200.hover img {
276
-
277
- opacity: 0.25;
278
-
279
- -webkit-transform: scale(1.1);
280
-
281
- transform: scale(1.1);
282
-
283
- }
284
-
285
- figure.snip1200:hover figcaption,
286
-
287
- figure.snip1200.hover figcaption {
288
-
289
- top: 7%;
290
-
291
- bottom: 7%;
292
-
293
- }
294
-
295
- figure.snip1200:hover p,
296
-
297
- figure.snip1200.hover p {
298
-
299
- opacity: 1;
300
-
301
- -webkit-transition-delay: 0.35s;
302
-
303
- transition-delay: 0.35s;
304
-
305
- }
307
+ ###scripts.js
308
+
309
+ ```javascript
310
+
311
+ (function($) {
312
+
313
+ "use strict"; // Start of use strict
314
+
315
+
316
+
317
+ // Smooth scrolling using jQuery easing
318
+
319
+ $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
320
+
321
+ if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) {
322
+
323
+ var target = $(this.hash);
324
+
325
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
326
+
327
+ if (target.length) {
328
+
329
+ $('html, body').animate({
330
+
331
+ scrollTop: (target.offset().top - 72)
332
+
333
+ }, 1000, "easeInOutExpo");
334
+
335
+ return false;
336
+
337
+ }
338
+
339
+ }
340
+
341
+ });
342
+
343
+
344
+
345
+ // Closes responsive menu when a scroll trigger link is clicked
346
+
347
+ $('.js-scroll-trigger').click(function() {
348
+
349
+ $('.navbar-collapse').collapse('hide');
350
+
351
+ });
352
+
353
+
354
+
355
+ // Activate scrollspy to add active class to navbar items on scroll
356
+
357
+ $('body').scrollspy({
358
+
359
+ target: '#mainNav',
360
+
361
+ offset: 75
362
+
363
+ });
364
+
365
+
366
+
367
+ // Collapse Navbar
368
+
369
+ var navbarCollapse = function() {
370
+
371
+ if ($("#mainNav").offset().top > 100) {
372
+
373
+ $("#mainNav").addClass("navbar-scrolled");
374
+
375
+ } else {
376
+
377
+ $("#mainNav").removeClass("navbar-scrolled");
378
+
379
+ }
380
+
381
+ };
382
+
383
+ // Collapse now if page is not at top
384
+
385
+ navbarCollapse();
386
+
387
+ // Collapse the navbar when page is scrolled
388
+
389
+ $(window).scroll(navbarCollapse);
390
+
391
+
392
+
393
+ // Magnific popup calls
394
+
395
+ $('#portfolio').magnificPopup({
396
+
397
+ delegate: 'a',
398
+
399
+ type: 'image',
400
+
401
+ tLoading: 'Loading image #%curr%...',
402
+
403
+ mainClass: 'mfp-img-mobile',
404
+
405
+ gallery: {
406
+
407
+ enabled: true,
408
+
409
+ navigateByImgClick: true,
410
+
411
+ preload: [0, 1]
412
+
413
+ },
414
+
415
+ image: {
416
+
417
+ tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
418
+
419
+ }
420
+
421
+ });
422
+
423
+
424
+
425
+ })(jQuery); // End of use strict
426
+
427
+
306
428
 
307
429
  ```
308
430
 
309
- ###scripts.js
431
+ ###common.js
310
432
 
311
433
  ```javascript
312
434
 
435
+ $(".hover").mouseleave(
436
+
313
- (function($) {
437
+ function () {
314
-
315
- "use strict"; // Start of use strict
438
+
316
-
317
-
318
-
319
- // Smooth scrolling using jQuery easing
320
-
321
- $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
322
-
323
- if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) {
324
-
325
- var target = $(this.hash);
326
-
327
- target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
328
-
329
- if (target.length) {
330
-
331
- $('html, body').animate({
332
-
333
- scrollTop: (target.offset().top - 72)
334
-
335
- }, 1000, "easeInOutExpo");
439
+ $(this).removeClass("hover");
336
-
337
- return false;
338
-
339
- }
340
440
 
341
441
  }
342
442
 
343
- });
443
+ );
344
-
345
-
346
-
347
- // Closes responsive menu when a scroll trigger link is clicked
348
-
349
- $('.js-scroll-trigger').click(function() {
350
-
351
- $('.navbar-collapse').collapse('hide');
352
-
353
- });
354
-
355
-
356
-
357
- // Activate scrollspy to add active class to navbar items on scroll
358
-
359
- $('body').scrollspy({
360
-
361
- target: '#mainNav',
362
-
363
- offset: 75
364
-
365
- });
366
-
367
-
368
-
369
- // Collapse Navbar
370
-
371
- var navbarCollapse = function() {
372
-
373
- if ($("#mainNav").offset().top > 100) {
374
-
375
- $("#mainNav").addClass("navbar-scrolled");
376
-
377
- } else {
378
-
379
- $("#mainNav").removeClass("navbar-scrolled");
380
-
381
- }
382
-
383
- };
384
-
385
- // Collapse now if page is not at top
386
-
387
- navbarCollapse();
388
-
389
- // Collapse the navbar when page is scrolled
390
-
391
- $(window).scroll(navbarCollapse);
392
-
393
-
394
-
395
- // Magnific popup calls
396
-
397
- $('#portfolio').magnificPopup({
398
-
399
- delegate: 'a',
400
-
401
- type: 'image',
402
-
403
- tLoading: 'Loading image #%curr%...',
404
-
405
- mainClass: 'mfp-img-mobile',
406
-
407
- gallery: {
408
-
409
- enabled: true,
410
-
411
- navigateByImgClick: true,
412
-
413
- preload: [0, 1]
414
-
415
- },
416
-
417
- image: {
418
-
419
- tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
420
-
421
- }
422
-
423
- });
424
-
425
-
426
-
427
- })(jQuery); // End of use strict
428
-
429
-
430
444
 
431
445
  ```
432
-
433
- ###common.js
434
-
435
- ```javascript
436
-
437
- $(".hover").mouseleave(
438
-
439
- function () {
440
-
441
- $(this).removeClass("hover");
442
-
443
- }
444
-
445
- );
446
-
447
- ```

2

内容詳細の修正

2020/12/27 10:03

投稿

ryryryry
ryryryry

スコア1

test CHANGED
File without changes
test CHANGED
@@ -10,49 +10,65 @@
10
10
 
11
11
 
12
12
 
13
-
14
-
15
- =index.php=
13
+ ###index.php
14
+
15
+ ```html
16
16
 
17
17
  <figure class="snip1200">
18
18
 
19
- <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample27.jpg" alt="sq-sample27" />
19
+ <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample27.jpg" alt="sq-sample27" />
20
-
20
+
21
- <figcaption>
21
+ <figcaption>
22
-
22
+
23
- <p>I say, if your knees aren't green by the end of the day, you ought to seriously re-examine your life.</p>
23
+ <p>I say, if your knees aren't green by the end of the day, you ought to seriously re-examine your life.</p>
24
-
24
+
25
- <div class="heading">
25
+ <div class="heading">
26
-
26
+
27
- <h2>My<span>Hobby</span></h2>
27
+ <h2>My<span>Hobby</span></h2>
28
-
28
+
29
- </div>
29
+ </div>
30
-
30
+
31
- </figcaption>
31
+ </figcaption>
32
-
32
+
33
- <a href="#"></a>
33
+ <a href="#"></a>
34
34
 
35
35
  </figure>
36
36
 
37
37
 
38
38
 
39
+ ```
40
+
39
- =funtions.php=
41
+ ###header.php
42
+
43
+ ```html
40
44
 
41
45
  <?php
42
46
 
43
47
  function twpp_enqueue_scripts() {
44
48
 
45
- wp_enqueue_script(
49
+ wp_enqueue_script(
46
-
50
+
47
- 'scripts-script',
51
+ 'scripts-script',
48
-
52
+
49
- get_template_directory_uri() . '/js/scripts.js'
53
+ get_template_directory_uri() . '/js/scripts.js',
50
-
54
+
51
- );
55
+ );
56
+
52
-
57
+ wp_enqueue_script(
58
+
59
+ 'common-script',
60
+
61
+ get_template_directory_uri() . '/js/common.js',
62
+
63
+ array( 'scripts-script' )
64
+
65
+ false,
66
+
67
+ ​true
68
+
69
+ );
70
+
53
- }
71
+ }
54
-
55
-
56
72
 
57
73
  add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );
58
74
 
@@ -60,7 +76,13 @@
60
76
 
61
77
 
62
78
 
79
+ ```
80
+
63
- =styles.css=
81
+ ###styles.css
82
+
83
+
84
+
85
+ ```
64
86
 
65
87
  @import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
66
88
 
@@ -282,38 +304,144 @@
282
304
 
283
305
  }
284
306
 
285
-
286
-
287
- = header.php =
288
-
289
- <?php
290
-
291
- function twpp_enqueue_scripts() {
292
-
293
- wp_enqueue_script(
294
-
295
- 'scripts-script',
296
-
297
- get_template_directory_uri() . '/js/scripts.js',
298
-
299
- );
300
-
301
- wp_enqueue_script(
302
-
303
- 'common-script',
304
-
305
- get_template_directory_uri() . '/js/common.js',
306
-
307
- array( 'scripts-script' )
308
-
309
- false,
310
-
311
- ​true
312
-
313
- );
314
-
315
- }
316
-
317
- add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );
318
-
319
- ?>
307
+ ```
308
+
309
+ ###scripts.js
310
+
311
+ ```javascript
312
+
313
+ (function($) {
314
+
315
+ "use strict"; // Start of use strict
316
+
317
+
318
+
319
+ // Smooth scrolling using jQuery easing
320
+
321
+ $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
322
+
323
+ if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) {
324
+
325
+ var target = $(this.hash);
326
+
327
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
328
+
329
+ if (target.length) {
330
+
331
+ $('html, body').animate({
332
+
333
+ scrollTop: (target.offset().top - 72)
334
+
335
+ }, 1000, "easeInOutExpo");
336
+
337
+ return false;
338
+
339
+ }
340
+
341
+ }
342
+
343
+ });
344
+
345
+
346
+
347
+ // Closes responsive menu when a scroll trigger link is clicked
348
+
349
+ $('.js-scroll-trigger').click(function() {
350
+
351
+ $('.navbar-collapse').collapse('hide');
352
+
353
+ });
354
+
355
+
356
+
357
+ // Activate scrollspy to add active class to navbar items on scroll
358
+
359
+ $('body').scrollspy({
360
+
361
+ target: '#mainNav',
362
+
363
+ offset: 75
364
+
365
+ });
366
+
367
+
368
+
369
+ // Collapse Navbar
370
+
371
+ var navbarCollapse = function() {
372
+
373
+ if ($("#mainNav").offset().top > 100) {
374
+
375
+ $("#mainNav").addClass("navbar-scrolled");
376
+
377
+ } else {
378
+
379
+ $("#mainNav").removeClass("navbar-scrolled");
380
+
381
+ }
382
+
383
+ };
384
+
385
+ // Collapse now if page is not at top
386
+
387
+ navbarCollapse();
388
+
389
+ // Collapse the navbar when page is scrolled
390
+
391
+ $(window).scroll(navbarCollapse);
392
+
393
+
394
+
395
+ // Magnific popup calls
396
+
397
+ $('#portfolio').magnificPopup({
398
+
399
+ delegate: 'a',
400
+
401
+ type: 'image',
402
+
403
+ tLoading: 'Loading image #%curr%...',
404
+
405
+ mainClass: 'mfp-img-mobile',
406
+
407
+ gallery: {
408
+
409
+ enabled: true,
410
+
411
+ navigateByImgClick: true,
412
+
413
+ preload: [0, 1]
414
+
415
+ },
416
+
417
+ image: {
418
+
419
+ tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
420
+
421
+ }
422
+
423
+ });
424
+
425
+
426
+
427
+ })(jQuery); // End of use strict
428
+
429
+
430
+
431
+ ```
432
+
433
+ ###common.js
434
+
435
+ ```javascript
436
+
437
+ $(".hover").mouseleave(
438
+
439
+ function () {
440
+
441
+ $(this).removeClass("hover");
442
+
443
+ }
444
+
445
+ );
446
+
447
+ ```

1

内容詳細の修正

2020/12/27 10:02

投稿

ryryryry
ryryryry

スコア1

test CHANGED
File without changes
test CHANGED
@@ -7,3 +7,313 @@
7
7
 
8
8
 
9
9
  もし、わかる方いましたら教えいただきますと助かります。お願いします！！
10
+
11
+
12
+
13
+
14
+
15
+ =index.php=
16
+
17
+ <figure class="snip1200">
18
+
19
+ <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample27.jpg" alt="sq-sample27" />
20
+
21
+ <figcaption>
22
+
23
+ <p>I say, if your knees aren't green by the end of the day, you ought to seriously re-examine your life.</p>
24
+
25
+ <div class="heading">
26
+
27
+ <h2>My<span>Hobby</span></h2>
28
+
29
+ </div>
30
+
31
+ </figcaption>
32
+
33
+ <a href="#"></a>
34
+
35
+ </figure>
36
+
37
+
38
+
39
+ =funtions.php=
40
+
41
+ <?php
42
+
43
+ function twpp_enqueue_scripts() {
44
+
45
+ wp_enqueue_script(
46
+
47
+ 'scripts-script',
48
+
49
+ get_template_directory_uri() . '/js/scripts.js'
50
+
51
+ );
52
+
53
+ }
54
+
55
+
56
+
57
+ add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );
58
+
59
+ ?>
60
+
61
+
62
+
63
+ =styles.css=
64
+
65
+ @import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
66
+
67
+ figure.snip1200 {
68
+
69
+ font-family: 'Raleway', Arial, sans-serif;
70
+
71
+ position: relative;
72
+
73
+ overflow: hidden;
74
+
75
+ margin: 10px;
76
+
77
+ min-width: 220px;
78
+
79
+ max-width: 310px;
80
+
81
+ max-height: 310px;
82
+
83
+ width: 100%;
84
+
85
+ background: #000000;
86
+
87
+ color: #ffffff;
88
+
89
+ text-align: center;
90
+
91
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
92
+
93
+ font-size: 16px;
94
+
95
+ }
96
+
97
+ figure.snip1200 * {
98
+
99
+ -webkit-box-sizing: border-box;
100
+
101
+ box-sizing: border-box;
102
+
103
+ -webkit-transition: all 0.45s ease-in-out;
104
+
105
+ transition: all 0.45s ease-in-out;
106
+
107
+ }
108
+
109
+ figure.snip1200 img {
110
+
111
+ max-width: 100%;
112
+
113
+ position: relative;
114
+
115
+ opacity: 0.9;
116
+
117
+ }
118
+
119
+ figure.snip1200 figcaption {
120
+
121
+ position: absolute;
122
+
123
+ top: 45%;
124
+
125
+ left: 7%;
126
+
127
+ right: 7%;
128
+
129
+ bottom: 45%;
130
+
131
+ border: 1px solid white;
132
+
133
+ border-width: 1px 1px 0;
134
+
135
+ }
136
+
137
+ figure.snip1200 .heading {
138
+
139
+ overflow: hidden;
140
+
141
+ -webkit-transform: translateY(50%);
142
+
143
+ transform: translateY(50%);
144
+
145
+ position: absolute;
146
+
147
+ bottom: 0;
148
+
149
+ width: 100%;
150
+
151
+ }
152
+
153
+ figure.snip1200 h2 {
154
+
155
+ display: table;
156
+
157
+ margin: 0 auto;
158
+
159
+ padding: 0 10px;
160
+
161
+ position: relative;
162
+
163
+ text-align: center;
164
+
165
+ width: auto;
166
+
167
+ text-transform: uppercase;
168
+
169
+ font-weight: 400;
170
+
171
+ }
172
+
173
+ figure.snip1200 h2 span {
174
+
175
+ font-weight: 800;
176
+
177
+ }
178
+
179
+ figure.snip1200 h2:before,
180
+
181
+ figure.snip1200 h2:after {
182
+
183
+ position: absolute;
184
+
185
+ display: block;
186
+
187
+ width: 1000%;
188
+
189
+ height: 1px;
190
+
191
+ content: '';
192
+
193
+ background: white;
194
+
195
+ top: 50%;
196
+
197
+ }
198
+
199
+ figure.snip1200 h2:before {
200
+
201
+ left: -1000%;
202
+
203
+ }
204
+
205
+ figure.snip1200 h2:after {
206
+
207
+ right: -1000%;
208
+
209
+ }
210
+
211
+ figure.snip1200 p {
212
+
213
+ top: 50%;
214
+
215
+ -webkit-transform: translateY(-50%);
216
+
217
+ transform: translateY(-50%);
218
+
219
+ position: absolute;
220
+
221
+ width: 100%;
222
+
223
+ padding: 0 20px;
224
+
225
+ margin: 0;
226
+
227
+ opacity: 0;
228
+
229
+ line-height: 1.6em;
230
+
231
+ font-size: 0.9em;
232
+
233
+ }
234
+
235
+ figure.snip1200 a {
236
+
237
+ left: 0;
238
+
239
+ right: 0;
240
+
241
+ top: 0;
242
+
243
+ bottom: 0;
244
+
245
+ position: absolute;
246
+
247
+ z-index: 1;
248
+
249
+ }
250
+
251
+ figure.snip1200:hover img,
252
+
253
+ figure.snip1200.hover img {
254
+
255
+ opacity: 0.25;
256
+
257
+ -webkit-transform: scale(1.1);
258
+
259
+ transform: scale(1.1);
260
+
261
+ }
262
+
263
+ figure.snip1200:hover figcaption,
264
+
265
+ figure.snip1200.hover figcaption {
266
+
267
+ top: 7%;
268
+
269
+ bottom: 7%;
270
+
271
+ }
272
+
273
+ figure.snip1200:hover p,
274
+
275
+ figure.snip1200.hover p {
276
+
277
+ opacity: 1;
278
+
279
+ -webkit-transition-delay: 0.35s;
280
+
281
+ transition-delay: 0.35s;
282
+
283
+ }
284
+
285
+
286
+
287
+ = header.php =
288
+
289
+ <?php
290
+
291
+ function twpp_enqueue_scripts() {
292
+
293
+ wp_enqueue_script(
294
+
295
+ 'scripts-script',
296
+
297
+ get_template_directory_uri() . '/js/scripts.js',
298
+
299
+ );
300
+
301
+ wp_enqueue_script(
302
+
303
+ 'common-script',
304
+
305
+ get_template_directory_uri() . '/js/common.js',
306
+
307
+ array( 'scripts-script' )
308
+
309
+ false,
310
+
311
+ ​true
312
+
313
+ );
314
+
315
+ }
316
+
317
+ add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );
318
+
319
+ ?>