teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

HTML,CSSを追記しました。また、console.log(”OK”)を出力した件ですが、これは問題なく出てました。

2021/03/30 13:10

投稿

ebina
ebina

スコア3

title CHANGED
File without changes
body CHANGED
@@ -34,7 +34,151 @@
34
34
  });
35
35
 
36
36
  ```
37
+ ```HTML
38
+ <body>
39
+ <a href="<?php echo esc_url( home_url( '/' ) ); ?>#contact" class="btn_mails">
40
+ <img src="<?php echo get_template_directory_uri(); ?>/images/common/btn_fix.svg" alt="メールで相談">
41
+ </a>
42
+ <header>
43
+ <div class="wrapper">
44
+ <img class="header_img "src="<?php echo get_template_directory_uri(); ?>/images/takagiimg/sample_topimg.jpg">
45
+ <div class="mobile_header">
46
+ <ul class="mobile_menu_logo">
47
+ <li><a href=""><i class="fas fa-home"></i><br>ホーム</a></li>
48
+ <li><a href=""><i class="fas fa-building"></i><br>会社概要</a></li>
49
+ <li><a href=""><i class="fas fa-envelope-open-text"></i><br>お問い合わせ</a></li>
50
+ <li><a class="hamburger-menu-btn"><i class="fas fa-bars"></i><br>MENU</a></li>
51
+ </ul>
52
+ </div>
53
+ <div class="pc_menu_bar">
54
+ <div class="pc_header">
55
+ <span class="pcmenu_logo">
56
+ <img src="<?php echo get_template_directory_uri(); ?>/images/samplelogo.png">
57
+ </span>
58
+ <div class="pcmenu_list">
59
+ <ul class="pcmenu_list_ul">
60
+ <li><a href=""><span class="pcmenu_list_en">SERVICE</span><br>サービス</a></li>
61
+ <li><a href=""><span class="pcmenu_list_en">EXAMPLE</span><br>制作実績</a></li>
62
+ <li><a href=""><span class="pcmenu_list_en">STRONG</span><br>得意なこと</a></li>
63
+ <li><a href=""><span class="pcmenu_list_en">COMPANY</span><br>会社概要</a></li>
64
+ <li><a href=""><span class="pcmenu_list_en">COLUMN</span><br>コラム</a></li>
65
+ <li><a href=""><span class="pcmenu_list_en">CONTACT</span><br>お問い合わせ</a></li>
66
+ <ul>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </header>
72
+ <article class="page single">
73
+ <div class="content_area">
74
+ <div class="bread">
75
+ <div class="content_inner_are">
76
+ <div class="hamburger-menu">
77
+ <ul>
78
+ <li><a href="" class="menu__item"><span class="hamburger-menu-item-en">TOP</span><apan class="hamburger-menu-item-ja">トップ&emsp; <i class="fas fa-chevron-right"></i></i></apan></a></li>
79
+ <li><a href="" class="menu__item"><span class="hamburger-menu-item-en">SERVICE</span><apan class="hamburger-menu-item-ja">サービス&emsp; <i class="fas fa-chevron-right"></i></apan></a></li>
80
+ <li><a href="" class="menu__item"><span class="hamburger-menu-item-en">EXAMPLE</span><apan class="hamburger-menu-item-ja">制作事例&emsp; <i class="fas fa-chevron-right"></i></apan></a></li>
81
+ <li><a href="" class="menu__item"><span class="hamburger-menu-item-en">STRONG</span><apan class="hamburger-menu-item-ja">得意なこと&emsp; <i class="fas fa-chevron-right"></i></apan></a></li>
82
+ <li><a href="" class="menu__item"><span class="hamburger-menu-item-en">COMPANY</span><apan class="hamburger-menu-item-ja">会社概要&emsp; <i class="fas fa-chevron-right"></i></apan></a></li>
83
+ <li><a href="" class="menu__item"><span class="hamburger-menu-item-en">COLUMN</span><apan class="hamburger-menu-item-ja">コラム&emsp; <i class="fas fa-chevron-right"></i></apan></a></li>
84
+ </ul>
85
+ <a href="" class="hamburger-menu-item-btn">お問い合わせはこちら&emsp;<i class="fas fa-arrow-right"></i></a>
86
+ </div>
87
+ <div class="container">
88
+ <!--コンテンツが入ります-->
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </article>
93
+ <?php get_footer();?>
94
+ ```
95
+ ```CSS
37
96
 
97
+ /*----------------------------
98
+ * メニュー開閉ボタン
99
+ *----------------------------*/
100
+ .hamburger-menu-btn{
101
+ width: 40px;
102
+ height: 40px;
103
+ display: flex;
104
+ justify-content: center;
105
+ align-items: center;
106
+ color: #fff;
107
+ }
108
+
109
+ /*----------------------------
110
+ * メニュー本体
111
+ *----------------------------*/
112
+ .hamburger-menu{
113
+ position: absolute;
114
+ z-index: 2;
115
+ width: 100%;
116
+ background: #ffffff;
117
+
118
+ }
119
+ .menu__item{
120
+ width: 100%;
121
+ height: auto;
122
+ padding: .5em 1em;
123
+ color: #333333;
124
+ box-sizing: border-box;
125
+ }
126
+
127
+ .hamburger-menu ul {
128
+ list-style: none;
129
+ padding: 0;
130
+ }
131
+ .hamburger-menu ul li {
132
+ border-bottom: 1px solid #bbb;
133
+ padding: 12px 21px 11px 21px;
134
+
135
+ }
136
+ .hamburger-menu ul a {
137
+ display: block;
138
+ text-decoration: none;
139
+ display: flex;
140
+ justify-content: space-between;
141
+ }
142
+ .hamburger-menu-item-en{
143
+ font-size: 15px;
144
+ font-weight: 700;
145
+ margin-right: 15px;
146
+ }
147
+ .hamburger-menu-item-ja {
148
+ font-size: 11px;
149
+ font-weight: 500;
150
+ }
151
+ .hamburger-menu-item-btn {
152
+ display: block;
153
+ width: 287px;
154
+ height: 21px;
155
+ background-color: #333333;
156
+ color: #ffffff;
157
+ font-size: 12px;
158
+ text-align: center;
159
+ padding: 15px 24px;
160
+ text-decoration: none;
161
+ margin: 32px auto;
162
+ }
163
+
164
+ /*----------------------------
165
+ * アニメーション部分
166
+ *----------------------------*/
167
+
168
+ /* アニメーション前のメニューの状態 */
169
+ .hamburger-menu{
170
+ pointer-events: none;
171
+ opacity: 0;
172
+ transition: opacity .3s linear;
173
+ }
174
+ /* アニメーション後のメニューの状態 */
175
+ .hamburger-menu.is-active{
176
+ pointer-events: auto;
177
+ opacity: 1;
178
+ }
179
+ ```
180
+
181
+
38
182
  ### 試したこと
39
183
 
40
184
  ・ワードプレスは$は使えないとのことで、全て$→jQueryにしてます。
@@ -50,7 +194,7 @@
50
194
  });
51
195
  ```
52
196
 
53
- ・試しにconsole.log("OK"); を出力させようとしましたが、これもでせんでした。
197
+ ・試しにconsole.log("OK"); を出力させようとしましたが、これは問題なく出ました。
54
198
  ・他にもコードを少し書き換えたりしてみましたが、どれもだめでした。
55
199
 
56
200