質問編集履歴
2
htmlを追記しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
###前提・実現したいこと
|
|
2
2
|
|
|
3
|
+
度々すみません、該当部分のHTMLを追記してみました。
|
|
4
|
+
|
|
3
5
|
初めての質問で要領を得ずすみません、ご指摘がありましたので質問を編集しました。
|
|
4
|
-
（※追記※部分とソースコード、エラー表示の画像）
|
|
6
|
+
（再度HTMLを追記しました。※追記※部分とソースコード、エラー表示の画像）
|
|
5
7
|
|
|
6
8
|
wordpressの海外テーマ「[flash](https://ja.wordpress.org/themes/flash/)」を使用しています。
|
|
7
9
|
|
|
@@ -22,11 +24,9 @@
|
|
|
22
24
|
|
|
23
25
|
|
|
24
26
|
この図のスマホ用画像ヘッダが1枚表示されるのが理想のイメージなのですが、
|
|
25
|
-
divの指定等がおかしいのでしょうか？
|
|
26
|
-
|
|
27
27
|
テーマCSSに追加したのは下記部分です。よろしくお願い致します。
|
|
28
28
|
|
|
29
|
-
###該当の
|
|
29
|
+
###該当のCSS
|
|
30
30
|
```ここに言語を入力
|
|
31
31
|
|
|
32
32
|
/* スマホのときのヘッダー画像 */
|
|
@@ -46,4 +46,66 @@
|
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
+
```
|
|
50
|
+
###該当のHTML
|
|
51
|
+
```lang-言語名
|
|
52
|
+
<div class="header-action-container">
|
|
53
|
+
<div class="search-wrap">
|
|
54
|
+
|
|
55
|
+
<div class="search-icon">
|
|
56
|
+
<i class="fa fa-search"></i>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<div class="search-box">
|
|
60
|
+
<form role="search" method="get" class="searchform" action="http://★URL★">
|
|
61
|
+
<label>
|
|
62
|
+
<span class="screen-reader-text">検索対象:</span>
|
|
63
|
+
<input type="search" class="search-field" placeholder="検索 …" value="" name="s" />
|
|
64
|
+
</label>
|
|
65
|
+
<button type="submit" class="search-submit btn search-btn">
|
|
66
|
+
<span class="screen-reader-text">検索</span>
|
|
67
|
+
<i class="fa fa-search"></i>
|
|
68
|
+
</button>
|
|
69
|
+
</form>
|
|
70
|
+
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
</header>
|
|
77
|
+
|
|
78
|
+
<!-- #masthead -->
|
|
79
|
+
<div id="wp-custom-header" class="wp-custom-header">
|
|
80
|
+
<img src="http://★PC用ヘッダ画像★" width="2000" height="521" /></div>
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
<div id="content" class="site-content">
|
|
84
|
+
<div class="tg-container">
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
<div id="primary" class="content-area">
|
|
88
|
+
<main id="main" class="site-main" role="main">
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
<article id="post-2" class="post-2 page type-page status-publish hentry">
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
<div class="entry-content">
|
|
95
|
+
<h3 style="text-align: center;">
|
|
96
|
+
<span style="font-size: 14pt;">ようこそ</span></h3>
|
|
97
|
+
</div>
|
|
98
|
+
<!-- .entry-content -->
|
|
99
|
+
|
|
100
|
+
<footer class="entry-footer">
|
|
101
|
+
<span class="edit-link"><a class="post-edit-link" href="http://★URL★">
|
|
102
|
+
<span class="screen-reader-text">"HOME"</span>の編集</a></span>
|
|
103
|
+
</footer>
|
|
104
|
+
<!-- .entry-footer -->
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
</article><!-- #post-## -->
|
|
108
|
+
|
|
109
|
+
</main><!-- #main -->
|
|
110
|
+
</div><!-- #primary -->
|
|
49
111
|
```
|
1
※追記※部分、該当のエラーソースコード、エラー表示の画像を追記させていただきました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,215 +1,49 @@
|
|
|
1
1
|
###前提・実現したいこと
|
|
2
|
+
|
|
3
|
+
初めての質問で要領を得ずすみません、ご指摘がありましたので質問を編集しました。
|
|
4
|
+
（※追記※部分とソースコード、エラー表示の画像）
|
|
5
|
+
|
|
2
6
|
wordpressの海外テーマ「[flash](https://ja.wordpress.org/themes/flash/)」を使用しています。
|
|
3
7
|
|
|
4
8
|
設置しているヘッダバナーが横長で、スマホから見た際、画像の縦が詰まってしまうため
|
|
5
9
|
スマホから見た場合のみ「横幅を短く、縦を長くした別のスマホ用ヘッダ画像」を表示させたいです。
|
|
6
10
|
|
|
7
|
-
イメージに近く、参考にさせていただいた方法は[こちら](https://www.nishi2002.com/20835.html)
|
|
11
|
+
イメージに近く、参考にさせていただいた方法は[こちら](https://www.nishi2002.com/20835.html)です。
|
|
8
|
-
[こちら](https://fastcoding.jp/blog/all/frontend/responsive_img/)です。
|
|
9
12
|
|
|
10
|
-
以下はテーマ「[flash](https://ja.wordpress.org/themes/flash/)」のheader.php のソースです。
|
|
11
13
|
|
|
12
|
-
カスタマイズしやすいテーマに変更したいのですが、諸事情でテーマ変更が難しく
|
|
13
|
-
試行錯誤したのですが、このテーマのヘッダ画像呼び出し方法が自分には複雑で
|
|
14
|
-
上手くいかないため、こちらで質問させて頂きました。どのようにすればよいか
|
|
15
|
-
|
|
14
|
+
###発生している問題・エラーメッセージ
|
|
16
15
|
|
|
16
|
+
※追記※
|
|
17
|
+
上記参考サイトの方法でCSSを追記しましたが、スマホで確認すると
|
|
18
|
+
元のPCサイト用スマホヘッダ画像が消えず、さらにその下に
|
|
19
|
+
スマホ用の画像が2枚、縦にリピートしているような状態です。
|
|
20
|
+
わかりにくいので、画像を添付しました。
|
|
17
21
|
|
|
22
|
+
|
|
18
23
|
|
|
24
|
+
この図のスマホ用画像ヘッダが1枚表示されるのが理想のイメージなのですが、
|
|
25
|
+
divの指定等がおかしいのでしょうか？
|
|
26
|
+
|
|
27
|
+
テーマCSSに追加したのは下記部分です。よろしくお願い致します。
|
|
28
|
+
|
|
19
29
|
###該当のソースコード
|
|
20
30
|
```ここに言語を入力
|
|
21
|
-
<?php
|
|
22
|
-
/**
|
|
23
|
-
* The header for our theme.
|
|
24
|
-
*
|
|
25
|
-
* This is the template that displays all of the <head> section and everything up until <div id="content">
|
|
26
|
-
*
|
|
27
|
-
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
|
|
28
|
-
*
|
|
29
|
-
* @package Flash
|
|
30
|
-
*/
|
|
31
31
|
|
|
32
|
+
/* スマホのときのヘッダー画像 */
|
|
33
|
+
@media (max-width: 750px) {
|
|
34
|
+
/* PC用のヘッダー画像を消す */
|
|
35
|
+
#wp-custom-header .wp-custom-header{
|
|
36
|
+
display: none;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* スマホ用のヘッダー画像を表示 */
|
|
40
|
+
#wp-custom-header:after {
|
|
41
|
+
background: url(http://★画像URL★);
|
|
32
|
-
|
|
42
|
+
background-size: 100% auto;
|
|
33
|
-
|
|
43
|
+
content: '';
|
|
44
|
+
display: block;
|
|
34
|
-
|
|
45
|
+
height: 320px;
|
|
35
|
-
|
|
46
|
+
}
|
|
36
|
-
|
|
47
|
+
}
|
|
37
|
-
<link rel="profile" href="http://gmpg.org/xfn/11">
|
|
38
|
-
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
|
|
39
48
|
|
|
40
|
-
<?php wp_head(); ?>
|
|
41
|
-
</head>
|
|
42
|
-
|
|
43
|
-
<body <?php body_class(); ?>>
|
|
44
|
-
|
|
45
|
-
<?php
|
|
46
|
-
if ( get_theme_mod( 'flash_disable_preloader', '' ) != 1 ) : ?>
|
|
47
|
-
<div id="preloader-background">
|
|
48
|
-
<div id="spinners">
|
|
49
|
-
<div id="preloader">
|
|
50
|
-
<span></span>
|
|
51
|
-
<span></span>
|
|
52
|
-
<span></span>
|
|
53
|
-
<span></span>
|
|
54
|
-
<span></span>
|
|
55
|
-
</div>
|
|
56
|
-
</div>
|
|
57
|
-
</div>
|
|
58
|
-
<?php endif; ?>
|
|
59
|
-
|
|
60
|
-
<?php
|
|
61
|
-
/**
|
|
62
|
-
* flash_before hook
|
|
63
|
-
*/
|
|
64
|
-
do_action( 'flash_before' ); ?>
|
|
65
|
-
|
|
66
|
-
<div id="page" class="site">
|
|
67
|
-
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'flash' ); ?></a>
|
|
68
|
-
|
|
69
|
-
<?php
|
|
70
|
-
/**
|
|
71
|
-
* flash_before_header hook
|
|
72
|
-
*/
|
|
73
|
-
do_action( 'flash_before_header' ); ?>
|
|
74
|
-
|
|
75
|
-
<header id="masthead" class="site-header" role="banner">
|
|
76
|
-
<?php
|
|
77
|
-
if ( get_theme_mod( 'flash_top_header', '1') == '1' ) : ?>
|
|
78
|
-
<div class="header-top">
|
|
79
|
-
<div class="tg-container">
|
|
80
|
-
<div class="tg-column-wrapper clearfix">
|
|
81
|
-
<div class="left-content">
|
|
82
|
-
<?php echo flash_top_header_content( 'flash_top_header_left' ); ?>
|
|
83
|
-
</div>
|
|
84
|
-
<div class="right-content">
|
|
85
|
-
<?php echo flash_top_header_content( 'flash_top_header_right' ); ?>
|
|
86
|
-
</div>
|
|
87
|
-
</div>
|
|
88
|
-
</div>
|
|
89
|
-
</div>
|
|
90
|
-
<?php endif; ?>
|
|
91
|
-
|
|
92
|
-
<div class="header-bottom">
|
|
93
|
-
<div class="tg-container">
|
|
94
|
-
|
|
95
|
-
<div class="logo">
|
|
96
|
-
<?php if( function_exists( 'the_custom_logo' ) && has_custom_logo() ) : ?>
|
|
97
|
-
<figure class="logo-image">
|
|
98
|
-
<?php flash_the_custom_logo(); ?>
|
|
99
|
-
<?php if( get_theme_mod( 'flash_transparent_logo', '') != '') : ?>
|
|
100
|
-
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
|
|
101
|
-
<img class="transparent-logo" src="<?php echo esc_url( get_theme_mod( 'flash_transparent_logo', '' ) ); ?>" />
|
|
102
|
-
</a>
|
|
103
|
-
<?php endif; ?>
|
|
104
|
-
</figure>
|
|
105
|
-
<?php endif; ?>
|
|
106
|
-
|
|
107
|
-
<div class="logo-text site-branding">
|
|
108
|
-
<?php
|
|
109
|
-
if ( ( is_front_page() && is_home() ) || ( is_front_page() && !is_home() ) ) : ?>
|
|
110
|
-
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
|
|
111
|
-
<?php else : ?>
|
|
112
|
-
<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
|
|
113
|
-
<?php
|
|
114
|
-
endif;
|
|
115
|
-
|
|
116
|
-
$description = get_bloginfo( 'description', 'display' );
|
|
117
|
-
if ( $description || is_customize_preview() ) : ?>
|
|
118
|
-
<p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
|
|
119
|
-
<?php
|
|
120
|
-
endif; ?>
|
|
121
|
-
</div>
|
|
122
|
-
</div>
|
|
123
|
-
<div class="site-navigation-wrapper">
|
|
124
|
-
<nav id="site-navigation" class="main-navigation" role="navigation">
|
|
125
|
-
<div class="menu-toggle">
|
|
126
|
-
<i class="fa fa-bars"></i>
|
|
127
|
-
</div>
|
|
128
|
-
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
|
|
129
|
-
</nav><!-- #site-navigation -->
|
|
130
|
-
|
|
131
|
-
<?php $logo_position = get_theme_mod( 'flash_logo_position', 'left-logo-right-menu' ); ?>
|
|
132
|
-
|
|
133
|
-
<?php if ( $logo_position == 'center-logo-below-menu' ): ?>
|
|
134
|
-
<div class="header-action-container">
|
|
135
|
-
<?php if( ( get_theme_mod( 'flash_header_cart', '' ) != '1' ) && class_exists( 'WooCommerce' ) ) : ?>
|
|
136
|
-
<div class="cart-wrap">
|
|
137
|
-
<div class="flash-cart-views">
|
|
138
|
-
<a href="<?php echo esc_url( WC()->cart->get_cart_url() ); ?>" class="wcmenucart-contents">
|
|
139
|
-
<i class="fa fa-opencart"></i>
|
|
140
|
-
<span class="cart-value"><?php echo wp_kses_data ( WC()->cart->get_cart_contents_count() ); ?></span>
|
|
141
|
-
</a>
|
|
142
|
-
</div>
|
|
143
|
-
<?php the_widget( 'WC_Widget_Cart', '' ); ?>
|
|
144
|
-
</div>
|
|
145
|
-
<?php endif; ?>
|
|
146
|
-
|
|
147
|
-
<?php if( get_theme_mod( 'flash_header_search', '' ) != '1' ) : ?>
|
|
148
|
-
<div class="search-wrap">
|
|
149
|
-
<div class="search-icon">
|
|
150
|
-
<i class="fa fa-search"></i>
|
|
151
|
-
</div>
|
|
152
|
-
<div class="search-box">
|
|
153
|
-
<?php get_search_form(); ?>
|
|
154
|
-
</div>
|
|
155
|
-
</div>
|
|
156
|
-
<?php endif; ?>
|
|
157
|
-
</div>
|
|
158
|
-
<?php endif ?>
|
|
159
|
-
</div>
|
|
160
|
-
|
|
161
|
-
<div class="header-action-container">
|
|
162
|
-
<?php if( ( get_theme_mod( 'flash_header_cart', '' ) != '1' ) && class_exists( 'WooCommerce' ) ) : ?>
|
|
163
|
-
<div class="cart-wrap">
|
|
164
|
-
<div class="flash-cart-views">
|
|
165
|
-
<a href="<?php echo esc_url( WC()->cart->get_cart_url() ); ?>" class="wcmenucart-contents">
|
|
166
|
-
<i class="fa fa-opencart"></i>
|
|
167
|
-
<span class="cart-value"><?php echo wp_kses_data ( WC()->cart->get_cart_contents_count() ); ?></span>
|
|
168
|
-
</a>
|
|
169
|
-
</div>
|
|
170
|
-
<?php the_widget( 'WC_Widget_Cart', '' ); ?>
|
|
171
|
-
</div>
|
|
172
|
-
<?php endif; ?>
|
|
173
|
-
|
|
174
|
-
<?php if( get_theme_mod( 'flash_header_search', '' ) != '1' ) : ?>
|
|
175
|
-
<div class="search-wrap">
|
|
176
|
-
<div class="search-icon">
|
|
177
|
-
<i class="fa fa-search"></i>
|
|
178
|
-
</div>
|
|
179
|
-
<div class="search-box">
|
|
180
|
-
<?php get_search_form(); ?>
|
|
181
|
-
</div>
|
|
182
|
-
</div>
|
|
183
|
-
<?php endif; ?>
|
|
184
|
-
</div>
|
|
185
|
-
</div>
|
|
186
|
-
</div>
|
|
187
|
-
</header><!-- #masthead -->
|
|
188
|
-
|
|
189
|
-
<?php
|
|
190
|
-
/**
|
|
191
|
-
* flash_after_header hook
|
|
192
|
-
*/
|
|
193
|
-
do_action( 'flash_after_header' ); ?>
|
|
194
|
-
|
|
195
|
-
<?php get_template_part( 'template-parts/header-media' ); ?>
|
|
196
|
-
|
|
197
|
-
<?php if( !is_front_page() ) : ?>
|
|
198
|
-
<nav id="flash-breadcrumbs" class="breadcrumb-trail breadcrumbs">
|
|
199
|
-
<div class="tg-container">
|
|
200
|
-
<?php flash_page_title(); ?>
|
|
201
|
-
<?php flash_breadcrumbs(); ?>
|
|
202
|
-
</div>
|
|
203
|
-
</nav>
|
|
204
|
-
<?php endif; ?>
|
|
205
|
-
|
|
206
|
-
<?php
|
|
207
|
-
/**
|
|
208
|
-
* flash_before_main hook
|
|
209
|
-
*/
|
|
210
|
-
do_action( 'flash_before_main' ); ?>
|
|
211
|
-
|
|
212
|
-
<div id="content" class="site-content">
|
|
213
|
-
<div class="tg-container">
|
|
214
|
-
|
|
215
49
|
```
|