質問編集履歴
2
htmlを追記しました。
test
CHANGED
File without changes
|
test
CHANGED
@@ -2,9 +2,13 @@
|
|
2
2
|
|
3
3
|
|
4
4
|
|
5
|
+
度々すみません、該当部分のHTMLを追記してみました。
|
6
|
+
|
7
|
+
|
8
|
+
|
5
9
|
初めての質問で要領を得ずすみません、ご指摘がありましたので質問を編集しました。
|
6
10
|
|
7
|
-
(※追記※部分とソースコード、エラー表示の画像)
|
11
|
+
(再度HTMLを追記しました。※追記※部分とソースコード、エラー表示の画像)
|
8
12
|
|
9
13
|
|
10
14
|
|
@@ -46,15 +50,11 @@
|
|
46
50
|
|
47
51
|
この図のスマホ用画像ヘッダが1枚表示されるのが理想のイメージなのですが、
|
48
52
|
|
49
|
-
divの指定等がおかしいのでしょうか?
|
50
|
-
|
51
|
-
|
52
|
-
|
53
53
|
テーマCSSに追加したのは下記部分です。よろしくお願い致します。
|
54
54
|
|
55
55
|
|
56
56
|
|
57
|
-
###該当の
|
57
|
+
###該当のCSS
|
58
58
|
|
59
59
|
```ここに言語を入力
|
60
60
|
|
@@ -95,3 +95,127 @@
|
|
95
95
|
|
96
96
|
|
97
97
|
```
|
98
|
+
|
99
|
+
###該当のHTML
|
100
|
+
|
101
|
+
```lang-言語名
|
102
|
+
|
103
|
+
<div class="header-action-container">
|
104
|
+
|
105
|
+
<div class="search-wrap">
|
106
|
+
|
107
|
+
|
108
|
+
|
109
|
+
<div class="search-icon">
|
110
|
+
|
111
|
+
<i class="fa fa-search"></i>
|
112
|
+
|
113
|
+
</div>
|
114
|
+
|
115
|
+
|
116
|
+
|
117
|
+
<div class="search-box">
|
118
|
+
|
119
|
+
<form role="search" method="get" class="searchform" action="http://★URL★">
|
120
|
+
|
121
|
+
<label>
|
122
|
+
|
123
|
+
<span class="screen-reader-text">検索対象:</span>
|
124
|
+
|
125
|
+
<input type="search" class="search-field" placeholder="検索 …" value="" name="s" />
|
126
|
+
|
127
|
+
</label>
|
128
|
+
|
129
|
+
<button type="submit" class="search-submit btn search-btn">
|
130
|
+
|
131
|
+
<span class="screen-reader-text">検索</span>
|
132
|
+
|
133
|
+
<i class="fa fa-search"></i>
|
134
|
+
|
135
|
+
</button>
|
136
|
+
|
137
|
+
</form>
|
138
|
+
|
139
|
+
|
140
|
+
|
141
|
+
</div>
|
142
|
+
|
143
|
+
</div>
|
144
|
+
|
145
|
+
</div>
|
146
|
+
|
147
|
+
</div>
|
148
|
+
|
149
|
+
</div>
|
150
|
+
|
151
|
+
</header>
|
152
|
+
|
153
|
+
|
154
|
+
|
155
|
+
<!-- #masthead -->
|
156
|
+
|
157
|
+
<div id="wp-custom-header" class="wp-custom-header">
|
158
|
+
|
159
|
+
<img src="http://★PC用ヘッダ画像★" width="2000" height="521" /></div>
|
160
|
+
|
161
|
+
|
162
|
+
|
163
|
+
|
164
|
+
|
165
|
+
<div id="content" class="site-content">
|
166
|
+
|
167
|
+
<div class="tg-container">
|
168
|
+
|
169
|
+
|
170
|
+
|
171
|
+
|
172
|
+
|
173
|
+
<div id="primary" class="content-area">
|
174
|
+
|
175
|
+
<main id="main" class="site-main" role="main">
|
176
|
+
|
177
|
+
|
178
|
+
|
179
|
+
|
180
|
+
|
181
|
+
<article id="post-2" class="post-2 page type-page status-publish hentry">
|
182
|
+
|
183
|
+
|
184
|
+
|
185
|
+
|
186
|
+
|
187
|
+
<div class="entry-content">
|
188
|
+
|
189
|
+
<h3 style="text-align: center;">
|
190
|
+
|
191
|
+
<span style="font-size: 14pt;">ようこそ</span></h3>
|
192
|
+
|
193
|
+
</div>
|
194
|
+
|
195
|
+
<!-- .entry-content -->
|
196
|
+
|
197
|
+
|
198
|
+
|
199
|
+
<footer class="entry-footer">
|
200
|
+
|
201
|
+
<span class="edit-link"><a class="post-edit-link" href="http://★URL★">
|
202
|
+
|
203
|
+
<span class="screen-reader-text">"HOME"</span>の編集</a></span>
|
204
|
+
|
205
|
+
</footer>
|
206
|
+
|
207
|
+
<!-- .entry-footer -->
|
208
|
+
|
209
|
+
|
210
|
+
|
211
|
+
|
212
|
+
|
213
|
+
</article><!-- #post-## -->
|
214
|
+
|
215
|
+
|
216
|
+
|
217
|
+
</main><!-- #main -->
|
218
|
+
|
219
|
+
</div><!-- #primary -->
|
220
|
+
|
221
|
+
```
|
1
※追記※部分、該当のエラーソースコード、エラー表示の画像を追記させていただきました。
test
CHANGED
File without changes
|
test
CHANGED
@@ -1,4 +1,12 @@
|
|
1
1
|
###前提・実現したいこと
|
2
|
+
|
3
|
+
|
4
|
+
|
5
|
+
初めての質問で要領を得ずすみません、ご指摘がありましたので質問を編集しました。
|
6
|
+
|
7
|
+
(※追記※部分とソースコード、エラー表示の画像)
|
8
|
+
|
9
|
+
|
2
10
|
|
3
11
|
wordpressの海外テーマ「[flash](https://ja.wordpress.org/themes/flash/)」を使用しています。
|
4
12
|
|
@@ -10,27 +18,39 @@
|
|
10
18
|
|
11
19
|
|
12
20
|
|
13
|
-
イメージに近く、参考にさせていただいた方法は[こちら](https://www.nishi2002.com/20835.html)
|
21
|
+
イメージに近く、参考にさせていただいた方法は[こちら](https://www.nishi2002.com/20835.html)です。
|
14
|
-
|
15
|
-
[こちら](https://fastcoding.jp/blog/all/frontend/responsive_img/)です。
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
以下はテーマ「[flash](https://ja.wordpress.org/themes/flash/)」のheader.php のソースです。
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
カスタマイズしやすいテーマに変更したいのですが、諸事情でテーマ変更が難しく
|
24
|
-
|
25
|
-
試行錯誤したのですが、このテーマのヘッダ画像呼び出し方法が自分には複雑で
|
26
|
-
|
27
|
-
上手くいかないため、こちらで質問させて頂きました。どのようにすればよいか
|
28
|
-
|
29
|
-
おわかりになる方いらっしゃいましたら、よろしくお願い致します。
|
30
22
|
|
31
23
|
|
32
24
|
|
33
25
|
|
26
|
+
|
27
|
+
###発生している問題・エラーメッセージ
|
28
|
+
|
29
|
+
|
30
|
+
|
31
|
+
※追記※
|
32
|
+
|
33
|
+
上記参考サイトの方法でCSSを追記しましたが、スマホで確認すると
|
34
|
+
|
35
|
+
元のPCサイト用スマホヘッダ画像が消えず、さらにその下に
|
36
|
+
|
37
|
+
スマホ用の画像が2枚、縦にリピートしているような状態です。
|
38
|
+
|
39
|
+
わかりにくいので、画像を添付しました。
|
40
|
+
|
41
|
+
|
42
|
+
|
43
|
+
![イメージ説明](ce8b82826858ac2097cba11936b7d031.gif)
|
44
|
+
|
45
|
+
|
46
|
+
|
47
|
+
この図のスマホ用画像ヘッダが1枚表示されるのが理想のイメージなのですが、
|
48
|
+
|
49
|
+
divの指定等がおかしいのでしょうか?
|
50
|
+
|
51
|
+
|
52
|
+
|
53
|
+
テーマCSSに追加したのは下記部分です。よろしくお願い致します。
|
34
54
|
|
35
55
|
|
36
56
|
|
@@ -38,391 +58,39 @@
|
|
38
58
|
|
39
59
|
```ここに言語を入力
|
40
60
|
|
41
|
-
<?php
|
42
|
-
|
43
|
-
/**
|
44
|
-
|
45
|
-
* The header for our theme.
|
46
|
-
|
47
|
-
*
|
48
|
-
|
49
|
-
* This is the template that displays all of the <head> section and everything up until <div id="content">
|
50
|
-
|
51
|
-
*
|
52
|
-
|
53
|
-
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
|
54
|
-
|
55
|
-
*
|
56
|
-
|
57
|
-
* @package Flash
|
58
|
-
|
59
|
-
*/
|
60
61
|
|
61
62
|
|
63
|
+
/* スマホのときのヘッダー画像 */
|
62
64
|
|
63
|
-
|
65
|
+
@media (max-width: 750px) {
|
64
66
|
|
65
|
-
|
67
|
+
/* PC用のヘッダー画像を消す */
|
66
68
|
|
67
|
-
|
69
|
+
#wp-custom-header .wp-custom-header{
|
68
70
|
|
69
|
-
|
71
|
+
display: none;
|
70
72
|
|
71
|
-
|
73
|
+
}
|
72
74
|
|
73
|
-
|
75
|
+
|
74
76
|
|
75
|
-
|
77
|
+
/* スマホ用のヘッダー画像を表示 */
|
76
78
|
|
79
|
+
#wp-custom-header:after {
|
77
80
|
|
81
|
+
background: url(http://★画像URL★);
|
78
82
|
|
79
|
-
|
83
|
+
background-size: 100% auto;
|
80
84
|
|
81
|
-
|
85
|
+
content: '';
|
82
86
|
|
87
|
+
display: block;
|
83
88
|
|
89
|
+
height: 320px;
|
84
90
|
|
85
|
-
|
91
|
+
}
|
86
92
|
|
87
|
-
|
88
|
-
|
89
|
-
<?php
|
90
|
-
|
91
|
-
if ( get_theme_mod( 'flash_disable_preloader', '' ) != 1 ) : ?>
|
92
|
-
|
93
|
-
<div id="preloader-background">
|
94
|
-
|
95
|
-
<div id="spinners">
|
96
|
-
|
97
|
-
<div id="preloader">
|
98
|
-
|
99
|
-
<span></span>
|
100
|
-
|
101
|
-
<span></span>
|
102
|
-
|
103
|
-
<span></span>
|
104
|
-
|
105
|
-
<span></span>
|
106
|
-
|
107
|
-
<span></span>
|
108
|
-
|
109
|
-
</div>
|
110
|
-
|
111
|
-
</div>
|
112
|
-
|
113
|
-
</div>
|
114
|
-
|
115
|
-
<?php endif; ?>
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
<?php
|
120
|
-
|
121
|
-
/**
|
122
|
-
|
123
|
-
* flash_before hook
|
124
|
-
|
125
|
-
*/
|
126
|
-
|
127
|
-
do_action( 'flash_before' ); ?>
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
<div id="page" class="site">
|
132
|
-
|
133
|
-
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'flash' ); ?></a>
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
<?php
|
138
|
-
|
139
|
-
/**
|
140
|
-
|
141
|
-
* flash_before_header hook
|
142
|
-
|
143
|
-
*/
|
144
|
-
|
145
|
-
do_action( 'flash_before_header' ); ?>
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
<header id="masthead" class="site-header" role="banner">
|
150
|
-
|
151
|
-
<?php
|
152
|
-
|
153
|
-
if ( get_theme_mod( 'flash_top_header', '1') == '1' ) : ?>
|
154
|
-
|
155
|
-
<div class="header-top">
|
156
|
-
|
157
|
-
<div class="tg-container">
|
158
|
-
|
159
|
-
<div class="tg-column-wrapper clearfix">
|
160
|
-
|
161
|
-
<div class="left-content">
|
162
|
-
|
163
|
-
<?php echo flash_top_header_content( 'flash_top_header_left' ); ?>
|
164
|
-
|
165
|
-
</div>
|
166
|
-
|
167
|
-
<div class="right-content">
|
168
|
-
|
169
|
-
<?php echo flash_top_header_content( 'flash_top_header_right' ); ?>
|
170
|
-
|
171
|
-
</div>
|
172
|
-
|
173
|
-
</div>
|
174
|
-
|
175
|
-
</div>
|
176
|
-
|
177
|
-
</div>
|
178
|
-
|
179
|
-
<?php endif; ?>
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
<div class="header-bottom">
|
184
|
-
|
185
|
-
<div class="tg-container">
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
<div class="logo">
|
190
|
-
|
191
|
-
<?php if( function_exists( 'the_custom_logo' ) && has_custom_logo() ) : ?>
|
192
|
-
|
193
|
-
<figure class="logo-image">
|
194
|
-
|
195
|
-
<?php flash_the_custom_logo(); ?>
|
196
|
-
|
197
|
-
<?php if( get_theme_mod( 'flash_transparent_logo', '') != '') : ?>
|
198
|
-
|
199
|
-
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
|
200
|
-
|
201
|
-
<img class="transparent-logo" src="<?php echo esc_url( get_theme_mod( 'flash_transparent_logo', '' ) ); ?>" />
|
202
|
-
|
203
|
-
</a>
|
204
|
-
|
205
|
-
<?php endif; ?>
|
206
|
-
|
207
|
-
</figure>
|
208
|
-
|
209
|
-
<?php endif; ?>
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
<div class="logo-text site-branding">
|
214
|
-
|
215
|
-
<?php
|
216
|
-
|
217
|
-
if ( ( is_front_page() && is_home() ) || ( is_front_page() && !is_home() ) ) : ?>
|
218
|
-
|
219
|
-
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
|
220
|
-
|
221
|
-
<?php else : ?>
|
222
|
-
|
223
|
-
<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
|
224
|
-
|
225
|
-
<?php
|
226
|
-
|
227
|
-
|
93
|
+
}
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
$description = get_bloginfo( 'description', 'display' );
|
232
|
-
|
233
|
-
if ( $description || is_customize_preview() ) : ?>
|
234
|
-
|
235
|
-
<p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
|
236
|
-
|
237
|
-
<?php
|
238
|
-
|
239
|
-
endif; ?>
|
240
|
-
|
241
|
-
</div>
|
242
|
-
|
243
|
-
</div>
|
244
|
-
|
245
|
-
<div class="site-navigation-wrapper">
|
246
|
-
|
247
|
-
<nav id="site-navigation" class="main-navigation" role="navigation">
|
248
|
-
|
249
|
-
<div class="menu-toggle">
|
250
|
-
|
251
|
-
<i class="fa fa-bars"></i>
|
252
|
-
|
253
|
-
</div>
|
254
|
-
|
255
|
-
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
|
256
|
-
|
257
|
-
</nav><!-- #site-navigation -->
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
<?php $logo_position = get_theme_mod( 'flash_logo_position', 'left-logo-right-menu' ); ?>
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
<?php if ( $logo_position == 'center-logo-below-menu' ): ?>
|
266
|
-
|
267
|
-
<div class="header-action-container">
|
268
|
-
|
269
|
-
<?php if( ( get_theme_mod( 'flash_header_cart', '' ) != '1' ) && class_exists( 'WooCommerce' ) ) : ?>
|
270
|
-
|
271
|
-
<div class="cart-wrap">
|
272
|
-
|
273
|
-
<div class="flash-cart-views">
|
274
|
-
|
275
|
-
<a href="<?php echo esc_url( WC()->cart->get_cart_url() ); ?>" class="wcmenucart-contents">
|
276
|
-
|
277
|
-
<i class="fa fa-opencart"></i>
|
278
|
-
|
279
|
-
<span class="cart-value"><?php echo wp_kses_data ( WC()->cart->get_cart_contents_count() ); ?></span>
|
280
|
-
|
281
|
-
</a>
|
282
|
-
|
283
|
-
</div>
|
284
|
-
|
285
|
-
<?php the_widget( 'WC_Widget_Cart', '' ); ?>
|
286
|
-
|
287
|
-
</div>
|
288
|
-
|
289
|
-
<?php endif; ?>
|
290
|
-
|
291
|
-
|
292
|
-
|
293
|
-
<?php if( get_theme_mod( 'flash_header_search', '' ) != '1' ) : ?>
|
294
|
-
|
295
|
-
<div class="search-wrap">
|
296
|
-
|
297
|
-
<div class="search-icon">
|
298
|
-
|
299
|
-
<i class="fa fa-search"></i>
|
300
|
-
|
301
|
-
</div>
|
302
|
-
|
303
|
-
<div class="search-box">
|
304
|
-
|
305
|
-
<?php get_search_form(); ?>
|
306
|
-
|
307
|
-
</div>
|
308
|
-
|
309
|
-
</div>
|
310
|
-
|
311
|
-
<?php endif; ?>
|
312
|
-
|
313
|
-
</div>
|
314
|
-
|
315
|
-
<?php endif ?>
|
316
|
-
|
317
|
-
</div>
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
<div class="header-action-container">
|
322
|
-
|
323
|
-
<?php if( ( get_theme_mod( 'flash_header_cart', '' ) != '1' ) && class_exists( 'WooCommerce' ) ) : ?>
|
324
|
-
|
325
|
-
<div class="cart-wrap">
|
326
|
-
|
327
|
-
<div class="flash-cart-views">
|
328
|
-
|
329
|
-
<a href="<?php echo esc_url( WC()->cart->get_cart_url() ); ?>" class="wcmenucart-contents">
|
330
|
-
|
331
|
-
<i class="fa fa-opencart"></i>
|
332
|
-
|
333
|
-
<span class="cart-value"><?php echo wp_kses_data ( WC()->cart->get_cart_contents_count() ); ?></span>
|
334
|
-
|
335
|
-
</a>
|
336
|
-
|
337
|
-
</div>
|
338
|
-
|
339
|
-
<?php the_widget( 'WC_Widget_Cart', '' ); ?>
|
340
|
-
|
341
|
-
</div>
|
342
|
-
|
343
|
-
<?php endif; ?>
|
344
|
-
|
345
|
-
|
346
|
-
|
347
|
-
<?php if( get_theme_mod( 'flash_header_search', '' ) != '1' ) : ?>
|
348
|
-
|
349
|
-
<div class="search-wrap">
|
350
|
-
|
351
|
-
<div class="search-icon">
|
352
|
-
|
353
|
-
<i class="fa fa-search"></i>
|
354
|
-
|
355
|
-
</div>
|
356
|
-
|
357
|
-
<div class="search-box">
|
358
|
-
|
359
|
-
<?php get_search_form(); ?>
|
360
|
-
|
361
|
-
</div>
|
362
|
-
|
363
|
-
</div>
|
364
|
-
|
365
|
-
<?php endif; ?>
|
366
|
-
|
367
|
-
</div>
|
368
|
-
|
369
|
-
</div>
|
370
|
-
|
371
|
-
</div>
|
372
|
-
|
373
|
-
</header><!-- #masthead -->
|
374
|
-
|
375
|
-
|
376
|
-
|
377
|
-
<?php
|
378
|
-
|
379
|
-
/**
|
380
|
-
|
381
|
-
* flash_after_header hook
|
382
|
-
|
383
|
-
*/
|
384
|
-
|
385
|
-
do_action( 'flash_after_header' ); ?>
|
386
|
-
|
387
|
-
|
388
|
-
|
389
|
-
<?php get_template_part( 'template-parts/header-media' ); ?>
|
390
|
-
|
391
|
-
|
392
|
-
|
393
|
-
<?php if( !is_front_page() ) : ?>
|
394
|
-
|
395
|
-
<nav id="flash-breadcrumbs" class="breadcrumb-trail breadcrumbs">
|
396
|
-
|
397
|
-
<div class="tg-container">
|
398
|
-
|
399
|
-
<?php flash_page_title(); ?>
|
400
|
-
|
401
|
-
<?php flash_breadcrumbs(); ?>
|
402
|
-
|
403
|
-
</div>
|
404
|
-
|
405
|
-
</nav>
|
406
|
-
|
407
|
-
<?php endif; ?>
|
408
|
-
|
409
|
-
|
410
|
-
|
411
|
-
<?php
|
412
|
-
|
413
|
-
/**
|
414
|
-
|
415
|
-
* flash_before_main hook
|
416
|
-
|
417
|
-
*/
|
418
|
-
|
419
|
-
do_action( 'flash_before_main' ); ?>
|
420
|
-
|
421
|
-
|
422
|
-
|
423
|
-
<div id="content" class="site-content">
|
424
|
-
|
425
|
-
<div class="tg-container">
|
426
94
|
|
427
95
|
|
428
96
|
|