WordPress テーマの詳説：第三章

これまでサイドバーの主な部分のスタイリングとカラーリングをしてきたが、リンクはまだデフォルトの色を使用している。これを次の二つのスタイルで変更しよう：

#sidebar a
{
text-decoration: none;
color: #4A2C00;
}

#sidebar a:hover
{
text-decoration: underline;
}

その結果は標準的なカラースキームだ：

検索の部分はまだ変更しておらず、デフォルトのままだととても見苦しい。スタイリングをいくつか施して変形させる。

#searchform
{
text-align: center;
}

#searchform input
{

border: 1px solid #4A2C00;
background-color: #FDE5C3;
}

#searchform #s
{

width: 50%;
background-color: white;
}

これで検索部分はこのようになった：

最後のステップは、この PHP コードが有効になっていればだが、カレンダーのスタイリングだ。カレンダーは複雑な要素で、HTML のテーブルを使用して構築されている。正しく表示させるにはしっかりとしたスタイリングが必要となる。

#wp-calendar
{
border: 1px solid #FDE5C3;
width: 80%;

margin: 0 auto;
text-align: center;
margin-bottom: 15px;

}

#wp-calendar th
{
background-color: #FDE5C3;
}

#wp-calendar a
{
border: 1px solid #4A2C00;

background-color: white;
display: block;
}

#prev a, #next a
{

border: 0;
}

#wp-calendar caption
{
text-align: center;

width: 100%;
}

これらのスタイルではテーブル要素を修飾し、より大きなスペースを追加している。テーブルのヘッダー th には色が付けられ、投稿のある日にちは白で強調表示される。 ‘next’（次）と ‘prev’（前）の要素には特別なスタイルを施してボーダーを表示しないようにした。これによって次のような表示になる：

これまでのところを一つにまとめると最終的なサイドバーができ上がる。シンプルで簡明、なおかつ更なる変更拡張の方法がたくさんある。第二章のテーマと合わせてみると次のようになる：

ページ: 1 2 3 4 5 6 7

Standing Tall