サイドバーの装飾を行います。
01. ソースの確認、編集
ソースを見ると、サイドバーのリストは、ul要素で囲まれていないことが確認できます。
ul要素で囲むように、index.phpを編集します。
サイドバーのPHPタグをul要素で囲みます。
--- 編集前のHTMLソース（サイドバー部分） ここから--
<!-- サイドバー -->
<div id="sidebar">
<li id="categories-3" class="widget widget_categories">
<h2 class="widgettitle">カテゴリー</h2>
<ul>
<li class="cat-item cat-item-3"><a href="http://ranka.sub.jp/taroumatsu/?cat=3" title="HTML、XHTML">(X)HTML</a> (6)</li>
<li class="cat-item cat-item-4"><a href="http://ranka.sub.jp/taroumatsu/?cat=4" title="CSS">CSS</a> (6)</li>
<li class="cat-item cat-item-5"><a href="http://ranka.sub.jp/taroumatsu/?cat=5" title="JavaScript">JavaScript</a> (4)</li>
<li class="cat-item cat-item-6"><a href="http://ranka.sub.jp/taroumatsu/?cat=6" title="jQuery">jQuery</a> (2)</li>
<li class="cat-item cat-item-7"><a href="http://ranka.sub.jp/taroumatsu/?cat=7" title="PHP">PHP</a> (3)</li>
<li class="cat-item cat-item-8"><a href="http://ranka.sub.jp/taroumatsu/?cat=8" title="WordPress">WordPress</a> (3)</li>
<li class="cat-item cat-item-1"><a href="http://ranka.sub.jp/taroumatsu/?cat=1" title="未分類 に含まれる投稿をすべて表示">未分類</a> (3)</li>
</ul>
</li>
<li id="archives-3" class="widget widget_archive">
<h2 class="widgettitle">月別アーカイブ</h2>
<ul>
<li><a href='http://ranka.sub.jp/taroumatsu/?m=201203' title='2012年3月'>2012年3月</a> (15)</li>
</ul>
</li>
<li id="recent-posts-2" class="widget widget_recent_entries">
<h2 class="widgettitle">最近の記事</h2>
<ul>
<li><a href="http://ranka.sub.jp/taroumatsu/?p=47" title="キャプションを付けてみる">キャプションを付けてみる</a></li>
<li><a href="http://ranka.sub.jp/taroumatsu/?p=45" title="はみ出る">はみ出る</a></li>
<li><a href="http://ranka.sub.jp/taroumatsu/?p=42" title="本文の左右に画像を挿入する">本文の左右に画像を挿入する</a></li>
<li><a href="http://ranka.sub.jp/taroumatsu/?p=36" title="画像を挿入する">画像を挿入する</a></li>
<li><a href="http://ranka.sub.jp/taroumatsu/?p=25" title="１０たいとる１０">１０たいとる１０</a></li>
</ul>
</li>
</div>
--- 編集前のHTMLソース（サイドバー部分） ここまで--
・記述
<!-- サイドバー -->
<div id="sidebar">
<ul>
<?php dynamic_sidebar(); ?>
</ul>
</div>
02. サイドバーの装飾
style.cssに下記を追記します。
div#sidebar ul {margin: 0;
padding: 0;}
div#sidebar li {list-style-type: none}
div#sidebar .widget {background-color: #0c8bcd;
padding: 16px;
margin-bottom: 10px}
div#sidebar h2 {font-size: 0.75em;
color: #ffffff;
border-bottom: solid 1px #ffffff;
padding-bottom: 8px;
margin: 0 0 10px}
div#sidebar li li {font-size: 0.75em;
margin-bottom: 4px;
background-image: url(listmark.gif);
background-repeat: no-repeat;
padding-left: 16px}
div#sidebar li li a {text-decoration: none;
color: #ffffff}
[0回]
PR
