teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問ボタンを2カラムで表示しているのですが、条件によって1カラムの中央寄せにしたい

編集履歴

質問編集履歴

13

文言

2017/07/29 08:35

投稿

akkkkin
akkkkin

スコア83

test CHANGED
File without changes
test CHANGED
@@ -356,7 +356,7 @@
356
356
 
357
357
  下記で実装できました！！！
358
358
 
359
-
359
+ ```ここに言語を入力
360
360
 
361
361
  <div class="column-wrap cf ">
362
362
 
@@ -414,4 +414,6 @@
414
414
 
415
415
  </div>
416
416
 
417
+ ```
418
+
417
419
  もし詳しい方がいらっしゃればご教示いただきたく思います。

12

文言追加

2017/07/29 08:35

投稿

akkkkin
akkkkin

スコア83

test CHANGED
File without changes
test CHANGED
@@ -352,6 +352,66 @@
352
352
 
353
353
 
354
354
 
355
-
355
+ 追記
356
+
357
+ 下記で実装できました！！！
358
+
359
+
360
+
361
+ <div class="column-wrap cf ">
362
+
363
+ <?php if(get_field('tel-button',$post->ID) and get_field('web-reserve-button',$post->ID)) :?>
364
+
365
+ <div class="d-1of2 t-1of2 m-all">
366
+
367
+ <div class="btn-wrap aligncenter simple big">
368
+
369
+ <a href="tel:<?php the_field('tel-button',$post->ID); ?>" target="_blank"><i class="fa fa-phone-square" aria-hidden="true"></i>電話で予約する
370
+
371
+ </a>
372
+
373
+ </div>
374
+
375
+ </div>
376
+
377
+ <div class="d-1of2 t-1of2 m-all">
378
+
379
+ <div class="btn-wrap aligncenter simple big">
380
+
381
+ <a href="<?php the_field('web-reserve-button',$post->ID); ?>" target="_blank">Web予約</a>
382
+
383
+ </div>
384
+
385
+ </div>
386
+
387
+ <?php elseif( get_field('tel-button',$post->ID)): ?>
388
+
389
+ <div class="text-center">
390
+
391
+ <div class="btn-wrap aligncenter simple big">
392
+
393
+ <a href="tel:<?php the_field('tel-button',$post->ID); ?>" target="_blank"><i class="fa fa-phone-square" aria-hidden="true"></i>電話で予約する
394
+
395
+ つながります）</a>
396
+
397
+ </div>
398
+
399
+ </div>
400
+
401
+ <?php elseif( get_field('web-reserve-button',$post->ID)): ?>
402
+
403
+ <div class="text-center">
404
+
405
+ <div class="btn-wrap aligncenter simple big">
406
+
407
+ <a href="<?php the_field('web-reserve-button',$post->ID); ?>" target="_blank">Web予約</a>
408
+
409
+ </div>
410
+
411
+ </div>
412
+
413
+ <?php endif; ?>
414
+
415
+ </div>
356
416
 
357
417
  もし詳しい方がいらっしゃればご教示いただきたく思います。

11

文言修正

2017/07/29 08:34

投稿

akkkkin
akkkkin

スコア83

test CHANGED
File without changes
test CHANGED
@@ -304,47 +304,41 @@
304
304
 
305
305
  <div class="column-wrap cf ">
306
306
 
307
- <?php if the_field('tel-button',$post->ID)and('web-reserve-button',$post->ID) :?>
307
+ <?php if get_field('tel-button',$post->ID)and('web-reserve-button',$post->ID) :?>
308
308
 
309
309
  <div class="d-1of2 t-1of2 m-all">
310
310
 
311
311
  <div class="btn-wrap aligncenter simple big">
312
312
 
313
- <a href="tel:<?php the_field('tel-button',$post->ID); ?>" target="_blank"><i class="fa fa-phone-square" aria-hidden="true"></i>電話で予約する</a>
313
+ <a href="tel:<?php the_field('tel-button',$post->ID); ?>" target="_blank"><i class="fa fa-phone-square" aria-hidden="true"></i>電話で予約する<br>
314
+
315
+ （スマホの場合タップすると電話がつながります）</a>
314
316
 
315
317
  </div>
316
318
 
317
319
  </div>
318
320
 
319
- <div class="d-1of2 t-1of2 m-all">
320
-
321
- <div class="btn-wrap aligncenter simple big">
321
+ <?php elseif get_field('tel-button',$post->ID): ?>
322
-
323
- <a href="<?php the_field('web-reserve-button',$post->ID); ?>" target="_blank">Web予約</a>
324
-
325
- </div>
326
-
327
- </div>
328
-
329
- <?php elseif: ?>
330
322
 
