質問編集履歴
6
ソースコードで出力されたコードを追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -24,6 +24,12 @@
|
|
|
24
24
|
```PHP
|
|
25
25
|
<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="画像">
|
|
26
26
|
```
|
|
27
|
+
```PHP
|
|
28
|
+
<img src="http://localhost:8888/wp-content/themes/HP/images/hoge.png" sizes="(min-width: 640px) 100vw"
|
|
29
|
+
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"
|
|
30
|
+
alt="画像">
|
|
31
|
+
|
|
32
|
+
```
|
|
27
33
|
出力画像サイズ
|
|
28
34
|
> img src="http://localhost:8888/wp-content/themes/HP/images/hoge.png" sizes="(min-width: 640px) 100vw
|
|
29
35
|
|
5
引用部分の追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -25,7 +25,8 @@
|
|
|
25
25
|
<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="画像">
|
|
26
26
|
```
|
|
27
27
|
出力画像サイズ
|
|
28
|
-
img src="http://localhost:8888/wp-content/themes/HP/images/hoge.png" sizes="(min-width: 640px) 100vw
|
|
28
|
+
> img src="http://localhost:8888/wp-content/themes/HP/images/hoge.png" sizes="(min-width: 640px) 100vw
|
|
29
|
+
|
|
29
30
|
出力された画像サイズが 4007 × 570px
|
|
30
31
|
実際のサイズが1000 × 140px
|
|
31
32
|
imgタグのその場所での幅 1015px
|
4
誤字の修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
```
|
|
27
27
|
出力画像サイズ
|
|
28
28
|
img src="http://localhost:8888/wp-content/themes/HP/images/hoge.png" sizes="(min-width: 640px) 100vw
|
|
29
|
-
|
|
29
|
+
出力された画像サイズが 4007 × 570px
|
|
30
30
|
実際のサイズが1000 × 140px
|
|
31
31
|
imgタグのその場所での幅 1015px
|
|
32
32
|
ウィンドウ幅 1279 (MacBook Pro Retina 13-inch)
|
3
試したことの欄に追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -16,10 +16,21 @@
|
|
|
16
16
|
```
|
|
17
17
|
|
|
18
18
|
###試したこと
|
|
19
|
-
> images/hoge@2x.png 640w,images/hoge.png 1280w
|
|
19
|
+
1.> images/hoge@2x.png 640w,images/hoge.png 1280w
|
|
20
20
|
|
|
21
21
|
の読み込みがされるように、""で囲んで("images/hoge@2x.png 640w","images/hoge.png 1280w" )ブラウザ確認をすると表示がされるようにはなるのですが、表示のされかたがおかしい(実際の表示画像の大きさより2倍くらいの大きさになる)
|
|
22
22
|
|
|
23
|
+
2.出力されたimgタグの記述
|
|
24
|
+
```PHP
|
|
25
|
+
<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="画像">
|
|
26
|
+
```
|
|
27
|
+
出力画像サイズ
|
|
28
|
+
img src="http://localhost:8888/wp-content/themes/HP/images/hoge.png" sizes="(min-width: 640px) 100vw
|
|
29
|
+
こちらが、出力された画像サイズが 4007 × 570px
|
|
30
|
+
実際のサイズが1000 × 140px
|
|
31
|
+
imgタグのその場所での幅 1015px
|
|
32
|
+
ウィンドウ幅 1279 (MacBook Pro Retina 13-inch)
|
|
33
|
+
|
|
23
34
|
###追記事項
|
|
24
35
|
・srcsetで画像設定しているところ以外は、画像の読み込みがされていて通常の表示がされている。
|
|
25
36
|
・作業はMAMPで行っているので本番環境ではない
|
2
追記事項の修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -23,5 +23,15 @@
|
|
|
23
23
|
###追記事項
|
|
24
24
|
・srcsetで画像設定しているところ以外は、画像の読み込みがされていて通常の表示がされている。
|
|
25
25
|
・作業はMAMPで行っているので本番環境ではない
|
|
26
|
+
・画像の読み込みがフルパスだと長いので、functions.phpで相対パス設定にしてあります。
|
|
27
|
+
```PHP
|
|
28
|
+
// 固定ページ画像パス省略
|
|
29
|
+
function replaceImagePath($arg) {
|
|
30
|
+
$content = str_replace('"images/', '"' . get_bloginfo('template_directory') . '/images/', $arg);
|
|
31
|
+
return $content;
|
|
32
|
+
}
|
|
33
|
+
add_action('the_content', 'replaceImagePath');
|
|
26
34
|
|
|
35
|
+
```
|
|
36
|
+
|
|
27
37
|
よろしく御願いいたします。
|
1
タイトルの編集
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
【WordPress】imgタグをsrcsetで設定し
|
|
1
|
+
【WordPress】imgタグをsrcsetで設定したら、画像が表示されない
|
body
CHANGED
|
File without changes
|