メニュー-デザインを指定
マークアップの確認
<div id="sidebar"> <ul> <?php dynamic_sidebar(); ?> </ul> </div>
見出しとリストのブロックをモジュールとして設定
- クラス名「class="widget"」としてモジュール化される
- 見出しとリストの修飾を指定する
/* #sidebar */ #sidebar { width: 220px; float: right; } #sidebar ul { list-style-type: none; } #sidebar .widget { color: #FFF; margin: 0 0 10px 0; padding: 16px; background-color: #0c8bcd; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; } #sidebar h2 { font-size: 0.75em; margin: 0 0 10px 0; padding: 0 0 8px 0; border-bottom: solid 1px #FFF; } #sidebar .widget li { font-size: 0.75em; line-height: 1.5; margin: 0 0 4px 0; padding: 0 0 0 0; background-repeat: no-repeat; background-position: left 3px; } #sidebar .widget li a { color: #FFF; text-decoration: none; }