331
323
  <div class="text-center">
332
324
 
333
325
  <div class="btn-wrap aligncenter simple big">
334
326
 
335
- <a href="tel:<?php the_field('tel-button',$post->ID); ?>" target="_blank"><i class="fa fa-phone-square" aria-hidden="true"></i>電話で予約する</a>
327
+ <a href="tel:<?php the_field('tel-button',$post->ID); ?>" target="_blank"><i class="fa fa-phone-square" aria-hidden="true"></i>電話で予約する<br>
328
+
329
+ （スマホの場合タップすると電話がつながります）</a>
336
330
 
337
331
  </div>
338
332
 
339
333
  </div>
340
334
 
341
- <?php elseif: ?>
335
+ <?php elseif get_field('web-reserve-button',$post->ID): ?>
342
-
336
+
343
- <div class="text-center">
337
+ <div class="text-center">
344
-
338
+
345
- <div class="btn-wrap aligncenter simple big">
339
+ <div class="btn-wrap aligncenter simple big">
346
-
340
+
347
- <a href="<?php the_field('web-reserve-button',$post->ID); ?>" target="_blank">Web予約</a>
341
+ <a href="<?php the_field('web-reserve-button',$post->ID); ?>" target="_blank">Web予約をする</a>
348
342
 
349
343
  </div>
350
344
 

10

文言修正

2017/07/29 08:01

投稿

akkkkin
akkkkin

スコア83

test CHANGED
File without changes
test CHANGED
@@ -228,7 +228,7 @@
228
228
 
229
229
  <div class="btn-wrap aligncenter simple big">
230
230
 
231
- <a href="tel:<?php the_field('tel-button',$post->ID); ?>" target="_blank"><i class="fa fa-phone-square" aria-hidden="true"></i>電話で予約する
231
+ <a href="tel:<?php the_field('tel-button',$post->ID); ?>" target="_blank"><i class="fa fa-phone-square" aria-hidden="true"></i>電話で予約
232
232
 
233
233
  </a>
234
234
 
@@ -310,9 +310,7 @@
310
310
 
311
311
  <div class="btn-wrap aligncenter simple big">
312
312
 
313
- <a href="tel:<?php the_field('tel-button',$post->ID); ?>" target="_blank"><i class="fa fa-phone-square" aria-hidden="true"></i>電話で予約する<br>
313
+ <a href="tel:<?php the_field('tel-button',$post->ID); ?>" target="_blank"><i class="fa fa-phone-square" aria-hidden="true"></i>電話で予約する</a>
314
-
315
- （スマホの場合タップすると電話がつながります）</a>
316
314
 
317
315
  </div>
318
316
 
@@ -322,7 +320,7 @@
322
320
 
323
321
  <div class="btn-wrap aligncenter simple big">
324
322
 
325
- <a href="<?php the_field('web-reserve-button',$post->ID); ?>" target="_blank">Web予約をする</a>
323
+ <a href="<?php the_field('web-reserve-button',$post->ID); ?>" target="_blank">Web予約</a>
326
324
 
327
325
  </div>
328
326
 
@@ -334,9 +332,7 @@
334
332
 
335
333
  <div class="btn-wrap aligncenter simple big">
336
334
 
337
- <a href="tel:<?php the_field('tel-button',$post->ID); ?>" target="_blank"><i class="fa fa-phone-square" aria-hidden="true"></i>電話で予約する<br>
335
+ <a href="tel:<?php the_field('tel-button',$post->ID); ?>" target="_blank"><i class="fa fa-phone-square" aria-hidden="true"></i>電話で予約する</a>
338
-
339
- （スマホの場合タップすると電話がつながります）</a>
340
336
 
341
337
  </div>
342
338
 
@@ -348,7 +344,7 @@
348
344
 
349
345
  <div class="btn-wrap aligncenter simple big">
350
346
 
351
- <a href="<?php the_field('web-reserve-button',$post->ID); ?>" target="_blank">Web予約をする</a>
347
+ <a href="<?php the_field('web-reserve-button',$post->ID); ?>" target="_blank">Web予約</a>
352
348
 
353
349
  </div>
354
350
 

9

文言修正

2017/07/29 07:56

投稿

akkkkin
akkkkin

スコア83

test CHANGED
File without changes
test CHANGED
@@ -318,6 +318,16 @@
318
318
 
319
319
  </div>
320
320
 
321
+ <div class="d-1of2 t-1of2 m-all">
322
+
323
+ <div class="btn-wrap aligncenter simple big">
324
+
325
+ <a href="<?php the_field('web-reserve-button',$post->ID); ?>" target="_blank">Web予約をする</a>
326
+
327
+ </div>
328
+
329
+ </div>
330
+
321
331
  <?php elseif: ?>
