overflow: auto;でBOXにスクロールバーを付ける

トップページに新着情報を載せているサイトも多いですが、新着情報は数が増えてくるので載せる数を制限するか古い情報は見えないようにする対策が必要です。

10個ぐらいであれば全て見えるようにしておいても良いと思いますが、あまり場所を取りたくないという場合には、CSSの「overflow: auto;」が便利です。

image01

これは、当サイトの新着情報ですが、横にスクロールバーが付いているのが分かると思います。今回新着情報を5個表示にしていますが、20個でも30個でも高さが固定され、見えない部分はスクロールして確認できるようになっています。

SEOを目的としてこのようなスクロールBOXを作る人もいるのですが、HTMLソースには表示されるのに、ユーザーには見えない状態は、検索エンジンから嫌われる可能性があります。以前、このような形でリンクを無数に掲載しユーザーにはほとんど見えないようにしていたサイトがペナルティを受けた事があります。

SEO目的のリンクボックスとして使うのはやめた方が良いと思いますが、あくまでデザイン的に縦長になるのが嫌だという場合に一部を隠すのは問題ありません。私も色々なサイトで使用しています。

スクロールBOXの作り方

<dl class="box">
<dt>2013/03/27</dt>
<dd><a href="">記事タイトル</a></dd>
<dt>2013/03/25</dt>
<dd><a href="">記事タイトル</a></dd>
<dt>2013/03/18</dt>
<dd><a href="">記事タイトル</a></dd>
<dt>2013/03/11</dt>
<dd><a href="">記事タイトル</a></dd>
<dt>2013/03/04</dt>
<dd><a href="">記事タイトル</a></dd>
</dl>

これが先ほど紹介した新着情報のHTMLです。dlで作っていますがulで作っても良いと思います。自分のやりやすい方法でやってください。

dl.box{
    height: 120px;
    overflow: auto;
}
dl.box dt{
    float: left;
    width: 120px;
}
dl.box dd{
    margin: 0 0 10px 0;
    padding: 0 0 10px 120px;
    border-bottom: 1px dotted #aaa;
}

CSSはこのようになっています。

スクロールBOXにする為のポイントは、BOXの外枠になる部分に高さを設定して「overflow: auto;」を指定する所です。ulで作る場合にはulに対して「overflow: auto;」を指定します。また、大外にdivを作りそのdivに対して「overflow: auto;」を指定しても構いません。

外枠の高さはいくつでも構いませんが、ユーザーがスクロールしなくてもある程度の情報が見える状態にしてください。

「overflow: auto;」は色々な場面で使うことができるので、憶えておいた方が良いCSSの一つです。

<dl class="box">
<?php $posts = get_posts('numberposts=5'); global $post;?>
<?php foreach($posts as $post): ?>
<dt><?php the_time('Y/m/d'); ?></dt>
<dd><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></dd>
<?php endforeach; ?>
</dl>

ちなみにWordPressで新着情報を載せるためのPHPはこのようになります。「numberposts=5」という部分が新着記事の掲載数です。

管理人イチオシのレンタルサーバー

当サイトでも使っているエックスサーバーは、ディスク容量が200Gと大きく、MySQLが50個まで使えますので、1つの契約でいくつものサイトを運営することができます。

転送量が月2,000G、メモリ192Gと他の格安サーバーでは見られないスペックとなっており、アクセス数の多いサイトや複数のWordPressサイトを運営するのにも向いています。

自動バックアップと電話サポートが付いているので、初心者の方でも安心!

エックスサーバーでは無料SSLが利用できます。Googleはhttpsのサイトを評価する傾向があり、今後はSSL化が必須になってくるでしょう。無料SSLは簡単に導入できるのでとても助かっています。

エックスサーバーの公式サイトへ

サブコンテンツ

このページの先頭へ