サイドバーを白背景にするのは「WordPressの使い方>《9》ウィジェット」で紹介しましたが、わたしは本文(本体)エリアとサイドバーウィジェットに背景画像を入れています。
白背景のままだと画像との境界が分かり辛い時があるからです。
ピンク枠:本体、緑枠:サイドバー
仮に本文とサイドバーの背景画像を『bg-main.png』として、子テーマの[images]フォルダにFTP転送します。
そして、子テーマの[style.css]に以下を追加します。
div#main { background-image: url("images/bg-main.png"); /*本体の背景画像*/ } div#sidebar { background-image: url("images/bg-main.png"); /*サイドバーの背景画像*/ padding: 10px; /*上下左右の余白*/ }
サイドバーに背景画像を設定して、本文エリアと同様の角丸にするには、
「カスタマイズ>レイアウト(全体・リスト)>✓サイドバーの背景を白色に」にチェックします。
「カスタマイズ>レイアウト(全体・リスト)>✓サイドバーの背景を白色に」にチェックします。
同様に<pre> 〜 </pre> にも背景画像を設定する場合は、『bg-pre.png』等の画像を用意して、子テーマの[images]フォルダにFTP転送して、子テーマの[style.css]に以下を追加します。
※「見出し、区切り線等の変更」で『pre』を採用している場合は差し替えます。
※ハイライト表示をオンにしている場合は枠線の太さと色しか反映されません。
/*--------------------------------------
pre(cssやphpのタグをそのまま表記)
--------------------------------------*/
pre {
background-image: url("images/bg-pre.png"); /* 背景画像 */
background-color:#f5f5f5; /* 背景色 */
border:2px solid #696969; /* 枠線の太さと色 */
padding: 7px;
overflow: auto;
}