回答編集履歴
1
わかりやすく修正
answer
CHANGED
|
@@ -1,12 +1,19 @@
|
|
|
1
|
-
|
|
1
|
+
おっしゃるようにHTMLは分けない方がSEO対策的に良いですし、URLも同一のものの方が望ましいです。
|
|
2
|
-
重いページになると表示が遅くなったりして良くありません。
|
|
3
|
-
|
|
2
|
+
ただ、画面サイズによって切り分ける、その切り分け方に問題があるように思います。
|
|
4
3
|
|
|
4
|
+
ページ全体のデザインが分かれる場合でも、
|
|
5
|
+
同一HTML上にPC用表示、スマホ用表示を置くことに基本的には問題はありません。
|
|
6
|
+
ですが、重いページになると表示が遅くなったりして良くありません。
|
|
7
|
+
|
|
5
8
|
拝見したところ、PC表示用、スマホ表示用のソースをHTML内にデザインまで記述し、
|
|
6
9
|
それをCSSで振り分けようとしているように見受けられます。
|
|
10
|
+
これでは実際に表示する内容の2倍の記述が必要になります。
|
|
11
|
+
つまり、表示に倍の時間がかかります。
|
|
12
|
+
これは**SEO対策的にも、閲覧者に対しても大きなマイナス**です。
|
|
13
|
+
また、全く同じ文章が繰り返されるのはやはりSEO対策的にお奨めできません。
|
|
7
14
|
|
|
8
|
-
表示する内容がほぼ同じでデザインだけが全く違うのでしたら、
|
|
15
|
+
**表示する内容がほぼ同じでデザインだけが全く違うのでしたら、
|
|
9
|
-
CSSでデザインを切り替えてみてはいかがでしょうか。
|
|
16
|
+
CSSでデザインを切り替えてみてはいかがでしょうか。**
|
|
10
17
|
HTML内で内容をブロックごとに分け、名前を付けます。
|
|
11
18
|
CSSでそれらの順番を入れ替えたり、デザインを変更します。
|
|
12
19
|
```HTML
|
|
@@ -14,7 +21,7 @@
|
|
|
14
21
|
block1の内容
|
|
15
22
|
</div>
|
|
16
23
|
<div class=block id="block2">
|
|
17
|
-
<img width="690" height="500" src="http:
|
|
24
|
+
<img width="690" height="500" src="http:hogehoge.com/image/hoge.jpg" class="image_class">
|
|
18
25
|
<p ID="hoge">
|
|
19
26
|
hogehoge
|
|
20
27
|
</p>
|
|
@@ -57,8 +64,13 @@
|
|
|
57
64
|
}
|
|
58
65
|
}
|
|
59
66
|
```
|
|
67
|
+
もちろんPC、又はスマホのみに表示させる部分についてはdisplay: none;で表示を制御します。
|
|
68
|
+
**基本的にHTML内には内容を記述、装飾はCSSでする、と考えておけば問題ありません。**
|
|
69
|
+
|
|
60
70
|
順番を入れ替える方法については
|
|
61
71
|
|
|
62
72
|
[スマホとPCで要素の表示順番を入れ替えるには？flexbox「order」を使ってレスポンシブデザインに最適化！](https://www.misallychan.com/entry/2018/05/25/200000)
|
|
63
73
|
|
|
64
|
-
がわかりやすいかと思います。
|
|
74
|
+
がわかりやすいかと思います。
|
|
75
|
+
|
|
76
|
+
この方法でしたら**PCとスマホでデザインを完全に変えることができ、SEO対策的にもマイナスにはならない**はずです。
|