質問編集履歴

4

文字修正

2020/11/27 01:00

投稿

mo__fumi
mo__fumi

スコア13

test CHANGED
File without changes
test CHANGED
@@ -50,6 +50,12 @@
50
50
 
51
51
  これが 1. 2. の場合でも「+」「ー」がチェンジするようにしたいです。
52
52
 
53
+ どなたかご教示、ご指摘賜りたいです。
54
+
55
+ よろしくお願いいたします。
56
+
57
+
58
+
53
59
  以下コードです。
54
60
 
55
61
 

3

文字修正

2020/11/27 01:00

投稿

mo__fumi
mo__fumi

スコア13

test CHANGED
File without changes
test CHANGED
@@ -38,6 +38,8 @@
38
38
 
39
39
  コンテンツタイトル横に「ー」が表示されるようになっています。
40
40
 
41
+
42
+
41
43
  これが上記の
42
44
 
43
45
  3.コンテンツ自体を押すとアコーディオン開閉する。
@@ -160,7 +162,7 @@
160
162
 
161
163
 
162
164
 
163
-      -- 以下省略。同じ<section>~</section>の内容があと7個続きます。 --
165
+      -- 以下省略。同じ<section>~</section>の内容があと6個続きます。 --
164
166
 
165
167
 
166
168
 

2

コードが抜けていました

2020/11/27 00:59

投稿

mo__fumi
mo__fumi

スコア13

test CHANGED
File without changes
test CHANGED
@@ -158,234 +158,450 @@
158
158
 
159
159
  </section>
160
160
 
