WordPress のテーマを自分で作ってみる(2) - サイドバーのカテゴリーのデザイン

サイドバーの「最近の記事」や、「カテゴリー」のデザインを変更してみる。

ここのデザインは、管理人の作りかけのテーマでは、sidebasr h2 と言うスタイルで記述している。

#sidebar h2 {  /* サイドバーのタイトル */
        font-size: 1.2em;
      border-bottom: solid 4px #0066cc;  /* 青色の下線 */

       color: #111111;  /* black */

        text-align: left;
        margin: 0px;
        padding: 6px 10px;
}

これをヘッダーの時にやった様に、以下の様にグラディエーションをかけた、画像ファイルを用意して背景にセットしてみる。
これも同じように、左側は #0066CC から始まって白色にぼかしている。

スタイルで、background-image プロパティと、bacground-repeat プロパティを使って、以下の様に画像ファイルを読み込み。

#sidebar h2 {  /* サイドバーのタイトル */
        font-size: 1.2em;

        background-image: url(images/side_h2.jpg);
       background-repeat: repeat-y; /* 縦方向に繰り返し */

        color: #ffffff;  /* white  字は見やすいように白色に変更*/
        text-align: left;
        margin: 0px;
        padding: 6px 10px;
}

以下の様にできた。