質問編集履歴

4

記述間違いなどを修正しました。

2016/09/06 13:09

投稿

upplus
upplus

スコア11

test CHANGED
File without changes
test CHANGED
@@ -92,14 +92,6 @@
92
92
 
93
93
 
94
94
 
95
- #visual_event .visual_margin {
96
-
97
- margin-top: -150px;
98
-
99
- }
100
-
101
-
102
-
103
95
  #visual_event .boxed-white {
104
96
 
105
97
  widht: 100%;
@@ -114,126 +106,114 @@
114
106
 
115
107
 
116
108
 
117
- #visual_event .visual-title-p{
109
+ #visual_event h5 a{
110
+
111
+ text-decoration: none;
112
+
113
+ font-size: 17px;
114
+
115
+ line-height: 1.7;
116
+
117
+ margin-top: 8px;
118
+
119
+ font-weight: bold;
120
+
121
+ }
122
+
123
+
124
+
125
+ #visual_event h5 a{
118
126
 
119
127
  color: #888;
120
128
 
121
- margin-top: 15px;
122
-
123
- margin-bottom: -5px;
129
+ margin: 15px 0 !important;
124
-
130
+
125
- }
131
+ }
126
-
127
-
128
-
132
+
133
+
134
+
129
- #visual_event h5 a{
135
+ #visual_event i{
136
+
137
+ position: relative;
138
+
139
+ right: 3px;
140
+
141
+ top: 3px;
142
+
143
+ }
144
+
145
+
146
+
147
+ #visual_event .event-more-box a{
148
+
149
+ font-size: 13px;
150
+
151
+ color: #fff;
152
+
153
+ font-weight: bold;
154
+
155
+ height: 50px;
156
+
157
+ line-height: 50px;
158
+
159
+ background: #999;
130
160
 
131
161
  text-decoration: none;
132
162
 
163
+ display: block;
164
+
165
+ margin-bottom: -10px;
166
+
167
+ }
168
+
169
+
170
+
171
+ #visual_event .event-more-box a:hover{
172
+
173
+ color: #999;
174
+
175
+ background: #fff;
176
+
177
+ border: 1px solid #999;
178
+
179
+ -webkit-transition: .3s;
180
+
181
+ -moz-transition: .3s;
182
+
183
+ -ms-transition: .3s;
184
+
185
+ -o-transition: .3s;
186
+
187
+ transition: .3s;
188
+
189
+ }
190
+
191
+
192
+
193
+ #visual_event .visual-img img{
194
+
195
+ width: auto;
196
+
197
+ height: auto;
198
+
199
+ max-width: 100%;
200
+
201
+ max-height: 100%;
202
+
203
+ }
204
+
205
+
206
+
207
+ #visual_event .box-more{
208
+
209
+ cursor: pointer;
210
+
133
- font-size: 17px;
211
+ font-size: 18px;
134
-
135
- line-height: 1.7;
212
+
136
-
137
- margin-top: 8px;
213
+ color: #909090;
138
214
 
139
215
  font-weight: bold;
140
216
 
141
- }
142
-
143
-
144
-
145
- #visual_event h5 a{
146
-
147
- color: #888;
148
-
149
- margin: 15px 0 !important;
150
-
151
- }
152
-
153
-
154
-
155
- #visual_event i{
156
-
157
- position: relative;
158
-
159
- right: 3px;
160
-
161
- top: 3px;
162
-
163
- }
164
-
165
-
166
-
167
- #visual_event .event-more-box a{
168
-
169
- font-size: 13px;
170
-
171
- color: #fff;
172
-
173
- font-weight: bold;
174
-
175
- height: 50px;
176
-
177
- line-height: 50px;
178
-
179
- background: #999;
180
-
181
- text-decoration: none;
182
-
183
- display: block;
184
-
185
- margin-bottom: -10px;
186
-
187
- }
188
-
189
-
190
-
191
- #visual_event .event-more-box a:hover{
192
-
193
- color: #999;
194
-
195
- background: #fff;
196
-
197
- border: 1px solid #999;
198
-
199
- -webkit-transition: .3s;
200
-
201
- -moz-transition: .3s;
202
-
203
- -ms-transition: .3s;
204
-
205
- -o-transition: .3s;
206
-
207
- transition: .3s;
208
-
209
- }
210
-
211
-
212
-
213
- #visual_event .visual-img img,
214
-
215
- width: auto;
216
-
217
- height: auto;
218
-
219
- max-width: 100%;
220
-
221
- max-height: 100%;
222
-
223
- }
224
-
225
-
226
-
227
- #visual_event .box-more{
228
-
229
- cursor: pointer;
230
-
231
- font-size: 18px;
232
-
233
- color: #909090;
234
-
235
- font-weight: bold;
236
-
237
217
  padding: 10px 0;