161
- <section>
161
+
162
-
163
- <div class="title-acd" id="link-03">
162
+
164
-
165
- <h4>遺品供養</h4>
166
-
167
- </div><!-- title-acd -->
168
-
169
- <div class="contWrap">
170
-
171
- <h5>
172
-
173
- お寺にて供養を行います。
174
-
175
- </h5>
176
-
177
- <div class="text">
178
-
179
- <p>
180
-
181
- ご遺族様のなかには、故人様の想い出の品や、愛用品などを、不用品として処分してしまうのには気が引ける、という方も多いと思います。<br>
182
-
183
- 弊社では故人様の想い出の品、愛用品や、人形やお札、仏具や神棚などを、お客様のご希望に沿った方法での供養させていただきます。<br>
184
-
185
- 弊社供養施設や提携寺院での合同供養を無料で承っております。ご遺族様のお手間にならない様、お花やお線香、お鈴など、必要な仏具なども弊社でご準備させていただきます。<br>
186
-
187
- ご供養は一点からでもお受けいたします。お気軽にお申し付けください。遺族様の故人様へのお気持ちを大切に、責任を持ってご供養いたします。
188
-
189
- </p>
190
-
191
- <img src="<?php echo get_template_directory_uri() ?>/img/service/img-01.png" alt="">
192
-
193
- </div><!-- /text -->
163
+      -- 以下省略。同じ<section>~</section>の内容があと7個続きます。 --
194
-
195
- </div><!-- contWrap -->
164
+
196
-
197
- </section>
165
+
198
-
199
- <section>
200
-
201
- <div class="title-acd" id="link-04">
202
-
203
- <h4>特殊清掃</h4>
204
-
205
- </div><!-- title-acd -->
206
-
207
- <div class="contWrap">
208
-
209
- <h5>
210
-
211
- 特殊な汚れ・臭いなどお客様では難しい作業もお任せください
212
-
213
- </h5>
214
-
215
- <div class="text">
216
-
217
- <p>
218
-
219
- 近年残念ながら、「孤独死」と呼ばれる、誰にも知られることなく、一人で亡くなる方が多くおられます。<br>
220
-
221
- そのためご遺体の発見が遅れ、結果的にお住まいやお部屋がひどく汚染されてしまうご自宅が多くあります。害虫が発生したり、異臭が発生したりと様々なケースがございます。<br>
222
-
223
- また、足腰が弱り、ごみの処理ができずに「ごみ屋敷」と化してしまったお宅にも同様です。<br>
224
-
225
- こういったケースの場合、ご遺族様で完璧に元通りにするには技術的に難しく、非常に大きな精神的負担がかかります。弊社ではこのような特殊な現場の清掃作業も承っております。<br>
226
-
227
- 一般業者では取り扱うことのない薬剤や機械も所有していますので完璧に清掃、消臭まで代行可能です。<br>
228
-
229
- もちろん処理後の遺品整理にも対応しておりますので、お部屋を完全に整理するまでの流れもスムーズです。
230
-
231
- </p>
232
-
233
- <img src="<?php echo get_template_directory_uri() ?>/img/service/img-01.png" alt="">
234
-
235
- </div><!-- /text -->
236
-
237
- </div><!-- contWrap -->
238
-
239
- </section>
240
-
241
- <section>
242
-
243
- <div class="title-acd" id="link-05">
244
-
245
- <h4>室内除菌</h4>
246
-
247
- </div><!-- title-acd -->
248
-
249
- <div class="contWrap">
250
-
251
- <h5>
252
-
253
- これはダミーです。
254
-
255
- </h5>
256
-
257
- <div class="text">
258
-
259
- <p>
260
-
261
- ダミーです。
262
-
263
- </p>
264
-
265
- <img src="<?php echo get_template_directory_uri() ?>/img/service/img-01.png" alt="">
266
-
267
- </div><!-- /text -->
268
-
269
- </div><!-- contWrap -->
270
-
271
- </section>
272
-
273
- <section>
274
-
275
- <div class="title-acd" id="link-06">
276
-
277
- <h4>不用品買取</h4>
278
-
279
- </div><!-- title-acd -->
280
-
281
- <div class="contWrap">
282
-
283
- <h5>
284
-
285
- 価値のあるものは高値で買取いたします
286
-
287
- </h5>
288
-
289
- <div class="text">
290
-
291
- <p>
292
-
293
- 弊社では、ご遺品をはじめから不用品として処分することはありません!まずは買取のご提案をさせていただいています。<br>
294
-
295
- 家具や家電等の家財から日用品、農具まで幅広い種類のご遺品を買い取ることが出来ます。ご遺族にとっては不用品であっても、弊社がその価値を見出し、高価買取査定いたします。<br>
296
-
297
- 積極的に買取を行い、リサイクル、リユースをすることによって、廃棄・処分にかかるコストを削減することが可能です。<br>
298
-
299
- 弊社では迅速に対応、高価買取・査定、その場でのお引き取りも可能です。どうぞご遠慮なくお申し付けください。
300
-
301
- </p>
302
-
303
- <img src="<?php echo get_template_directory_uri() ?>/img/service/img-01.png" alt="">
304
-
305
- </div><!-- /text -->
306
-
307
- </div><!-- contWrap -->
308
-
309
- </section>
310
-
311
- <section>
312
-
313
- <div class="title-acd" id="link-07">
314
-
315
- <h4>仏壇クリーニング</h4>
316
-
317
- </div><!-- title-acd -->
318
-
319
- <div class="contWrap">
320
-
321
- <h5>
322
-
323
- 大切なお仏壇をきれいにしませんか
324
-
325
- </h5>
326
-
327
- <div class="text">
328
-
329
- <p>
330
-
331
- 先祖代々受け継いできたお仏壇、ほこりやろうそくの煤によるくすみ、経年劣化で漆や金箔がはがれてしまったりしませんか?<br>
332
-
333
- ご親族が亡くなられた場合、各遺品の品と同時に仏壇も受け継ぐことも多と思います。<br>
334
-
335
- 綺麗にしたいけれど仏壇の修復や洗濯は時間もお金もかかる、どのように修理したらいいか分からない…とお悩みをいただくことがあります。<br>
336
-
337
- 弊社なら遺品整理からワンストップでお仏壇クリーニングも承ります。遺品整理から行うので日程も短く済みます。<br>
338
-
339
- お洗濯や修復とは違い、解体をせず、特殊技術でクリーニングしますので、低価格で見違えるほどきれいなお仏壇にしてお返しできます。
340
-
341
- </p>
342
-
343
- <img src="<?php echo get_template_directory_uri() ?>/img/service/img-01.png" alt="">
344
-
345
- </div><!-- /text -->
346
-
347
- </div><!-- contWrap -->
348
-
349
- </section>
350
-
351
- <section>
352
-
353
- <div class="title-acd" id="link-08">
354
-
355
- <h4>各種手続き代行</h4>
356
-
357
- </div><!-- title-acd -->
358
-
359
- <div class="contWrap">
360
-
361
- <h5>
362
-
363
- 面倒な手続きも代行します
364
-
365
- </h5>
366
-
367
- <div class="text">
368
-
369
- <p>
370
-
371
- 弊社では各種手続きの代行サービスもご用意しております。<br>
372
-
373
- 遺品整理時に出てきた保険証券や銀行通帳、「どのように手続きをしたらいいか」お困りになる方もおられると思います。お忙しいご遺族に代わって、弊社がお手続きいたします。<br>
374
-
375
- ご親族が亡くなられた際に問題になる車・バイクの処分、土地や住宅の名義変更手続き、生命保険等、各種保険の照会や解約等も遺品整理と合わせてご依頼ください。<br>
376
-
377
- 大事な手続きも弊社にお任せいただければ、確実に滞りなく手続きを進めさせていただきます。
378
-
379
- </p>
380
-
381
- <img src="<?php echo get_template_directory_uri() ?>/img/service/img-01.png" alt="">
382
-
383
- </div><!-- /text -->
384
-
385
- </div><!-- contWrap -->
386
-
387
- </section>
388
166
 
