WordPress

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

2009年9月18日

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

image

ここのデザインは、管理人の作りかけのテーマでは、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 から始まって白色にぼかしている。

image

スタイルで、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;
}

以下の様にできた。

image

-WordPress

Copyright© エンジニアの何でもメモ帳 , 2022 All Rights Reserved.