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

  1. テンプレート カスタマイズ
コンテンツ全体はcontainerというブロックで囲われています。このブロックに、背景色や、背景画像を設定してみましょう。

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

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

テンプレート名:[ pluging_3c_01 ]

全体の背景色変更完了!



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

デザインの編集>修正>スタイルシートより #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;
}


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


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


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


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

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

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

テンプレート名:[ pluging_3c_01 ]

全体の背景画像変更完了!

*拡大したらスクロールダウンして背景画像をご確認下さい



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

デザインの編集>修正>スタイルシートより #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;
}


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

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



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

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


全体の背景色(白)を削除します

background: url(http://13.dtiblog.com/b/blogmanual/file/dog.jpg) no-repeat right bottom;

.entry {
margin: 0 0 10px 0;
color: #555555;
background: #ffffff;
}


記事の背景色(白)も削除します

.entry {
margin: 0 0 10px 0;
color: #555555;
}

#footer {
width: 940px;
margin: 0 auto;
background: #ffffff url(http://13.dtiblog.com/template/pluging_3c_01/image/footer.gif) repeat-x bottom;
clear: both;
text-align: center;
padding: 20px 10px;
overflow: hidden;
color: #444444;
font-size: 11px;
line-height: 14px;
}


フッターの背景色(白)も削除します

background: url(http://13.dtiblog.com/template/pluging_3c_01/image/footer.gif) repeat-x bottom;



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

<<  記事投稿欄の編集  |  もくじへ  |  サイドメニュー  >>
<<  記事投稿欄の編集  |  ホーム  |  サイドメニュー  >>

コメント

コメントの投稿

管理者にだけ表示を許可する


画像の文字を半角数字で下記ボックスに記入ください。
文字が読みにくい場合はブラウザの更新をすると新しい文字列が表示されます。

トラックバック

トラックバックURLはこちら
http://blogmanual.dtiblog.com/tb.php/96-f86e253c
|
ブログ | 総合ポータル | ニュース | テンプレート
利用規約 | ||通報|| | Report Abuse