WordPress 固定ページに記事一覧表示

<div id="feed">
<dl>
<?php query_posts('post_type=post&showposts=3'); ?>
<?php if(have_posts()) : while (have_posts()) : the_post(); ?>

  <dt><span><?php the_category(', ') ?></span> <!-- カテゴリ名表示 --><date><?php echo get_the_date(); ?></date></dt>
<dd><a href="<?php the_permalink();?>"><b><?php the_title(); ?></b></a>
     <br /><?php the_excerpt(); ?>
<a href="<?php the_permalink();?>">続きを読む</a>
</dd>
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>
</dl>
</div>

ついでに

CSS、装飾の情報を記載いたします。

<style type="text/css">
#feed {
    width: 100%;
    margin: 0 auto;
    /* border: 1px solid #666666; */
    /* border-bottom: none; */
}
#feed dl {
    font-size: 13px;
}
/* スマホ
-------------------------------------------------- */
@media only screen and (max-width:570px) {
#feed {
    /* background-color: #EEEEEE; */
}
#feed dt, #feed dd {
   padding: 8px 20px;
}
#feed dt {
  float: none;
  background-color: #AAAAAA;
  border-top:1px solid #FFFFFF;
  border-left: 1px solid #FFFFFF;
}
#feed dd {
    /* border-top: 1px solid #666666; */
    /* border-bottom: 1px solid #666666; */
}
}
/* PC
-------------------------------------------------- */
@media only screen and (min-width: 571px) {
#feed {
    /* background-color: #EEEEEE; */
     background-image: url(<?php bloginfo('stylesheet_directory');?>/images/bg.png);
     background-repeat: repeat-y;
     background-position: -180px 0;
/* dlで背景画像をyリピートし、dtの背景色のように見せる。positionはdtの幅に応じて調整 */
}
#feed dt, #feed dd {
   padding: 10px;
}
#feed dt {
   clear: both;
   float: left;
   width: 100px; /* 幅を指定 */
    /* border-top: 1px solid #FFFFFF; */
}
#feed dd {
   padding-left: 130px; /* dtの分、左にpaddingを取る */
    /* border-top: 1px solid #FFFFFF; */
    /* border-bottom: 1px solid #666666; */
    /* border-left: 1px solid #FFFFFF; */
}
}
</style>