質問編集履歴
4
内容修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
|
|
55
55
|
- タイトル部分の親要素に投稿毎で異なるプロパティを指定できない
|
|
56
56
|
|
|
57
|
-
- タイトルより下はphpファイル上でthe_content()として取得する部分になるため上記のrowクラスの設定方法が分からない
|
|
57
|
+
- タイトルより下はphpファイル上でthe_content()として取得する部分になるため上記のrowクラスを持つdiv要素の設定方法が分からない
|
|
58
58
|
|
|
59
59
|
|
|
60
60
|
|
3
内容の追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -2,31 +2,39 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
カスタム投稿タイプで下
|
|
5
|
+
カスタム投稿タイプで下図のような構造でtop-areaクラスを持つsectionを作りたいと思っています。
|
|
6
|
+
|
|
7
|
+
|
|
6
8
|
|
|
7
9
|
|
|
10
|
+
|
|
11
|
+
こうすることで実装したい形は下記です。
|
|
12
|
+
|
|
13
|
+
- <h1></h1>部分と<div class="row"></div>を<section class="top-area"></section>で一括りにして、同じ背景色とする。
|
|
14
|
+
|
|
15
|
+
- <section class="top-area"></section>の背景色（上図では赤色部分）を投稿毎に変えたい。
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
htmlは下記のように吐き出します。
|
|
8
20
|
|
|
9
21
|
```
|
|
10
22
|
|
|
11
23
|
<section class="top-area">
|
|
12
24
|
|
|
13
|
-
<
|
|
25
|
+
<h1>記事タイトル</h1>
|
|
14
26
|
|
|
15
|
-
|
|
27
|
+
<div class="row">
|
|
16
28
|
|
|
17
|
-
<div class="
|
|
29
|
+
<div class="left-row">
|
|
18
30
|
|
|
19
|
-
<
|
|
31
|
+
<p>投稿毎に異なる文章（簡単な記事の説明）</p>
|
|
20
32
|
|
|
21
|
-
|
|
33
|
+
</div>
|
|
22
34
|
|
|
23
|
-
|
|
35
|
+
<div class="rigtht-row">
|
|
24
36
|
|
|
25
|
-
<div class="rigtht-row">
|
|
26
|
-
|
|
27
|
-
|
|
37
|
+
<img>投稿毎に異なる画像</img>
|
|
28
|
-
|
|
29
|
-
</div>
|
|
30
38
|
|
|
31
39
|
</div>
|
|
32
40
|
|
|
@@ -34,61 +42,49 @@
|
|
|
34
42
|
|
|
35
43
|
</section>
|
|
36
44
|
|
|
37
|
-
|
|
45
|
+
<section class="content">
|
|
38
46
|
|
|
39
|
-
|
|
47
|
+
記事の文章部分
|
|
40
48
|
|
|
41
|
-
・
|
|
42
|
-
|
|
43
|
-
|
|
49
|
+
</section>
|
|
44
50
|
|
|
45
51
|
```
|
|
46
52
|
|
|
53
|
+
ただし通常の投稿画面からの投稿だと
|
|
47
54
|
|
|
55
|
+
- タイトル部分の親要素に投稿毎で異なるプロパティを指定できない
|
|
48
56
|
|
|
49
|
-
こうすることで実装したい形は下記です。
|
|
50
|
-
|
|
51
|
-
-
|
|
57
|
+
- タイトルより下はphpファイル上でthe_content()として取得する部分になるため上記のrowクラスの設定方法が分からない
|
|
52
|
-
|
|
53
|
-
- その背景を投稿によって変えたい。
|
|
54
58
|
|
|
55
59
|
|
|
56
60
|
|
|
57
|
-
|
|
61
|
+
という点から、実装に困っています。
|
|
58
62
|
|
|
59
63
|
|
|
64
|
+
|
|
65
|
+
苦肉の策としてはhtmlの構造を下記のようにする。
|
|
60
66
|
|
|
61
67
|
```
|
|
62
68
|
|
|
63
69
|
<section class="top-area">
|
|
64
70
|
|
|
65
|
-
<div class="container">
|
|
66
|
-
|
|
67
|
-
|
|
71
|
+
<h1>記事タイトル</h1>
|
|
68
|
-
|
|
69
|
-
</div>
|
|
70
72
|
|
|
71
73
|
</section>
|
|
72
74
|
|
|
73
|
-
|
|
74
|
-
|
|
75
75
|
<section class="top-area">
|
|
76
76
|
|
|
77
|
-
<div class="
|
|
77
|
+
<div class="row">
|
|
78
78
|
|
|
79
|
-
<div class="
|
|
79
|
+
<div class="left-row">
|
|
80
80
|
|
|
81
|
-
<
|
|
81
|
+
<p>投稿によって異なる文章（簡単な記事の説明）</p>
|
|
82
82
|
|
|
83
|
-
|
|
83
|
+
</div>
|
|
84
84
|
|
|
85
|
-
|
|
85
|
+
<div class="rigtht-row">
|
|
86
86
|
|
|
87
|
-
<div class="rigtht-row">
|
|
88
|
-
|
|
89
|
-
|
|
87
|
+
<img>投稿によって異なる画像</img>
|
|
90
|
-
|
|
91
|
-
</div>
|
|
92
88
|
|
|
93
89
|
</div>
|
|
94
90
|
|
|
@@ -96,17 +92,29 @@
|
|
|
96
92
|
|
|
97
93
|
</section>
|
|
98
94
|
|
|
99
|
-
|
|
95
|
+
<section class="content">
|
|
100
96
|
|
|
101
|
-
|
|
97
|
+
記事の文章部分
|
|
102
98
|
|
|
103
|
-
・
|
|
104
|
-
|
|
105
|
-
|
|
99
|
+
</section>
|
|
106
100
|
|
|
107
101
|
```
|
|
108
102
|
|
|
103
|
+
- 2つ目のtop-areaクラスを持つsectionは、投稿毎に投稿画面に直接コードを打ち込む。
|
|
104
|
+
|
|
105
|
+
- 記事を下書きor公開したら割り振られる 「id」を見て投稿毎に下記のようにcssファイルに追記し背景色を設定する。
|
|
106
|
+
|
|
107
|
+
```ここに言語を入力
|
|
108
|
+
|
|
109
|
+
.page-id-〇〇 .top-area {
|
|
110
|
+
|
|
111
|
+
background-color: #○○○○○○;
|
|
112
|
+
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
```
|
|
116
|
+
|
|
109
|
-
以下の点で
|
|
117
|
+
このようにすれば何とか出来そうですが、以下の点でこのような実装はあまりしたくないのが実際です。
|
|
110
118
|
|
|
111
119
|
- ビジュアルでは<h1>と<div class="row">が一つでまとまっている部分なので、分離させることに違和感がある
|
|
112
120
|
|
2
コードの修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -54,17 +54,63 @@
|
|
|
54
54
|
|
|
55
55
|
|
|
56
56
|
|
|
57
|
-
苦肉の策としては
|
|
57
|
+
苦肉の策としては下記のようにして、記事の 「postid」を見てcssでtop-areaにid毎で背景色を指定すれば何とか実装は出来そうですが・・・。
|
|
58
58
|
|
|
59
59
|
|
|
60
60
|
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
<section class="top-area">
|
|
64
|
+
|
|
65
|
+
<div class="container">
|
|
66
|
+
|
|
67
|
+
<h1>記事タイトル</h1>
|
|
68
|
+
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
</section>
|
|
61
72
|
|
|
62
73
|
|
|
63
|
-
- <h1>と<div class="row">を同一セクションにせず完全に切り分けてそれぞれに同じ背景色を指定する。
|
|
64
74
|
|
|
65
|
-
|
|
75
|
+
<section class="top-area">
|
|
66
76
|
|
|
77
|
+
<div class="container">
|
|
78
|
+
|
|
79
|
+
<div class="row"> ※下記のleft-row,right-rowは横並び
|
|
80
|
+
|
|
67
|
-
|
|
81
|
+
<div class="left-row">
|
|
82
|
+
|
|
83
|
+
<p>投稿によって異なる文章（簡単な記事の説明）</p>
|
|
84
|
+
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
<div class="rigtht-row">
|
|
88
|
+
|
|
89
|
+
<img>投稿によって異なる画像</img>
|
|
90
|
+
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
</div>
|
|
96
|
+
|
|
97
|
+
</section>
|
|
98
|
+
|
|
99
|
+
・
|
|
100
|
+
|
|
101
|
+
・
|
|
102
|
+
|
|
103
|
+
・
|
|
104
|
+
|
|
105
|
+
以下は記事の文章
|
|
106
|
+
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
以下の点で、上記の実装はあまりしたくないのが実際です。
|
|
110
|
+
|
|
111
|
+
- ビジュアルでは<h1>と<div class="row">が一つでまとまっている部分なので、分離させることに違和感がある
|
|
112
|
+
|
|
113
|
+
- idを見てcssを追記していくことで管理コストが上がる。
|
|
68
114
|
|
|
69
115
|
|
|
70
116
|
|
1
タイトル修正
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
記事タイトルを含めたsectionへの管理画面からの背景色の指定
|
|
1
|
+
【 WordPress 】記事タイトルを含めたsectionへの管理画面からの背景色の指定
|
test
CHANGED
|
File without changes
|