質問編集履歴

3

ボックスの高さを変更してみました。

2016/01/19 15:38

投稿

kyomihei
kyomihei

スコア8

test CHANGED
File without changes
test CHANGED
@@ -177,3 +177,31 @@
177
177
  素人なもので見当違いの回答になっていたらすみません。
178
178
 
179
179
  よろしくお願いいたしますm(_ _)m
180
+
181
+
182
+
183
+
184
+
185
+
186
+
187
+
188
+
189
+ >Ken.sakanakana様
190
+
191
+ デバッグツールで高さを50→200pxに変えてみました。
192
+
193
+
194
+
195
+ スタイルは当たってないものの何かでてきました。
196
+
197
+ ![イメージ説明](c808c87e64fc2b2e4a3648dd0c3e8fd7.png)
198
+
199
+
200
+
201
+ 幅を狭くしてみると一応メニューアイコンも出ているようです。
202
+
203
+ ![イメージ説明](0c048eaa9b0610277bf62d82d2433abb.png)
204
+
205
+
206
+
207
+ やはりスタイルシートかPHPのところが崩れの原因なのでしょうか。。。

2

padding-topを適用しましたがうまく表示されませんでした。

2016/01/19 15:37

投稿

kyomihei
kyomihei

スコア8

test CHANGED
File without changes
test CHANGED
@@ -129,3 +129,51 @@
129
129
  </div>
130
130
 
131
131
  </header>
132
+
133
+
134
+
135
+
136
+
137
+
138
+
139
+ >Ken.sakanakana様
140
+
141
+
142
+
143
+ いつもありがとうございます。
144
+
145
+ レスが遅くて申し訳ありません。
146
+
147
+
148
+
149
+ padding-topをつけると余白がおかしくなってしまいました。
150
+
151
+ htmlのみでは正常に表示されますが、wordpressへ移行(といえるのかわかりませんが…)した際に表示がおかしくなってしまいます。
152
+
153
+
154
+
155
+ htmlで表示した場合
156
+
157
+ ![イメージ説明](bb1b936a6c98197f353381541fe0dd53.png)
158
+
159
+
160
+
161
+ wordpressで表示した場合
162
+
163
+ ![イメージ説明](ab54857e6f5a30cd8c29599e4a1366c9.png)
164
+
165
+
166
+
167
+ padding-topを適用した場合
168
+
169
+ ![イメージ説明](e682ac702d45359c39d6126d227c02b7.png)
170
+
171
+
172
+
173
+ functions.phpをいじればいいのかなどと思い調べてみましたが、うまくできませんでした。
174
+
175
+
176
+
177
+ 素人なもので見当違いの回答になっていたらすみません。
178
+
179
+ よろしくお願いいたしますm(_ _)m

1

htmlコードの追記

2016/01/19 04:35

投稿

kyomihei
kyomihei

スコア8

test CHANGED
File without changes
test CHANGED
@@ -7,3 +7,125 @@
7
7
  どなたかご教示いただければと思って質問させていただきました。
8
8
 
9
9
  よろしくお願いします(><)
10
+
11
+
12
+
13
+
14
+
15
+ >すみません。追記をしたつもりが出来ていなかったようです。。
16
+
17
+
18
+
19
+ 下記汚いコードで恐縮ですが実際のものです。
20
+
21
+ よろしくお願いいたします。
22
+
23
+
24
+
25
+
26
+
27
+ <!DOCTYPE html>
28
+
29
+ <html lang="ja">
30
+
31
+ <head>
32
+
33
+ <meta charset="utf-8">
34
+
35
+ <!-- レスポンシブデザインに対応させる -->
36
+
37
+ <meta name="viewport" content="width=device-width, initial-scale=1">
38
+
39
+ <!-- IEでの互換表示をさせない -->
40
+
41
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
42
+
43
+ <title>よもぎワンカラムサイトのテスト</title>
44
+
45
+ <!-- normalize.cssの読み込み -->
46
+
47
+ <link rel="stylesheet" href="css/normalize.css" type="text/css" media="all">
48
+
49
+ <!-- BootstrapのCSS読み込み -->
50
+
51
+ <link href="css/bootstrap.min.css" rel="stylesheet">
52
+
53
+ <!-- style.cssの読み込み -->
54
+
55
+ <link rel="stylesheet" type="text/css" href="css/style.css">
56
+
57
+ <!-- googlefontsの読み込み -->
58
+
59
+ <link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
60
+
61
+ <!-- gmaps.jsの読み込み -->
62
+
63
+ <script src="http://maps.google.com/maps/api/js"></script>
64
+
65
+ <script src="js/gmaps.js"></script>
66
+
67
+ <?php wp_head(); ?>
68
+
69
+ </head>
70
+
71
+
72
+
73
+ <body>
74
+
75
+
76
+
77
+ <header id="header">
78
+
79
+ <nav class="navbar navbar-default navbar-fixed-top">
80
+
81
+ <div class="container">
82
+
83
+ <div class="navbar-header">
84
+
85
+ <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse" >
86
+
87
+ <span class="sr-only">Toggle navigation</span>
88
+
89
+ <span class="icon-bar"></span>
90
+
91
+ <span class="icon-bar"></span>
92
+
93
+ <span class="icon-bar"></span>
94
+
95
+ </button>
96
+
97
+ <a class="navbar-brand" href="#"></a>
98
+
99
+ </div>
100
+
101
+ <div id="navbar" class="collapse navbar-collapse">
102
+
103
+ <ul class="nav navbar-nav navbar-right">
104
+
105
+ <li><a href="#">Home</a></li>
106
+
107
+ <li><a href="#about">About</a></li>
108
+
109
+ <li><a href="#about">About</a></li>
110
+
111
+ <li><a href="#about">About</a></li>
112
+
113
+ <li><a href="#about">About</a></li>
114
+
115
+ <li><a href="#contact">Contact</a></li>
116
+
117
+ </div><!--/.nav-collapse -->
118
+
119
+ </div>
120
+
121
+ </nav>
122
+
123
+ <div id="header-image">
124
+
125
+ <img src="<?php echo get_template_directory_uri(); ?>/img/header_bg.jpg" class="img-responsive" alt="よもぎCafe" />
126
+
127
+ <h1>活力を感じてもらう場所です。</h1>
128
+
129
+ </div>
130
+
131
+ </header>