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

編集履歴

質問編集履歴

6

内容詳細の修正

2020/12/28 09:11

投稿

ryryryry
ryryryry

スコア1

title CHANGED
File without changes
body CHANGED
@@ -167,8 +167,76 @@
167
167
  transition-delay: 0.35s;
168
168
  }
169
169
  ```
170
- ###scripts.js
170
+ ###scripts.js -new-
171
171
  ```javascript
172
+ (function($) {
173
+ "use strict"; // Start of use strict
174
+
175
+ // Smooth scrolling using jQuery easing
176
+ $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
177
+ if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) {
178
+ var target = $(this.hash);
179
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
180
+ if (target.length) {
181
+ $('html, body').animate({
182
+ scrollTop: (target.offset().top - 72)
183
+ }, 1000, "easeInOutExpo");
184
+ return false;
185
+ }
186
+ }
187
+ });
188
+
189
+ // Closes responsive menu when a scroll trigger link is clicked
190
+ $('.js-scroll-trigger').click(function() {
191
+ $('.navbar-collapse').collapse('hide');
192
+ });
193
+
194
+ // Activate scrollspy to add active class to navbar items on scroll
195
+ $('body').scrollspy({
196
+ target: '#mainNav',
197
+ offset: 75
198
+ });
199
+
200
+ // Collapse Navbar
201
+ var navbarCollapse = function() {
202
+ if ($("#mainNav").offset().top > 100) {
203
+ $("#mainNav").addClass("navbar-scrolled");
204
+ } else {
205
+ $("#mainNav").removeClass("navbar-scrolled");
206
+ }
207
+ };
208
+ // Collapse now if page is not at top
209
+ navbarCollapse();
210
+ // Collapse the navbar when page is scrolled
211
+ $(window).scroll(navbarCollapse);
212
+
213
+ // Magnific popup calls
214
+ $('#portfolio').magnificPopup({
215
+ delegate: 'a',
216
+ type: 'image',
217
+ tLoading: 'Loading image #%curr%...',
218
+ mainClass: 'mfp-img-mobile',
219
+ gallery: {
220
+ enabled: true,
221
+ navigateByImgClick: true,
222
+ preload: [0, 1]
223
+ },
224
+ image: {
225
+ tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
226
+ }
227
+ });
228
+ })(jQuery); // End of use strict
229
+ $(".hover").mouseleave(
230
+ function () {
231
+ $(this).removeClass("hover");
232
+ }
233
+ );
234
+ $('#test').on('click', function(e){
235
+ e.stopPropagation();
236
+ })
237
+ ```
238
+ ###scripts.js -old-
239
+ ```javascript
172
240
  (function($) {
173
241
  "use strict"; // Start of use strict
174
242
 

5

ハッシュタグ追記

2020/12/28 09:11

投稿

ryryryry
ryryryry

スコア1

title CHANGED
File without changes
body CHANGED
File without changes

4

内容詳細の修正

2020/12/28 02:20

投稿

ryryryry
ryryryry

スコア1

title CHANGED
File without changes
body CHANGED
@@ -6,17 +6,33 @@
6
6
 
7
7
  ###index.php
8
8
  ```html
9
- <figure class="snip1200">
10
- <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample27.jpg" alt="sq-sample27" />
11
- <figcaption>
9
+ <!-- Portfolio-->
12
- <p>I say, if your knees aren't green by the end of the day, you ought to seriously re-examine your life.</p>
13
- <div class="heading">
10
+ <section class="page-section bg-dark" id="portfolio">
14
- <h2>My<span>Hobby</span></h2>
15
- </div>
16
- </figcaption>
17
- <a href="#"></a>
18
- </figure>
19
11
 
12
+ <!-- Call to action-->
13
+ <div class="container">
14
+ <div class="row justify-content-center">
15
+ <div class="col-lg-8 text-center">
16
+ <h2 class="text-white mt-0">ああああ</h2>
17
+ <hr class="divider my-4" />
18
+ <p class="text-white-50 mb-4">ああああ(</p>
19
+ </div>
20
+ </div>
21
+ <div class="row justify-content-center">
22
+ <div class="col-lg-4 col-sm-6">
23
+ <!-- hover effect 1(start) -->
24
+ <figure class="snip1200">
25
+ <img src="<?php echo get_template_directory_uri(); ?>/assets/img2/sq-sample27.jpg" alt="sq-sample27" />
26
+ <figcaption>
27
+ <p>I say, if your knees aren't green by the end of the day, you ought to seriously re-examine your life.</p>
28
+ <div class="heading">
29
+ <h2><span>Cafe</span></h2>
30
+ </div>
31
+ </figcaption>
32
+ <a href="#"></a>
33
+ </figure>
34
+ <!-- hover effect 1(end)-->
35
+ </div>
20
36
  ```
21
37
  ###header.php
22
38
  ```php

3

内容詳細の修正

2020/12/27 10:29

投稿

ryryryry
ryryryry

スコア1

title CHANGED
File without changes
body CHANGED
@@ -19,7 +19,7 @@
19
19
 
20
20
  ```
21
21
  ###header.php
22
- ```html
22
+ ```php
23
23
  <?php
24
24
  function twpp_enqueue_scripts() {
25
25
  wp_enqueue_script(
@@ -39,8 +39,7 @@
39
39
 
40
40
  ```
41
41
  ###styles.css
42
-
43
- ```
42
+ ```css
44
43
  @import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
45
44
  figure.snip1200 {
46
45
  font-family: 'Raleway', Arial, sans-serif;

2

内容詳細の修正

2020/12/27 10:03

投稿

ryryryry
ryryryry

スコア1

title CHANGED
File without changes
body CHANGED
@@ -4,32 +4,43 @@
4
4
 
5
5
  もし、わかる方いましたら教えいただきますと助かります。お願いします！！
6
6
 
7
-
8
- =index.php=
7
+ ###index.php
8
+ ```html
9
9
  <figure class="snip1200">
10
- <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample27.jpg" alt="sq-sample27" />
10
+ <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample27.jpg" alt="sq-sample27" />
11
- <figcaption>
11
+ <figcaption>
12
- <p>I say, if your knees aren't green by the end of the day, you ought to seriously re-examine your life.</p>
12
+ <p>I say, if your knees aren't green by the end of the day, you ought to seriously re-examine your life.</p>
13
- <div class="heading">
13
+ <div class="heading">
14
- <h2>My<span>Hobby</span></h2>
14
+ <h2>My<span>Hobby</span></h2>
15
- </div>
15
+ </div>
16
- </figcaption>
16
+ </figcaption>
17
- <a href="#"></a>
17
+ <a href="#"></a>
18
18
  </figure>
19
19
 
20
+ ```
20
- =funtions.php=
21
+ ###header.php
22
+ ```html
21
23
  <?php
22
24
  function twpp_enqueue_scripts() {
23
- wp_enqueue_script(
25
+ wp_enqueue_script(
24
- 'scripts-script',
26
+ 'scripts-script',
25
- get_template_directory_uri() . '/js/scripts.js'
27
+ get_template_directory_uri() . '/js/scripts.js',
26
- );
28
+ );
29
+ wp_enqueue_script(
30
+ 'common-script',
31
+ get_template_directory_uri() . '/js/common.js',
32
+ array( 'scripts-script' )
33
+ false,
34
+ ​true
35
+ );
27
36
  }
28
-
29
37
  add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );
30
38
  ?>
31
39
 
40
+ ```
32
- =styles.css=
41
+ ###styles.css
42
+
43
+ ```
33
44
  @import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
34
45
  figure.snip1200 {
35
46
  font-family: 'Raleway', Arial, sans-serif;
@@ -140,21 +151,74 @@
140
151
  -webkit-transition-delay: 0.35s;
141
152
  transition-delay: 0.35s;
142
153
  }
154
+ ```
155
+ ###scripts.js
156
+ ```javascript
157
+ (function($) {
158
+ "use strict"; // Start of use strict
143
159
 
160
+ // Smooth scrolling using jQuery easing
161
+ $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
162
+ if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) {
163
+ var target = $(this.hash);
164
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
144
- = header.php =
165
+ if (target.length) {
166
+ $('html, body').animate({
167
+ scrollTop: (target.offset().top - 72)
168
+ }, 1000, "easeInOutExpo");
169
+ return false;
170
+ }
171
+ }
172
+ });
173
+
174
+ // Closes responsive menu when a scroll trigger link is clicked
175
+ $('.js-scroll-trigger').click(function() {
176
+ $('.navbar-collapse').collapse('hide');
177
+ });
178
+
179
+ // Activate scrollspy to add active class to navbar items on scroll
180
+ $('body').scrollspy({
181
+ target: '#mainNav',
145
- <?php
182
+ offset: 75
183
+ });
184
+
185
+ // Collapse Navbar
146
- function twpp_enqueue_scripts() {
186
+ var navbarCollapse = function() {
187
+ if ($("#mainNav").offset().top > 100) {
188
+ $("#mainNav").addClass("navbar-scrolled");
189
+ } else {
190
+ $("#mainNav").removeClass("navbar-scrolled");
191
+ }
192
+ };
193
+ // Collapse now if page is not at top
147
- wp_enqueue_script(
194
+ navbarCollapse();
195
+ // Collapse the navbar when page is scrolled
196
+ $(window).scroll(navbarCollapse);
197
+
198
+ // Magnific popup calls
199
+ $('#portfolio').magnificPopup({
200
+ delegate: 'a',
201
+ type: 'image',
202
+ tLoading: 'Loading image #%curr%...',
148
- 'scripts-script',
203
+ mainClass: 'mfp-img-mobile',
204
+ gallery: {
205
+ enabled: true,
206
+ navigateByImgClick: true,
207
+ preload: [0, 1]
208
+ },
209
+ image: {
210
+ tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
211
+ }
212
+ });
213
+
149
- get_template_directory_uri() . '/js/scripts.js',
214
+ })(jQuery); // End of use strict
215
+
216
+ ```
217
+ ###common.js
218
+ ```javascript
219
+ $(".hover").mouseleave(
220
+ function () {
221
+ $(this).removeClass("hover");
222
+ }
150
- );
223
+ );
151
- wp_enqueue_script(
152
- 'common-script',
153
- get_template_directory_uri() . '/js/common.js',
154
- array( 'scripts-script' )
155
- false,
156
- ​true
157
- );
224
+ ```
158
- }
159
- add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );
160
- ?>

1

内容詳細の修正

2020/12/27 10:02

投稿

ryryryry
ryryryry

スコア1

title CHANGED
File without changes
body CHANGED
@@ -2,4 +2,159 @@
2
2
 
3
3
  通常のhtml&cssのやり方だとできると思うのですが、javascriptを画像のエフェクトとして入れているのでやり方が変わるのだと思いますが、やり方がわからず詰まっています。
4
4
 
5
- もし、わかる方いましたら教えいただきますと助かります。お願いします！！
5
+ もし、わかる方いましたら教えいただきますと助かります。お願いします！！
6
+
7
+
8
+ =index.php=
9
+ <figure class="snip1200">
10
+ <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample27.jpg" alt="sq-sample27" />
11
+ <figcaption>
12
+ <p>I say, if your knees aren't green by the end of the day, you ought to seriously re-examine your life.</p>
13
+ <div class="heading">
14
+ <h2>My<span>Hobby</span></h2>
15
+ </div>
16
+ </figcaption>
17
+ <a href="#"></a>
18
+ </figure>
19
+
20
+ =funtions.php=
21
+ <?php
22
+ function twpp_enqueue_scripts() {
23
+ wp_enqueue_script(
24
+ 'scripts-script',
25
+ get_template_directory_uri() . '/js/scripts.js'
26
+ );
27
+ }
28
+
29
+ add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );
30
+ ?>
31
+
32
+ =styles.css=
33
+ @import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
34
+ figure.snip1200 {
35
+ font-family: 'Raleway', Arial, sans-serif;
36
+ position: relative;
37
+ overflow: hidden;
38
+ margin: 10px;
39
+ min-width: 220px;
40
+ max-width: 310px;
41
+ max-height: 310px;
42
+ width: 100%;
43
+ background: #000000;
44
+ color: #ffffff;
45
+ text-align: center;
46
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
47
+ font-size: 16px;
48
+ }
49
+ figure.snip1200 * {
50
+ -webkit-box-sizing: border-box;
51
+ box-sizing: border-box;
52
+ -webkit-transition: all 0.45s ease-in-out;
53
+ transition: all 0.45s ease-in-out;
54
+ }
55
+ figure.snip1200 img {
56
+ max-width: 100%;
57
+ position: relative;
58
+ opacity: 0.9;
59
+ }
60
+ figure.snip1200 figcaption {
61
+ position: absolute;
62
+ top: 45%;
63
+ left: 7%;
64
+ right: 7%;
65
+ bottom: 45%;
66
+ border: 1px solid white;
67
+ border-width: 1px 1px 0;
68
+ }
69
+ figure.snip1200 .heading {
70
+ overflow: hidden;
71
+ -webkit-transform: translateY(50%);
72
+ transform: translateY(50%);
73
+ position: absolute;
74
+ bottom: 0;
75
+ width: 100%;
76
+ }
77
+ figure.snip1200 h2 {
78
+ display: table;
79
+ margin: 0 auto;
80
+ padding: 0 10px;
81
+ position: relative;
82
+ text-align: center;
83
+ width: auto;
84
+ text-transform: uppercase;
85
+ font-weight: 400;
86
+ }
87
+ figure.snip1200 h2 span {
88
+ font-weight: 800;
89
+ }
90
+ figure.snip1200 h2:before,
91
+ figure.snip1200 h2:after {
92
+ position: absolute;
93
+ display: block;
94
+ width: 1000%;
95
+ height: 1px;
96
+ content: '';
97
+ background: white;
98
+ top: 50%;
99
+ }
100
+ figure.snip1200 h2:before {
101
+ left: -1000%;
102
+ }
103
+ figure.snip1200 h2:after {
104
+ right: -1000%;
105
+ }
106
+ figure.snip1200 p {
107
+ top: 50%;
108
+ -webkit-transform: translateY(-50%);
109
+ transform: translateY(-50%);
110
+ position: absolute;
111
+ width: 100%;
112
+ padding: 0 20px;
113
+ margin: 0;
114
+ opacity: 0;
115
+ line-height: 1.6em;
116
+ font-size: 0.9em;
117
+ }
118
+ figure.snip1200 a {
119
+ left: 0;
120
+ right: 0;
121
+ top: 0;
122
+ bottom: 0;
123
+ position: absolute;
124
+ z-index: 1;
125
+ }
126
+ figure.snip1200:hover img,
127
+ figure.snip1200.hover img {
128
+ opacity: 0.25;
129
+ -webkit-transform: scale(1.1);
130
+ transform: scale(1.1);
131
+ }
132
+ figure.snip1200:hover figcaption,
133
+ figure.snip1200.hover figcaption {
134
+ top: 7%;
135
+ bottom: 7%;
136
+ }
137
+ figure.snip1200:hover p,
138
+ figure.snip1200.hover p {
139
+ opacity: 1;
140
+ -webkit-transition-delay: 0.35s;
141
+ transition-delay: 0.35s;
142
+ }
143
+
144
+ = header.php =
145
+ <?php
146
+ function twpp_enqueue_scripts() {
147
+ wp_enqueue_script(
148
+ 'scripts-script',
149
+ get_template_directory_uri() . '/js/scripts.js',
150
+ );
151
+ wp_enqueue_script(
152
+ 'common-script',
153
+ get_template_directory_uri() . '/js/common.js',
154
+ array( 'scripts-script' )
155
+ false,
156
+ ​true
157
+ );
158
+ }
159
+ add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );
160
+ ?>