ポストサムネイルの表示ループ
<ul class="block-three"> <!-- 最新記事列 --> <?php if (have_posts()) : ?> <!-- Filter --> <?php query_posts("cat=5"); ?> <!-- / Filter --> <!-- 投稿ループ --> <?php while (have_posts()) : the_post(); ?> <!-- アイテム --> <li class="item"> <div class="item-img"><a href="<?php the_permalink(); ?>"><?php if ( has_post_thumbnail() ) the_post_thumbnail(array(300,200)); else echo '<img src="'.get_template_directory_uri().'/images/noimage-630x420.jpg" />'; ?></a></div> <div class="item-date"><?php echo get_post_time('M j, Y'); ?></div> <div class="item-cat"><?php the_category(' / '); ?></div> <h2 class="item-title" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink(); ?>"><?php echo mb_substr($post->post_title, 0, 27); ?></a></h2> <p class="item-text"><?php echo mb_substr(get_the_excerpt(), 0, 69); ?><a href="<?php the_permalink(); ?>">...</a></p> <p class="bt-dl"><a href="<?php the_permalink(); ?>">続きを読む</a></p> </li> <!-- / アイテム --> <?php endwhile; ?> <!-- / 投稿ループ --> </ul> <!-- お行儀よく、クエリーをリセットしておく --> <?php wp_reset_query(); ?> <!-- / お行儀よく、クエリーをリセットしておく --> <style tyle="text/css"> /* ************************************************ * Blocks * ************************************************ */ .block-two, .block-three, .block-four, .block-five, .block-six { list-style: none; margin-left: -3.1914893617021276%; margin-bottom: 0; } .block-two:after, .block-three:after, .block-four:after, .block-five:after, .block-six:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .block-two > li, .block-three > li, .block-four > li, .block-five > li, .block-six > li { height: auto; float: left; margin-bottom: 1.5em; margin-left: 3.1914893617021276%; } .block-two > li { width: 46.80851063829787%; } .block-three > li { width: 30.141843971631204%; } .block-four > li { width: 21.80851063829787%; } .block-five > li { width: 16.80851063829787%; } .block-six > li { width: 13.47517730496454%; } /* ************************************************ * item * ************************************************ */ .item { } .top-2retsu { width: 100%; margin: 0 auto 0px auto; } .top-2retsu img { width: 100%; } .first-block { float: left; width: 50%; padding: 30px 0px 30px 0; } .last-block { float: right; width: 47%; font-size: 14px; text-align: left; white-space: normal; vertical-align: middle; padding: 30px 0 20px 0; } </style>
スポンサーリンク