238
218
 
239
219
  background: -moz-linear-gradient(top,#FFF 0%,#EEE);

3

スクリプト、ループを外す場所を変更。CSSを追加。

2016/09/06 13:08

投稿

upplus
upplus

スコア11

test CHANGED
File without changes
test CHANGED
@@ -32,17 +32,7 @@
32
32
 
33
33
  ```
34
34
 
35
- 現状は初期表示1BOXでもっと見るボタンを押したら1個ずつ
36
-
37
- 投稿が出ます。。。
38
-
39
- ここからどうすればいいかわからないす。。。
35
+ 投稿ボックスが全部出た状態にってす。
40
-
41
- ワードプレスの投稿にする以前は
42
-
43
- .show_boxに.boxed-whiteを3個ずつ入れて
44
-
45
- 使っていたのですが。。。
46
36
 
47
37
  ```
48
38
 
@@ -54,7 +44,19 @@
54
44
 
55
45
  <script>
56
46
 
47
+ jQuery( '.show_box:gt(2)' ).addClass( 'show_box_hide' ).hide();
48
+
49
+ jQuery( '.more' ).on( 'click', function() {
50
+
51
+ jQuery( '.show_box_hide:lt(3)').removeClass( 'show_box_hide' ).slideDown( 'fast' );
52
+
53
+ if ( jQuery( '.show_box.show_box_hide' ).length === 0 ) { jQuery( '.more' ).hide(); }
54
+
55
+ } );
56
+
57
+
58
+
57
- jQuery(function(){
59
+ */jQuery(function(){
58
60
 
59
61
  jQuery('.show_box:not(.show_box:first-of-type)').css('display','none');
60
62
 
@@ -70,12 +72,194 @@
70
72
 
71
73
  });
72
74
 
73
- });
75
+ });*/
74
76
 
75
77
  </script>
76
78
 
77
79
 
78
80
 
81
+ <style>
82
+
83
+ #visual_event{
84
+
85
+ width: 100%;
86
+
87
+ height: 100%;
88
+
89
+ background: url(images/bg-white-brick.jpg) repeat;
90
+
91
+ }
92
+
93
+
94
+
95
+ #visual_event .visual_margin {
96
+
97
+ margin-top: -150px;
98
+
99
+ }
100
+
101
+
102
+
103
+ #visual_event .boxed-white {
104
+
105
+ widht: 100%;
106
+
107
+ background: #fff;
108
+
109
+ padding: 15px;
110
+
111
+ margin-bottom: 30px;
112
+
113
+ }
114
+
115
+
116
+
117
+ #visual_event .visual-title-p{
118
+
119
+ color: #888;
120
+
121
+ margin-top: 15px;
122
+
123
+ margin-bottom: -5px;
124
+
125
+ }
126
+
127
+
128
+
129
+ #visual_event h5 a{
130
+
131
+ text-decoration: none;
132
+
133
+ font-size: 17px;
134
+
135
+ line-height: 1.7;
136
+
137
+ margin-top: 8px;
138
+
139
+ font-weight: bold;
140
+
141
+ }
142
+
143
+
144
+
145
+ #visual_event h5 a{
146
+
147
+ color: #888;
148
+
149
+ margin: 15px 0 !important;
150
+
151
+ }
152
+
153
+
154
+
155
+ #visual_event i{
156
+
157
+ position: relative;
158
+
159
+ right: 3px;
160
+
161
+ top: 3px;
162
+
163
+ }
164
+
165
+
166
+
167
+ #visual_event .event-more-box a{
168
+
169
+ font-size: 13px;
170
+
171
+ color: #fff;
172
+
173
+ font-weight: bold;
174
+
175
+ height: 50px;
176
+
177
+ line-height: 50px;
178
+
179
+ background: #999;
180
+
181
+ text-decoration: none;
182
+
183
+ display: block;
184
+
185
+ margin-bottom: -10px;
186
+
187
+ }
188
+
189
+
190
+
191
+ #visual_event .event-more-box a:hover{
192
+
193
+ color: #999;
194
+
195
+ background: #fff;
196
+
197
+ border: 1px solid #999;
198
+
199
+ -webkit-transition: .3s;
200
+
201
+ -moz-transition: .3s;
202
+
203
+ -ms-transition: .3s;
204
+
205
+ -o-transition: .3s;
206
+
207
+ transition: .3s;
208
+
209
+ }
210
+
211
+
212
+
213
+ #visual_event .visual-img img,
214
+
215
+ width: auto;
216
+
217
+ height: auto;
218
+
219
+ max-width: 100%;
220
+
221
+ max-height: 100%;
222
+
223
+ }
224
+
225
+
226
+
227
+ #visual_event .box-more{
228
+
229
+ cursor: pointer;
230
+
231
+ font-size: 18px;
232
+
233
+ color: #909090;
234
+
235
+ font-weight: bold;
236
+
237
+ padding: 10px 0;
238
+
239
+ background: -moz-linear-gradient(top,#FFF 0%,#EEE);
240
+
241
+ background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
242
+
243
+ border: 1px solid #aaa;
244
+
245
+ }
246
+
247
+ </style>
248
+
249
+
250
+
251
+
252
+
253
+ <!-- visual_event -->
254
+
255
+ <section id="visual_event" class="top_bottom_margin bg-gray">
256
+
257
+ <div class="visual_margin container">
258
+
259
+ <div class="row">
260
+
261
+
262
+
79
263
  <?php $my_query = new WP_Query( 'category_name=event' ); ?>
