2016年3月16日

サイドバー全体に背景をつけて、見やすくする方法。WordPressカスタマイズ。

スポンサードリンク

 やり方は2通りあります。
一つはサイドバー全体に背景をつける方法。

もう一つは、サイドバーそれぞれセクションで分けて、
それぞれ個別で背景でくくり、すき間を設ける事。

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ヘルプを参照下さい。


 ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
(わからんから)


スポンサードリンク