質問編集履歴
6
ソースコードで出力されたコードを追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -50,6 +50,18 @@
|
|
|
50
50
|
|
|
51
51
|
```
|
|
52
52
|
|
|
53
|
+
```PHP
|
|
54
|
+
|
|
55
|
+
<img src="http://localhost:8888/wp-content/themes/HP/images/hoge.png" sizes="(min-width: 640px) 100vw"
|
|
56
|
+
|
|
57
|
+
srcset="http://localhost:8888/wp-content/themes/HP/images/hoge.png 320w"http://localhost:8888/wp-content/themes/HP/images/hoge@2x.png 640w"http://localhost:8888/wp-content/themes/HP/images/hoge.png 1280w"
|
|
58
|
+
|
|
59
|
+
alt="画像">
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
```
|
|
64
|
+
|
|
53
65
|
出力画像サイズ
|
|
54
66
|
|
|
55
67
|
> img src="http://localhost:8888/wp-content/themes/HP/images/hoge.png" sizes="(min-width: 640px) 100vw
|
5
引用部分の追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -52,7 +52,9 @@
|
|
|
52
52
|
|
|
53
53
|
出力画像サイズ
|
|
54
54
|
|
|
55
|
-
img src="http://localhost:8888/wp-content/themes/HP/images/hoge.png" sizes="(min-width: 640px) 100vw
|
|
55
|
+
> img src="http://localhost:8888/wp-content/themes/HP/images/hoge.png" sizes="(min-width: 640px) 100vw
|
|
56
|
+
|
|
57
|
+
|
|
56
58
|
|
|
57
59
|
出力された画像サイズが 4007 × 570px
|
|
58
60
|
|
4
誤字の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
|
|
55
55
|
img src="http://localhost:8888/wp-content/themes/HP/images/hoge.png" sizes="(min-width: 640px) 100vw
|
|
56
56
|
|
|
57
|
-
|
|
57
|
+
出力された画像サイズが 4007 × 570px
|
|
58
58
|
|
|
59
59
|
実際のサイズが1000 × 140px
|
|
60
60
|
|
3
試したことの欄に追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -34,11 +34,33 @@
|
|
|
34
34
|
|
|
35
35
|
###試したこと
|
|
36
36
|
|
|
37
|
-
> images/hoge@2x.png 640w,images/hoge.png 1280w
|
|
37
|
+
1.> images/hoge@2x.png 640w,images/hoge.png 1280w
|
|
38
38
|
|
|
39
39
|
|
|
40
40
|
|
|
41
41
|
の読み込みがされるように、""で囲んで("images/hoge@2x.png 640w","images/hoge.png 1280w" )ブラウザ確認をすると表示がされるようにはなるのですが、表示のされかたがおかしい(実際の表示画像の大きさより2倍くらいの大きさになる)
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
2.出力されたimgタグの記述
|
|
46
|
+
|
|
47
|
+
```PHP
|
|
48
|
+
|
|
49
|
+
<img src="http://localhost:8888/wp-content/themes/HP/images/hoge.png" sizes="(min-width: 640px) 100vw" srcset="http://localhost:8888/wp-content/themes/HP/images/hoge.png 320w" http:="" localhost:8888="" wp-content="" themes="" HP="" images="" hoge@2x.png="" 640w"http:="" hoge.png="" 1280w"="" alt="画像">
|
|
50
|
+
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
出力画像サイズ
|
|
54
|
+
|
|
55
|
+
img src="http://localhost:8888/wp-content/themes/HP/images/hoge.png" sizes="(min-width: 640px) 100vw
|
|
56
|
+
|
|
57
|
+
こちらが、出力された画像サイズが 4007 × 570px
|
|
58
|
+
|
|
59
|
+
実際のサイズが1000 × 140px
|
|
60
|
+
|
|
61
|
+
imgタグのその場所での幅 1015px
|
|
62
|
+
|
|
63
|
+
ウィンドウ幅 1279 (MacBook Pro Retina 13-inch)
|
|
42
64
|
|
|
43
65
|
|
|
44
66
|
|
2
追記事項の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -48,6 +48,26 @@
|
|
|
48
48
|
|
|
49
49
|
・作業はMAMPで行っているので本番環境ではない
|
|
50
50
|
|
|
51
|
+
・画像の読み込みがフルパスだと長いので、functions.phpで相対パス設定にしてあります。
|
|
52
|
+
|
|
53
|
+
```PHP
|
|
54
|
+
|
|
55
|
+
// 固定ページ画像パス省略
|
|
56
|
+
|
|
57
|
+
function replaceImagePath($arg) {
|
|
58
|
+
|
|
59
|
+
$content = str_replace('"images/', '"' . get_bloginfo('template_directory') . '/images/', $arg);
|
|
60
|
+
|
|
61
|
+
return $content;
|
|
62
|
+
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
add_action('the_content', 'replaceImagePath');
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
```
|
|
70
|
+
|
|
51
71
|
|
|
52
72
|
|
|
53
73
|
よろしく御願いいたします。
|
1
タイトルの編集
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
【WordPress】imgタグをsrcsetで設定し
|
|
1
|
+
【WordPress】imgタグをsrcsetで設定したら、画像が表示されない
|
test
CHANGED
|
File without changes
|