389
167
  </div><!-- /container -->
390
168
 
391
169
  ```
170
+
171
+
172
+
173
+ ```CSS
174
+
175
+ .menu {
176
+
177
+ margin-bottom: 45px;
178
+
179
+ @include pc {
180
+
181
+ margin-bottom: 25px;
182
+
183
+ }
184
+
185
+ h3 {
186
+
187
+ background-color: #47902f;
188
+
189
+ color: #fff;
190
+
191
+ font-size: 22px;
192
+
193
+ font-weight: bold;
194
+
195
+ padding: 5px 0;
196
+
197
+ text-align: center;
198
+
199
+ margin-bottom: 15px;
200
+
201
+ @include tab {
202
+
203
+ font-size: 20px;
204
+
205
+ }
206
+
207
+ }
208
+
209
+ ul {
210
+
211
+ text-align: center;
212
+
213
+ -ms-flex-pack: distribute;
214
+
215
+ justify-content: space-around;
216
+
217
+ -ms-flex-wrap: wrap;
218
+
219
+ flex-wrap: wrap;
220
+
221
+ @include tab {
222
+
223
+ max-width: 400px;
224
+
225
+ width: 100%;
226
+
227
+ margin: auto;
228
+
229
+ }
230
+
231
+ @include sp {
232
+
233
+ max-width: 350px;
234
+
235
+ }
236
+
237
+ li {
238
+
239
+ font-size: 18px;
240
+
241
+ font-weight: bold;
242
+
243
+ @include pc {
244
+
245
+ margin-bottom: 20px;
246
+
247
+ font-size: 14px;
248
+
249
+ }
250
+
251
+ @include tab {
252
+
253
+ font-size: 15px;
254
+
255
+ padding-right: 5px;
256
+
257
+ padding-left: 5px;
258
+
259
+ }
260
+
261
+ @include sp {
262
+
263
+ padding-right: 15px;
264
+
265
+ padding-left: 15px;
266
+
267
+ }
268
+
269
+ a {
270
+
271
+ &:after {
272
+
273
+ content: "▼";
274
+
275
+ display: block;
276
+
277
+ color: #47902f;
278
+
279
+ font-size: 14px;
280
+
281
+ }
282
+
283
+ }
284
+
285
+ }
286
+
287
+ }
288
+
289
+ }
290
+
291
+ .title-acd {
292
+
293
+ background-color: #47902f;
294
+
295
+ color: #fff;
296
+
297
+ font-size: 22px;
298
+
299
+ font-weight: bold;
300
+
301
+ padding: 0 25px;
302
+
303
+ margin-top: 30px;
304
+
305
+ display: -webkit-box;
306
+
307
+ display: -ms-flexbox;
308
+
309
+ display: flex;
310
+
311
+ -webkit-box-align: center;
312
+
313
+ -ms-flex-align: center;
314
+
315
+ align-items: center;
316
+
317
+ -webkit-box-pack: justify;
318
+
319
+ -ms-flex-pack: justify;
320
+
321
+ justify-content: space-between;
322
+
323
+ &:after {
324
+
325
+ content: "+";
326
+
327
+ font-size: 30px;
328
+
329
+ }
330
+
331
+ @include tab {
332
+
333
+ font-size: 20px;
334
+
335
+ }
336
+
337
+ &:hover {
338
+
339
+ cursor: pointer;
340
+
341
+ }
342
+
343
+ }
344
+
345
+ .active {
346
+
347
+ &:after {
348
+
349
+ content: "−";
350
+
351
+ }
352
+
353
+ }
354
+
355
+ .contWrap {
356
+
357
+ margin-right: 30px;
358
+
359
+ margin-left: 30px;
360
+
361
+ padding-top: 20px;
362
+
363
+ @include tab {
364
+
365
+ margin-right: 5px;
366
+
367
+ margin-left: 5px;
368
+
369
+ }
370
+
371
+ h5 {
372
+
373
+ font-size: 17px;
374
+
375
+ font-weight: bold;
376
+
377
+ margin-bottom: 15px;
378
+
379
+ }
380
+
381
+ .text {
382
+
383
+ display: -webkit-box;
384
+
385
+ display: -ms-flexbox;
386
+
387
+ display: flex;
388
+
389
+ -webkit-box-align: center;
390
+
391
+ -ms-flex-align: center;
392
+
393
+ align-items: center;
394
+
395
+ -webkit-box-pack: justify;
396
+
397
+ -ms-flex-pack: justify;
398
+
399
+ justify-content: space-between;
400
+
401
+ @include tab {
402
+
403
+ -webkit-box-orient: vertical;
404
+
405
+ -webkit-box-direction: normal;
406
+
407
+ -ms-flex-direction: column;
408
+
409
+ flex-direction: column;
410
+
411
+ }
412
+
413
+ p {
414
+
415
+ font-size: 14px;
416
+
417
+ font-weight: bold;
418
+
419
+ line-height: 2;
420
+
421
+ margin-right: 10px;
422
+
423
+ @include sp {
424
+
425
+ font-size: 13px;
426
+
427
+ line-height: 1.8;
428
+
429
+ }
430
+
431
+ @include tab {
432
+
433
+ margin-right: 0;
434
+
435
+ margin-bottom: 10px;
436
+
437
+ }
438
+
439
+ }
440
+
441
+ img {
442
+
443
+ @include pc {
444
+
445
+ width: 250px;
446
+
447
+ }
448
+
449
+ @include tab {
450
+
451
+ width: 300px;
452
+
453
+ }
454
+
455
+ @include sp {
456
+
457
+ width: 280px;
458
+
459
+ }
460
+
461
+ }
462
+
463
+ }
464
+
465
+ }
466
+
467
+ ```
468
+
469
+
470
+
471
+ ```jQuery
472
+
473
+ /**
474
+
475
+ * アコーディオンメニュー
476
+
477
+ */
478
+
479
+ $(function () {
480
+
481
+ $(".title-acd").on("click", function () {
482
+
483
+ $(this).next().slideToggle();
484
+
485
+ $(this).toggleClass('active');
486
+
487
+ });
488
+
489
+ });
490
+
491
+
492
+
493
+
494
+
495
+ /**
496
+
497
+ * サービスページアンカー
498
+
499
+ */
500
+
501
+ // 着いた瞬間に開く
502
+
503
+ jQuery(function () {
504
+
505
+ jQuery('.contWrap').hide();
506
+
507
+ jQuery('a[href^="#"').on('click', function () {
508
+
509
+ jQuery('.contWrap').hide();
510
+
511
+ jQuery(jQuery(this).attr('href')).next('.contWrap').show();
512
+
513
+ });
514
+
515
+ });
516
+
517
+
518
+
519
+ // スクロール
520
+
521
+ jQuery(function () {
522
+
523
+ var headerHight = jQuery('header').outerHeight();
524
+
525
+ jQuery(".menu-01").click(function () {
526
+
527
+ const p = jQuery("#link-01").offset().top - headerHight;
528
+
529
+ jQuery('html,body').animate({ scrollTop: p }, '2000');
530
+
531
+ return false;
532
+
533
+ });
534
+
535
+ jQuery(".menu-02").click(function () {
536
+
537
+ const p = jQuery("#link-02").offset().top - headerHight;
538
+
539
+ jQuery('html,body').animate({ scrollTop: p }, '2000');
540
+
541
+ return false;
542
+
543
+ });
544
+
545
+ jQuery(".menu-03").click(function () {
546
+
547
+ const p = jQuery("#link-03").offset().top - headerHight;
548
+
549
+ jQuery('html,body').animate({ scrollTop: p }, '2000');
550
+
551
+ return false;
552
+
553
+ });
554
+
555
+ jQuery(".menu-04").click(function () {
556
+
557
+ const p = jQuery("#link-04").offset().top - headerHight;
558
+
559
+ jQuery('html,body').animate({ scrollTop: p }, '2000');
560
+
561
+ return false;
562
+
563
+ });
564
+
565
+ jQuery(".menu-05").click(function () {
566
+
567
+ const p = jQuery("#link-05").offset().top - headerHight;
568
+
569
+ jQuery('html,body').animate({ scrollTop: p }, '2000');
570
+
571
+ return false;
572
+
573
+ });
574
+
575
+ jQuery(".menu-06").click(function () {
576
+
577
+ const p = jQuery("#link-06").offset().top - headerHight;
578
+
579
+ jQuery('html,body').animate({ scrollTop: p }, '2000');
580
+
581
+ return false;
582
+
583
+ });
584
+
585
+ jQuery(".menu-07").click(function () {
586
+
587
+ const p = jQuery("#link-07").offset().top - headerHight;
588
+
589
+ jQuery('html,body').animate({ scrollTop: p }, '2000');
590
+
591
+ return false;
592
+
593
+ });
594
+
595
+ jQuery(".menu-08").click(function () {
596
+
597
+ const p = jQuery("#link-08").offset().top - headerHight;
598
+
599
+ jQuery('html,body').animate({ scrollTop: p }, '2000');
600
+
601
+ return false;
602
+
603
+ });
604
+
605
+ });
606
+
607
+ ```

1

文字の修正

2020/11/27 00:58

投稿

mo__fumi
mo__fumi

スコア13

test CHANGED
File without changes
test CHANGED
@@ -40,7 +40,7 @@
40
40
 
41
41
  これが上記の
42
42
 
43
- 3. コンテンツ自体を押すとアコーディオン開閉する。
43
+ 3.コンテンツ自体を押すとアコーディオン開閉する。
44
44
 
45
45
  この場合は作動するのですが、 1. 2. の場合は作動せず、元の表示が「+」であれば「+」のまま、「ー」であれば「ー」のまま、アンカーリンク に飛びコンテンツが開閉してしまいます。
46
46