322
332
 
323
333
  <div class="text-center">

8

文言追記

2017/07/29 07:54

投稿

akkkkin
akkkkin

スコア83

test CHANGED
File without changes
test CHANGED
@@ -296,4 +296,62 @@
296
296
 
297
297
 
298
298
 
299
+ 下記のように記述したのですが、リクエストを処理できませんとなり、画面を表示することができません。
300
+
301
+
302
+
303
+ ```ここに言語を入力
304
+
305
+ <div class="column-wrap cf ">
306
+
307
+ <?php if the_field('tel-button',$post->ID)and('web-reserve-button',$post->ID) :?>
308
+
309
+ <div class="d-1of2 t-1of2 m-all">
310
+
311
+ <div class="btn-wrap aligncenter simple big">
312
+
313
+ <a href="tel:<?php the_field('tel-button',$post->ID); ?>" target="_blank"><i class="fa fa-phone-square" aria-hidden="true"></i>電話で予約する<br>
314
+
315
+ （スマホの場合タップすると電話がつながります）</a>
316
+
317
+ </div>
318
+
319
+ </div>
320
+
321
+ <?php elseif: ?>
322
+
323
+ <div class="text-center">
324
+
325
+ <div class="btn-wrap aligncenter simple big">
326
+
327
+ <a href="tel:<?php the_field('tel-button',$post->ID); ?>" target="_blank"><i class="fa fa-phone-square" aria-hidden="true"></i>電話で予約する<br>
328
+
329
+ （スマホの場合タップすると電話がつながります）</a>
330
+
331
+ </div>
332
+
333
+ </div>
334
+
335
+ <?php elseif: ?>
336
+
337
+ <div class="text-center">
338
+
339
+ <div class="btn-wrap aligncenter simple big">
340
+
341
+ <a href="<?php the_field('web-reserve-button',$post->ID); ?>" target="_blank">Web予約をする</a>
342
+
343
+ </div>
344
+
345
+ </div>
346
+
347
+ <?php endif; ?>
348
+
349
+ </div>
350
+
351
+ ```
352
+
353
+
354
+
355
+
356
+
299
357
  もし詳しい方がいらっしゃればご教示いただきたく思います。

7

文言修正

2017/07/29 07:52

投稿

akkkkin
akkkkin

スコア83

test CHANGED
File without changes
test CHANGED
@@ -216,7 +216,7 @@
216
216
 
217
217
  the_field('web-reserve-button',$post->ID)
218
218
 
219
- に入力があったときは
219
+ に両方文字列の入力があったときは
220
220
 
221
221
 
222
222
 

6

文言修正。

2017/07/29 00:59

投稿

akkkkin
akkkkin

スコア83

test CHANGED
File without changes
test CHANGED
@@ -206,4 +206,94 @@
206
206
 
207
207
 
208
208
 
209
+ つまり、
210
+
211
+
212
+
213
+ the_field('tel-button',$post->ID)
214
+
215
+ と
216
+
217
+ the_field('web-reserve-button',$post->ID)
218
+
219
+ に入力があったときは
220
+
221
+
222
+
223
+ ```ここに言語を入力
224
+
225
+ <div class="column-wrap cf ">
226
+
227
+ <div class="d-1of2 t-1of2 m-all"><!-- 2カラム表示のスタイリング -->
228
+
229
+ <div class="btn-wrap aligncenter simple big">
230
+
231
+ <a href="tel:<?php the_field('tel-button',$post->ID); ?>" target="_blank"><i class="fa fa-phone-square" aria-hidden="true"></i>電話で予約する
232
+
233
+ </a>
234
+
235
+ </div>
236
+
237
+ </div>
238
+
239
+
240
+
241
+ <div class="d-1of2 t-1of2 m-all"><!-- 2カラム表示のスタイリング -->
242
+
243
+ <div class="btn-wrap aligncenter simple big">
244
+
245
+ <a href="<?php the_field('web-reserve-button',$post->ID); ?>" target="_blank">Web予約</a>
246
+
247
+ </div>
248
+
249
+ </div>
250
+
251
+ </div>
252
+
253
+ ```
254
+
255
+ と表示し、
256
+
257
+ the_field('tel-button',$post->ID)
258
+
259
+ だけ入力があった場合は
260
+
261
+ ```ここに言語を入力
262
+
263
+ <div class="text-center">
264
+
265
+ <div class="btn-wrap aligncenter simple big">
266
+
267
+ <a href="<?php the_field('tel-button',$post->ID); ?>" target="_blank">Web予約</a>
268
+
269
+ </div>
270
+
271
+ </div>
272
+
273
+ ```
274
+
275
+ だけを表示し、
276
+
277
+ the_field('web-reserve-button',$post->ID)
278
+
279
+ だけ入力があった場合は
280
+
281
+ ```ここに言語を入力
282
+
283
+ <div class="text-center">
284
+
285
+ <div class="btn-wrap aligncenter simple big">
286
+
287
+ <a href="<?php the_field('web-reserve-button',$post->ID); ?>" target="_blank">Web予約</a>
288
+
289
+ </div>
290
+
291
+ </div>
292
+
293
+ ```
294
+
295
+ としたいのですが、どのように記述すればいいのでしょうか。
296
+
297
+
298
+
209
299
  もし詳しい方がいらっしゃればご教示いただきたく思います。

