質問編集履歴

1

回答が得られなかったため、より詳細に記述した

2022/06/26 14:48

投稿

of_the_Europa
of_the_Europa

スコア66

test CHANGED
File without changes
test CHANGED
@@ -30,6 +30,133 @@
30
30
 
31
31
  これ以外に、show()、hide()、fxdAria.css('display','block') などを試してみましたが、状況は同じでした。メソッドの問題ではないのかもしれません。htmlではfxdAriaの要素をfooterの中ではなく外に記述してみましたが、それも動作は変わりませんでした。
32
32
 
33
+ 以下、wordpressのfooter.phpとscssの記述になります。
34
+
35
+
36
+ **footer.php**
37
+ ```ここに言語を入力
38
+
39
+ <footer class="pb-4">
40
+ <div class="text-center mb-5">
41
+ <a href="#" class="col-2 text-white">企業情報</a>
42
+ <a href="#" class="col-3 text-white">個人情報について</a>
43
+ <a href="#" class="col-5 text-white">情報セキュリティーポリシー</a>
44
+ </div>
45
+ <p class="text-center w-100 text-white">Copyright © xxxxxxxxxx All rights reserved.</p>
46
+ <div class="fxd_aria fixed-bottom">
47
+ <div href="header" class="top_btn w-100 text-right">
48
+ <a href="#">
49
+ <img src="<?php echo get_template_directory_uri(); ?>/images/sp/pagetop_btn_sp.png"
50
+ alt="ページトップボタン">
51
+ </a>
52
+ </div>
53
+ <div class="apl_btn text-center">
54
+ <button class="w-100">
55
+ <a href="#" class="text-center text-white">今すぐ申し込む</a>
56
+ </button>
57
+ </div>
58
+ </div>
59
+ </footer>
60
+
61
+ ```
62
+
63
+
64
+ **mystyle.scss**
65
+ ```ここに言語を入力
66
+
67
+
68
+ .fxd_aria{
69
+ background: transparent;
70
+ border: none;
71
+ display: none;
72
+
73
+
74
+ .top_btn{
75
+ background: transparent;
76
+ padding: 0 2.5rem 1rem 0;
77
+
78
+ a{
79
+ border: none;
80
+ outline: none;
81
+ text-decoration: none;
82
+ color: #fff;
83
+
84
+ img{
85
+ height: 6rem;
86
+ width: 6rem;
87
+ }
88
+ }
89
+
90
+ }
91
+
92
+ @include mq(sp){
93
+ .top_btn{
94
+ padding-right: 0 !important;
95
+
96
+ a img{
97
+ width: 4.5rem;
98
+ height: 4.5rem;
99
+ }
100
+ }
101
+ }
102
+
103
+ .apl_btn{
104
+ padding: 2.5rem 3rem;
105
+ background: rgba(0,0,0,0.7);
106
+
107
+ button{
108
+ padding: 2.5rem 3rem;
109
+ background: $acsent_P;
110
+ border-radius: 4rem;
111
+ border: none;
112
+ outline: none;
113
+ display: block;
114
+ position: relative;
115
+ max-width: 80rem;
116
+ box-shadow: 0 0.3rem 0 0 #6d1fdc;
117
+ transition: opacity .4s;
118
+ margin: 0 auto;
119
+
120
+
121
+ a{
122
+ font-weight: 700;
123
+ letter-spacing: 0.03em;
124
+ text-decoration: none;
125
+ font-size: 2.1rem;
126
+ border-left: none;
127
+ }
128
+
129
+ &::after{
130
+ content: '\f105';
131
+ font-family: FontAwesome;
132
+ position: absolute;
133
+ right: 5%;
134
+ top: 30%;
135
+ color: #fff;
136
+ font-size: 2.1rem;
137
+ }
138
+ }
139
+
140
+ @include mq(sp){
141
+ padding: 1.5rem 3rem;
142
+
143
+ button{
144
+ padding: 1.2rem 1.5rem;
145
+
146
+ &::after{
147
+ right: 8%;
148
+ top: 15%;
149
+ }
150
+
151
+ a{
152
+ font-size: 1.4rem;
153
+ }
154
+ }
155
+ }
156
+ }
157
+ }
158
+ ```
159
+
33
160
 
34
161
  地味に長い間実現できずにおります。
35
162
  どうかお力をいただけたら幸いです。