www.hbirds.net

使っているテーマのひとつ aerosold のサイドバーをアイテムごとにアイランド状に分割するカスタマイズを行ってみた。
ポイントはfunctions.php の変更。

変更前の functions.php

<?php     //The Sidebar Widget Function
if ( function_exists('register_sidebars') )
        register_sidebars(5,array(
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    )); ?>

変更後の functions.php

<?php     //The Sidebar Widget Function
if ( function_exists('register_sidebars') )
        register_sidebars(5,array(
        'before_widget' => '<!--sidebox start --><div id="widget-block" class="widget %1$s">',
        'after_widget' => '</div><!--sidebox end -->',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    )); ?>

style.css を以下のように変更

#sidebar-left,#sidebar-right {
        float: left;
        margin-top: 20px;
        margin-bottom: 10px;
}
#widget-block {
        width:200px;
        color:#fff;
        margin-bottom:10px;
        padding-left: 10px;
        padding-bottom: 10px;
        background:#000;
        overflow:hidden;
        opacity: 0.7;filter:alpha(opacity=70);zoom:1;
         -webkit-border-top-left-radius:10px;
         -webkit-border-top-right-radius:10px;
         -webkit-border-bottom-left-radius:10px;
         -webkit-border-bottom-right-radius:10px;
         -khtml-border-radius-topleft:10px;
         -khtml-border-radius-topright:10px;
         -khtml-border-radius-bottomleft:10px;
         -khtml-border-radius-bottomright:10px;
         -moz-border-radius-topleft:10px;
         -moz-border-radius-topright:10px;
         -moz-border-radius-bottomleft:10px;
         -moz-border-radius-bottomright:10px;
}

※もともとの#sidebar-left,#sidebar-rightの中身のうち、必要部分を新たに作った#widget-block に移動しています。