80
264
 
81
265
  <?php if ( $my_query->have_posts() ) :while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
@@ -128,17 +312,21 @@
128
312
 
129
313
  </div>
130
314
 
131
- <!-- /boxed-white -->
315
+ <!-- boxed-white -->
132
316
 
133
317
 
134
318
 
135
319
  </div>
136
320
 
137
- <!-- /show_box -->
321
+ <!-- show_box -->
322
+
323
+
324
+
138
-
325
+ <?php endwhile; /* ボタンをループから外す */ ?>
139
-
140
-
326
+
327
+
328
+
141
- <!-- もっと見るボタン -->
329
+ <!-- もっと見る -->
142
330
 
143
331
  <div class="more">
144
332
 
@@ -150,34 +338,40 @@
150
338
 
151
339
  </div>
152
340
 
153
- <!-- /もっと見るボタン -->
341
+ <!-- もっと見る -->
154
-
155
-
156
-
342
+
343
+
344
+
157
- <?php endwhile; else: ?>
345
+ <?php else: ?>
158
346
 
159
347
  <p>記事はありません</p>
160
348
 
161
349
  <?php endif; ?>
162
350
 
351
+
352
+
353
+ </div>
354
+
355
+ </div>
356
+
357
+ </section>
358
+
359
+ <!-- visual_event ********************************************************************↑-->
360
+
361
+
362
+
163
363
  ```
164
364
 
165
365
 
166
366
 
167
367
  ###試したこと
168
368
 
169
- HTMLを初め6ヶ月くらいの素人でし。。。
369
+ ご親切に教えていただいたもを参考にさせいただき、
170
-
171
- 調べていろいろ試して見たんですが
370
+
172
-
173
- 正常に動かないです。。。
371
+ 格闘中です。。。
174
-
175
- すいません。
176
-
177
- お手数ですがお助けください。
178
372
 
179
373
 
180
374
 
181
375
  ###補足情報(言語/FW/ツール等のバージョンなど)
182
376
 
183
- ワードプレスを仕様 HTML5
377
+ ワードプレスを仕様 HTML5 bootstrap

2

#から\.の記述間違いを直しました。

2016/09/06 13:04

投稿

upplus
upplus

スコア11

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  ###前提・実現したいこと
2
2
 
3
- 初期表示→ワードプレスのループを使って#boxed-whiteを6BOX表示
3
+ 初期表示→ワードプレスのループを使って.boxed-whiteを6BOX表示
4
4
 
5
5
  もっと見るボタン押す→3BOXずつ表示したい
6
6
 
@@ -40,7 +40,7 @@
40
40
 
41
41
  ワードプレスの投稿にする以前は
42
42
 
43
- #show_boxに#boxed-whiteを3個ずつ入れて
43
+ .show_boxに.boxed-whiteを3個ずつ入れて
44
44
 
45
45
  使っていたのですが。。。
46
46
 

1

scriptの書式の改善

2016/09/06 06:36

投稿

upplus
upplus

スコア11

test CHANGED
File without changes
test CHANGED
@@ -67,6 +67,8 @@
67
67
  jQuery(this).next('.show_box').slideDown('fast');
68
68
 
69
69
  jQuery(this).nextAll('.more:first').css('display','block');
70
+
71
+ });
70
72
 
71
73
  });
72
74