質問するログイン新規登録

回答編集履歴

3

再編集

2017/06/15 07:43

投稿

dit.
dit.

スコア3235

answer CHANGED
@@ -54,11 +54,14 @@
54
54
  color: #4A4A4A;
55
55
  }
56
56
 
57
+ #saide-ranking li div{
58
+ float:left;
59
+ }
60
+
57
61
  #saide-ranking li img{
58
62
  width: 90px;
59
63
  height: 80px;
60
64
  padding-right: 8px;
61
- float: left;
62
65
  }
63
66
 
64
67
  #saide-ranking li:last-child a{

2

ソース追記

2017/06/15 07:43

投稿

dit.
dit.

スコア3235

answer CHANGED
@@ -21,4 +21,80 @@
21
21
  HTMLの時は`img`に`saide-ranking-img`がついてますが、PHPにしたときにはそれを囲った`div`が`saide-ranking-img`になってます。
22
22
  `div`付けた方で対応していきたいのですね?
23
23
 
24
- ※先ほどこの差異でズレが表示すると書きましたが検証が足りませんでした。具体的な解決方法はまだ回答していません。
24
+ ※先ほどこの差異でズレが表示すると書きましたが検証が足りませんでした。具体的な解決方法はまだ回答していません。
25
+
26
+ ---
27
+ 追記
28
+ ソースを少し整理してみました。
29
+ ご確認ください。
30
+ ```css
31
+ #saide-ranking ul{
32
+ width: 235px;
33
+ height: auto;
34
+ list-style:none;
35
+ background-color: white;
36
+ margin: 10px 47px 10px 49px;
37
+ }
38
+
39
+ #saide-ranking li{
40
+ padding: 0;
41
+ margin: 0;
42
+ }
43
+ #saide-ranking li p {
44
+ color: #4A4A4A;
45
+ }
46
+ .date{
47
+ font-weight: 600;
48
+ font-size: 12px;
49
+ }
50
+
51
+ .ranking-title{
52
+ font-weight: bold;
53
+ font-size: 13px;
54
+ color: #4A4A4A;
55
+ }
56
+
57
+ #saide-ranking li img{
58
+ width: 90px;
59
+ height: 80px;
60
+ padding-right: 8px;
61
+ float: left;
62
+ }
63
+
64
+ #saide-ranking li:last-child a{
65
+ display: block;
66
+ padding: 10px 10px 10px 10px;
67
+ border: 1px solid #E6E6E6;
68
+ border-bottom-right-radius: 12px;
69
+ }
70
+
71
+ #saide-ranking li a{
72
+ display: block;
73
+ padding: 10px 10px 10px 10px;
74
+ border-right: 1px solid #E6E6E6;
75
+ border-left: 1px solid #E6E6E6;
76
+ border-top: 1px solid #E6E6E6;
77
+ }
78
+ ```
79
+
80
+ ```html
81
+ <div id="saide-ranking">
82
+ <ul>
83
+ <?php
84
+ //記事のPV情報を取得
85
+ setPostViews(get_the_ID());
86
+ //ループ開始
87
+ query_posts('meta_key=post_views_count&orderby=meta_value_num&posts_per_page=5&order=DESC');while(have_posts()) : the_post();?>
88
+
89
+ <li>
90
+ <a href="<?php the_permalink(); ?>">
91
+ <div><?php the_post_thumbnail(array(90, 80)); ?></div>
92
+ <p class="date"><?php the_time("Y/n/j"); ?></p>
93
+ <p class="ranking-title"> <?php the_title(); ?></p>
94
+ </a>
95
+ </li>
96
+ <?php endwhile; ?>
97
+ </ul>
98
+ </div>
99
+ ```
100
+ 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)をご一読いただくといいと思います。

1

修正

2017/06/15 07:36

投稿

dit.
dit.

スコア3235

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