5

文言修正

2017/07/29 00:58

投稿

akkkkin
akkkkin

スコア83

test CHANGED
File without changes
test CHANGED
@@ -190,9 +190,7 @@
190
190
 
191
191
 
192
192
 
193
- @media only screen and (min-width: 1100px)
193
+ @media only screen and (min-width: 1100px){
194
-
195
- shortcode.css:345
196
194
 
197
195
  .column-wrap {
198
196
 

4

誤字

2017/07/27 09:27

投稿

akkkkin
akkkkin

スコア83

test CHANGED
File without changes
test CHANGED
@@ -128,6 +128,8 @@
128
128
 
129
129
  CSSは下記です。
130
130
 
131
+ ```ここに言語を入力
132
+
131
133
  @media only screen and (min-width: 1100px) {
132
134
 
133
135
  .d-all {
@@ -200,6 +202,8 @@
200
202
 
201
203
 
202
204
 
205
+ ```
206
+
203
207
  できるとすればどのような書き方になるのでしょうか。
204
208
 
205
209
 

3

CSS追加

2017/07/27 09:25

投稿

akkkkin
akkkkin

スコア83

test CHANGED
File without changes
test CHANGED
@@ -126,6 +126,80 @@
126
126
 
127
127
 
128
128
 
129
+ CSSは下記です。
130
+
131
+ @media only screen and (min-width: 1100px) {
132
+
133
+ .d-all {
134
+
135
+ float: left;
136
+
137
+ padding-right: 0.75em;
138
+
139
+ width: 100%;
140
+
141
+ padding-right: 0; }
142
+
143
+ .d-1of2 {
144
+
145
+ float: left;
146
+
147
+ padding-right: 0.75em;
148
+
149
+ width: 50%; }
150
+
151
+ }
152
+
153
+
154
+
155
+ @media only screen and (min-width: 768px) and (max-width: 1099px) {
156
+
157
+ /* グリッドシステム */
158
+
159
+ .t-1of2 {
160
+
161
+ float: left;
162
+
163
+ padding-right: 0.75em;
164
+
165
+ width: 50%; }
166
+
167
+ }
168
+
169
+
170
+
171
+ @media only screen and (max-width: 767px) {
172
+
173
+ /* グリッドシステム */
174
+
175
+ .m-all {
176
+
177
+ float: left;
178
+
179
+ padding-right: 0.75em;
180
+
181
+ width: 100%;
182
+
183
+ padding-right: 0;
184
+
185
+ margin-bottom: .5em; }
186
+
187
+ }
188
+
189
+
190
+
191
+ @media only screen and (min-width: 1100px)
192
+
193
+ shortcode.css:345
194
+
195
+ .column-wrap {
196
+
197
+ width: 100%;}
198
+
199
+ }
200
+
201
+
202
+
129
203
  できるとすればどのような書き方になるのでしょうか。
130
204
 
131
205
 

2

文言修正

2017/07/27 09:25

投稿

akkkkin
akkkkin

スコア83

test CHANGED
File without changes
test CHANGED
@@ -100,6 +100,8 @@
100
100
 
101
101
  今のところ解消法として、Web予約しか使わないときは、
102
102
 
103
+ ```ここに言語を入力
104
+
103
105
  <div class="text-center">
104
106
 
105
107
  <div class="btn-wrap aligncenter simple big">
@@ -109,6 +111,8 @@
109
111
  </div>
110
112
 
111
113
  </div>
114
+
115
+ ```
112
116
 
113
117
  とソース自体を都度変更しています。
114
118
 

1

修正

2017/07/27 09:16

投稿

akkkkin
akkkkin

スコア83

test CHANGED
File without changes
test CHANGED
@@ -108,6 +108,8 @@
108
108
 
109
109
  </div>
110
110
 
111
+ </div>
112
+
111
113
  とソース自体を都度変更しています。
112
114
 
113
115