回答編集履歴

3

再編集

2017/06/15 07:43

投稿

dit.
dit.

スコア3235

test CHANGED
@@ -110,6 +110,14 @@
110
110
 
111
111
 
112
112
 
113
+ #saide-ranking li div{
114
+
115
+ float:left;
116
+
117
+ }
118
+
119
+
120
+
113
121
  #saide-ranking li img{
114
122
 
115
123
  width: 90px;
@@ -118,8 +126,6 @@
118
126
 
119
127
  padding-right: 8px;
120
128
 
121
- float: left;
122
-
123
129
  }
124
130
 
125
131
 

2

ソース追記

2017/06/15 07:43

投稿

dit.
dit.

スコア3235

test CHANGED
@@ -45,3 +45,157 @@
45
45
 
46
46
 
47
47
  ※先ほどこの差異でズレが表示すると書きましたが検証が足りませんでした。具体的な解決方法はまだ回答していません。
48
+
49
+
50
+
51
+ ---
52
+
53
+ 追記
54
+
55
+ ソースを少し整理してみました。
56
+
57
+ ご確認ください。
58
+
59
+ ```css
60
+
61
+ #saide-ranking ul{
62
+
63
+ width: 235px;
64
+
65
+ height: auto;
66
+
67
+ list-style:none;
68
+
69
+ background-color: white;
70
+
71
+ margin: 10px 47px 10px 49px;
72
+
73
+ }
74
+
75
+
76
+
77
+ #saide-ranking li{
78
+
79
+ padding: 0;
80
+
81
+ margin: 0;
82
+
83
+ }
84
+
85
+ #saide-ranking li p {
86
+
87
+ color: #4A4A4A;
88
+
89
+ }
90
+
91
+ .date{
92
+
93
+ font-weight: 600;
94
+
95
+ font-size: 12px;
96
+
97
+ }
98
+
99
+
100
+
101
+ .ranking-title{
102
+
103
+ font-weight: bold;
104
+
105
+ font-size: 13px;
106
+
107
+ color: #4A4A4A;
108
+
109
+ }
110
+
111
+
112
+
113
+ #saide-ranking li img{
114
+
115
+ width: 90px;
116
+
117
+ height: 80px;
118
+
119
+ padding-right: 8px;
120
+
121
+ float: left;
122
+
123
+ }
124
+
125
+
126
+
127
+ #saide-ranking li:last-child a{
128
+
129
+ display: block;
130
+
131
+ padding: 10px 10px 10px 10px;
132
+
133
+ border: 1px solid #E6E6E6;
134
+
135
+ border-bottom-right-radius: 12px;
136
+
137
+ }
138
+
139
+
140
+
141
+ #saide-ranking li a{
142
+
143
+ display: block;
144
+
145
+ padding: 10px 10px 10px 10px;
146
+
147
+ border-right: 1px solid #E6E6E6;
148
+
149
+ border-left: 1px solid #E6E6E6;
150
+
151
+ border-top: 1px solid #E6E6E6;
152
+
153
+ }
154
+
155
+ ```
156
+
157
+
158
+
159
+ ```html
160
+
161
+ <div id="saide-ranking">
162
+
163
+ <ul>
164
+
165
+ <?php
166
+
167
+ //記事のPV情報を取得
168
+
169
+ setPostViews(get_the_ID());
170
+
171
+ //ループ開始
172
+
173
+ query_posts('meta_key=post_views_count&orderby=meta_value_num&posts_per_page=5&order=DESC');while(have_posts()) : the_post();?>
174
+
175
+
176
+
177
+ <li>
178
+
179
+ <a href="<?php the_permalink(); ?>">
180
+
181
+ <div><?php the_post_thumbnail(array(90, 80)); ?></div>
182
+
183
+ <p class="date"><?php the_time("Y/n/j"); ?></p>
184
+
185
+ <p class="ranking-title"> <?php the_title(); ?></p>
186
+
187
+ </a>
188
+
189
+ </li>
190
+
191
+ <?php endwhile; ?>
192
+
193
+ </ul>
194
+
195
+ </div>
196
+
197
+ ```
198
+
199
+ query_postsの使用については[こちら](http://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/query_posts)をご一読いただくといいと思います。
200
+
201
+

1

修正

2017/06/15 07:36

投稿

dit.
dit.

スコア3235

test CHANGED
@@ -40,4 +40,8 @@
40
40
 
41
41
  HTMLの時は`img`に`saide-ranking-img`がついてますが、PHPにしたときにはそれを囲った`div`が`saide-ranking-img`になってます。
42
42
 
43
+ `div`付けた方で対応していきたいのですね?
44
+
45
+
46
+
43
- `saide-ranking-img`に`float`を設定しているようなのでズレま
47
+ ※先ほどこ差異でズレが表示すると書きしたが検証が足りませんでした具体的な解決方法はまだ回答していません。