質問編集履歴

2

htmlを追記しました。

2017/09/27 01:22

投稿

satoo
satoo

スコア7

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="検索 &hellip;" 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

※追記※部分、該当のエラーソースコード、エラー表示の画像を追記させていただきました。

2017/09/27 01:22

投稿

satoo
satoo

スコア7

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
- ?><!DOCTYPE html>
65
+ @media (max-width: 750px) {
64
66
 
65
- <html <?php language_attributes(); ?>>
67
+ /* PC用のヘッダー画像を消す */
66
68
 
67
- <head>
69
+ #wp-custom-header .wp-custom-header{
68
70
 
69
- <meta charset="<?php bloginfo( 'charset' ); ?>">
71
+ display: none;
70
72
 
71
- <meta name="viewport" content="width=device-width, initial-scale=1">
73
+ }
72
74
 
73
- <link rel="profile" href="http://gmpg.org/xfn/11">
75
+
74
76
 
75
- <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
77
+ /* スマホ用のヘッダー画像を表示 */
76
78
 
79
+ #wp-custom-header:after {
77
80
 
81
+ background: url(http://★画像URL★);
78
82
 
79
- <?php wp_head(); ?>
83
+ background-size: 100% auto;
80
84
 
81
- </head>
85
+ content: '';
82
86
 
87
+ display: block;
83
88
 
89
+ height: 320px;
84
90
 
85
- <body <?php body_class(); ?>>
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
- endif;
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