一つはサイドバー全体に背景をつける方法。
もう一つは、サイドバーそれぞれセクションで分けて、
それぞれ個別で背景でくくり、すき間を設ける事。
Stinger5サイドバー全体に背景色をつける方法
私はStinger5を使用していますが、
Stinger3のカスタムを記載したサイトを参考にカスタムしました。
こちら
【Stinger3】 サイドバーに背景を加えた。更に背景を半透明にした
Stinger5の元のCSSは以下のようになっています。
#side aside {
float: right;
width: 300px;
padding: 0px;
}
これを、子テーマで書き換えます。
#side aside {
float: right;
width: 300px;
padding: 0px;
border: 1px solid #ccc;
border-radius: 4px 4px 4px 4px;
background: rgba(255,255,255,0.7);/*サイドバー半透明化*/
}
うっすら半透明にしてみたり。
一番下のコードですね。
ちなみに、width: 300px;
は、サイドバーの横幅の事です。
大きく変更する時は、サイト全体の幅をまず大きくしてから。
またはコンテンツ部分を狭めるか。
ひとまずこれで、サイドバーに背景がつき、
見やすくなったと思います。
前回の投稿も合わせてどうぞ。
CSSで見やすく装飾した新着記事一覧をサイドバーに設置、WordPressカスタム。
サイドバーごとに分けて背景をつける
次のやり方は、
サイドバーひとつひとつを分けて背景でくるんでしまう方法です。
この場合、
上記に記載している
「Stinger5サイドバー全体に背景色をつける方法」
と合わせて行っても良いですし、
どちらか一つでも良いです。
おそらくどちらか一つにされると思いますが。
でははじめます。
まずはCSSを作りましょう。
スタイルシートに以下のコードを追加します。
.another-sidebar{
padding: 10px 10px;
margin: 10px 0 10px 0;
background: rgba(255,255,255,0.7);/*サイドバー半透明化*/
border: none;
border-radius: 1px;
color: #4e2800;
}
color:というのは、文字色の事です。
次に、sidebar.phpへ。
<div class="another-sidebar">
～
</div>
で、背景をつけたいサイドバーのコンテンツをくくってください。
これだけでOKです。
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク