質問編集履歴

2

コードの記載方法を変えました

2021/01/15 07:39

投稿

Miz_Miz
Miz_Miz

スコア5

test CHANGED
File without changes
test CHANGED
@@ -2,17 +2,181 @@
2
2
 
3
3
 
4
4
 
5
- Contact Form 7のフォームです↓
6
5
 
7
- ![Contact Form 7のフォームです](34f321c20b9d693abd3f00736c99f29d.jpeg)
8
6
 
9
- 追加CSSです↓
7
+ ```HTML
10
8
 
11
- ![追加CSSです](1085aab655a72554327b1d59d3b58517.jpeg)
9
+ <table class="inquiry">
10
+
11
+ <tr>
12
+
13
+ <th><span class="haveto">必須</span><span>お名前</span></th>
14
+
15
+ <td>[text* your_name placeholder "ニックネーム可"]</td>
16
+
17
+ </tr>
12
18
 
13
19
 
14
20
 
21
+ <tr>
22
+
23
+ <th><span class="haveto">必須</span><span>メールアドレス</span></th>
24
+
25
+ <td>[email* your-email]</td>
26
+
27
+ </tr>
28
+
29
+
30
+
31
+ <tr>
32
+
33
+ <th><span class="haveto">必須</span><span>メールアドレス確認用</span></th>
34
+
35
+ <td>[email* your-email]</td>
36
+
37
+ </tr>
38
+
39
+
40
+
41
+ </table>
42
+
43
+
44
+
45
+ [confirm "確認する"]
46
+
47
+ [back "戻る"]
48
+
49
+ [submit "送信"]
50
+
51
+ ```
52
+
53
+
54
+
55
+ ```CSS
56
+
57
+ /*Contact Form 7カスタマイズ*/
58
+
59
+ /*見出し欄*/
60
+
61
+ .wpcf7 .inquiry th{
62
+
63
+ text-align:left;
64
+
65
+ font-size:14px;
66
+
67
+ color:#444;
68
+
69
+ padding-right:5px;
70
+
71
+ width:30%;
72
+
73
+ background:#f7f7f7;
74
+
75
+ border:solid 1px #d7d7d7;
76
+
77
+ }
78
+
79
+
80
+
81
+
82
+
83
+ .wpcf7 .inquiry td{
84
+
85
+ font-size:13px;
86
+
87
+ border:solid 1px #d7d7d7;
88
+
89
+ }
90
+
91
+
92
+
93
+ /*横の行とテーブル全体*/
94
+
95
+ .wpcf7 .entry-content .inquiry tr,.entry-content table{
96
+
97
+ border:solid 1px #fff;
98
+
99
+ }
100
+
101
+
102
+
103
+ /*必須の調整*/
104
+
105
+ .wpcf7 .haveto{
106
+
107
+ font-size:7px;
108
+
109
+ padding:5px;
110
+
111
+ background:#fa66c9;
112
+
113
+ color:#fff;
114
+
115
+ border-radius:2px;
116
+
117
+ margin-right:5px;
118
+
119
+ position:relative;
120
+
121
+ bottom:1px;
122
+
123
+ }
124
+
125
+
126
+
127
+
128
+
129
+ /*送信ボタンのデザイン変更*/
130
+
131
+ #formbtn{
132
+
133
+ display: block;
134
+
135
+ padding:1em 0;
136
+
137
+ margin-top:30px;
138
+
139
+ width:100%;
140
+
141
+ background:#ffaa56;
142
+
143
+ color:#fff;
144
+
145
+ font-size:18px;
146
+
147
+ font-weight:bold;
148
+
149
+ border-radius:2px;
150
+
151
+ border: none;
152
+
153
+ }
154
+
155
+
156
+
157
+ /*送信ボタンマウスホバー時*/
158
+
159
+ #formbtn:hover{
160
+
161
+ background:#fff;
162
+
163
+ color:#ffaa56;
164
+
165
+ }
166
+
167
+
168
+
169
+
170
+
171
+ ```
172
+
173
+
174
+
15
- 画像ように記載しています。
175
+ HTMLはContact Form 7フォームに記載しています。
176
+
177
+ cssはstyle.cssで反映しなかったので、追加CSSに記載しています。
178
+
179
+
16
180
 
17
181
  追加CSSの一番上(.wpcf7 .inquiry th)だけは反映されます。
18
182
 
@@ -22,8 +186,6 @@
22
186
 
23
187
 
24
188
 
25
- style.cssで反映しなかったので、追加CSSに記載しています。
26
-
27
189
 
28
190
 
29
191
  かれこれ半日は格闘しています。

1

追記

2021/01/15 07:39

投稿

Miz_Miz
Miz_Miz

スコア5

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,11 @@
2
2
 
3
3
 
4
4
 
5
+ Contact Form 7のフォームです↓
6
+
5
7
  ![Contact Form 7のフォームです](34f321c20b9d693abd3f00736c99f29d.jpeg)
8
+
9
+ 追加CSSです↓
6
10
 
7
11
  ![追加CSSです](1085aab655a72554327b1d59d3b58517.jpeg)
8
12