プリントアウト

画面上のある領域が一定以上の高さになった場合にスクロールバーを表示する。トップページのお知らせ領域に使っている。（http://www.kyobunkwan.co.jp/）

1.まずCSSで制御。スタイルシートの overflow:auto を指定。

/* ========= トップページのお知らせをスクロールに ========= */
#announcement {
overflow: auto;
height: 100px;
background-color: #fafafa
}

2.次にテーマのphpに下記のコードを挿入。テーブル（html）をphpに書くのはハイブリッドで良くないのでしょうが・・・

<div><table width=”100%” border=”0″ cellspacing=”00″ cellpadding=”0″ summary=”教文館の新着情報です”>
<tr>
<td valign=”top”><img alt=”top_topics” src=”http://www.kyobunkwan.co.jp/wp-content/uploads/2011/03/top_topics.gif” width=”630″ height=”30″ /></td>
</tr>
<tr>
<td>
<div id=”announcement”>
<?php
$my_query = new WP_Query( array( ‘post_type’ => ‘post’, ‘post_status’ => ‘publish’, ‘meta_key’=> ‘Date’, ‘orderby’ => meta_value, ‘order’ => ‘DESC’, ‘posts_per_page’ =>7 ) );
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<table width=”95%” border=”0″>
<tr>
<td width=”15%” bgcolor=”#D8D8D8″>
<h6 align=”center”>
<?php echo c2c_get_custom
(‘Date’,”,”,”);
?>
</h6>
</td>
<td width=”80%”><h5><a href=”<?php the_permalink() ?>” rel=”bookmark”>
<?php the_title();?><?php echo c2c_get_custom(‘Floor’,”,”,”); ?>
</a></h5>
</td>
</tr>
</table>

<hr />
<?php endwhile; ?>
</div>
</td>
</tr>
</table>
</div>
[/html]

<div style=”background-color: #fafafa; height:100px; overflow:auto;”>としても同じ。

ちなみに

”overflow”
”overflow-x”・・・overflowを横方向のみに適用
”overflow-y”・・・overflowを縦方向のみに適用

だそうです。