Wordpressで自分用にテーマを作成しています。
記事を二列に表示したいのですが、うまくいきません。
以下の通り偶数番の記事と奇数番号の記事で分け、CSSでfloatなどで調整したのですが
うまく並びませんでした。。
このコードの改善方法、あるいはより良い方法などありましたら
ぜひ教えてください。
CSSも載せます。
css
1/* 記事 */ 2div#odd, div#even { 3 border: solid 1px #C71585; 4 padding:15px; 5 margin-bottom: 20px; 6 background-color: #C71585; 7 color: #ffffff; 8 width: 515px; 9 float: left; 10} 11 12div#odd h2, div#even h2{ 13 background-color: #C71585; 14 font-size:0.875em; 15 padding:10px; 16 margin: 0; 17 border: solid 1px #ffffff; 18} 19 /* background-image: url(titlebar.png); タイトルバーに写真を入れる */ 20div#odd h2 a, div#even h2 a { 21 text-decoration: none; 22 color: #ffffff; 23} 24 25div#even p,div#odd p { 26 font-size: 0.875em; 27 line-height: 1.6; 28 margin-top: 10px; 29} 30p.postinfo { 31 color: #FFFFFF; 32 text-align:right; 33 margin: 20px 0 0; 34 clear: both; 35} 36p.postinfo a { 37 color: #FFFFFF; 38} 39p.postinfo a:hover { 40 color: #000000; 41} 42p.readmore { 43 color: #000000; 44 text-align: left; 45 46}
--------追記--------
「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」
・何をしたときに
記事を二列に分けるために、is_odd_post()とis_even_post()を使って偶数番の記事と奇数番号の記事で分け、CSSでfloatなどで調整した
・どうなると思って
偶数記事 | 奇数記事
偶数記事 | 奇数記事
と表示される
・どうなったのか
偶数記事 |
偶数記事 | 奇数記事
と表示された
html
1<?php get_header(); ?> 2<head> 3 <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/style.css"> <!-- CSS Stylesheet --> 4</head> 5 6<!-- コンテンツ --> 7<!-- odd number --> 8<?php if(have_posts()): while(have_posts()): the_post(); ?> 9<?php if (is_odd_post()): ?> 10 <div id="odd"> 11 <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 12 <p class="readmore"> 13 <img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>"/> 14 <?php echo the_break_excerpt() ?> 15 </p> 16 <p class="postinfo" > 17 <?php echo get_the_date(); ?> 18 <a href="<?php comments_link(); ?>">コメント<?php comments_number('(0)','(1)','(%)'); ?></a> 19 </p> 20 </div> 21 <?php else: ?> 22 <div id="even"> 23 <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 24 <p class="readmore"> 25 <img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>"/> 26 <?php echo the_break_excerpt() ?> 27 </p> 28 <p class="postinfo" > 29 <?php echo get_the_date(); ?> 30 <a href="<?php comments_link(); ?>">コメント<?php comments_number('(0)','(1)','(%)'); ?></a> 31 </p> 32 </div> 33<?php endif; ?> 34 <?php endwhile; endif; ?> 35 <!-- end of odd number --> 36 <!-- even number --> 37 <?php if(have_posts()): while(have_posts()): the_post(); ?> 38<?php if (is_even_post()): ?> 39<div id="even"> 40 <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 41 <p class="readmore"> 42 <img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>"/> 43 <?php echo the_break_excerpt() ?> 44 </p> 45 <p class="postinfo" > 46 <?php echo get_the_date(); ?> 47 <a href="<?php comments_link(); ?>">コメント<?php comments_number('(0)','(1)','(%)'); ?></a> 48 </p> 49 </div> 50 <?php else: ?> 51 <div id="odd"> 52 <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 53 <p class="readmore"> 54 <img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>"/> 55 <?php echo the_break_excerpt() ?> 56 </p> 57 <p class="postinfo" > 58 <?php echo get_the_date(); ?> 59 <a href="<?php comments_link(); ?>">コメント<?php comments_number('(0)','(1)','(%)'); ?></a> 60 </p> 61 </div> 62<?php endif; ?> 63 <?php endwhile; endif; ?> 64 <!-- end of even number --> 65 66<!--- End of コンテンツ ---> 67 68<!-- サイドバー --> 69<div id="sidebar"> 70 <ul> 71 <?php dynamic_sidebar(); ?> 72 </ul> 73</div> 74 75<?php get_footer(); ?> 76</html> 77
回答2件
あなたの回答
tips
プレビュー