コンテンツ全体はcontainerというブロックで囲われています。このブロックに、背景色や、背景画像を設定してみましょう。

コンテンツ全体の背景色編集

↓↓↓↓↓↓↓↓↓↓↓↓↓↓クリックで拡大↓↓↓↓↓↓↓↓↓↓↓↓↓↓



カスタマイズの前にテンプレートのコピーを取って下さい

デザインの編集＞修正＞スタイルシートより #container を探して下さい

pluging_3c_01の場合

#container {
width: 960px;
margin: 0 auto;
background: url(http://1.dtiblog.com/template/pluging_3c_01/image/container.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
border-left: 1px solid #705038;
border-right: 1px solid #705038;
font-size: 12px;
line-height: 22px;
}

backgroundが背景になります。カラーコードを参考に、編集して下さい

#container {
width: 960px;
margin: 0 auto;
background: #61360f;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-left: 1px solid #705038;
border-right: 1px solid #705038;
font-size: 12px;
line-height: 22px;
}


・カラーコードはこちらをご覧下さい


更新ボタンをクリックして完成です


コンテンツ全体の背景色編集では、もう少し細かい設定を説明したいと思います。興味がある方は、記事の続きを読んでみて下さい。

---

コンテンツ全体の背景色編集

こちらの例では、単純に画像を設置するだけではなく、もう少し踏み込んだテクニックもご紹介したいと思います。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓クリックで拡大↓↓↓↓↓↓↓↓↓↓↓↓↓↓



カスタマイズの前にテンプレートのコピーを取って下さい

デザインの編集＞修正＞スタイルシートより #container を探して下さい

pluging_3c_01の場合

#container {
width: 960px;
margin: 0 auto;
background: url(http://13.dtiblog.com/template/pluging_3c_01/image/container.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
border-left: 1px solid #705038;
border-right: 1px solid #705038;
font-size: 12px;
line-height: 22px;
}

backgroundが背景になります。使用したい背景画像を管理画面にアップして、下記のように編集して下さい

#container {
width: 960px;
margin: 0 auto;
background: url(http://13.dtiblog.com/b/blogmanual/file/dog.jpg) right bottom no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-left: 1px solid #705038;
border-right: 1px solid #705038;
font-size: 12px;
line-height: 22px;
}


・背景画像の位置指定はこちらをご覧下さい

これだけでは、下記のように、写真がキレイに見えてくれません。



そこで次の３箇所を更にこのように編集します





更新ボタンをクリックして完成です