背景色の変更

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



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

デザインの編集＞修正＞スタイルシートよりbodyと書かれた部分を探して下さい

例）
body {
text-align: left;
background: url(http://1.dtiblog.com/template/pluging_2a_01/image/bg.jpg);
}

background: url(http://1.dtiblog.com/template/pluging_2a_01/image/bg.jpg);
の部分をお好きなカラーコードに変更します
例）
background: #660000;


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

更新ボタンをクリック



背景画像の変更

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



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

デザインの編集＞修正＞スタイルシートよりbodyと書かれた部分を探して下さい

例）
body {
text-align: left;
background: url(http://1.dtiblog.com/template/pluging_3b_01/image/bg.jpg) repeat-x fixed;
}

background: url(http://1.dtiblog.com/template/pluging_3b_01/image/bg.jpg) repeat-x fixed;
が現在の背景画像のことです。お好きな写真をDTIブログの管理画面にアップして、そのURLを()内に書き換えて下さい。
例）
background: url(http://13.dtiblog.com/b/blogmanual/file/myphoto.jpg);

更新ボタンをクリック

＊この記事の続きにもっと、細かいテクニックを説明しています。興味がある方はぜひ参考にして下さい。

---

背景画像はそのままだと、画像を繰り返して表示するようになっています。背景画像をヨコ方向だけ繰り返し表示させたり、右下部だけに表示させたりするには、下記のように設定します。


繰り返しなし

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

ヨコ方向に繰り返し

background: url(http://13.dtiblog.com/b/blogmanual/file/penguin.jpg) repeat-x;

タテ方向に繰り返し

background: url(http://13.dtiblog.com/b/blogmanual/file/penguin.jpg) repeat-y;

右下部のみに表示　(スクロールダウンして下さい）

background: url(http://13.dtiblog.com/b/blogmanual/file/penguin.jpg) right bottom no-repeat;
*もちろんtopだけや、top leftとも指定できます。

背景画像を固定
background: url(http://13.dtiblog.com/b/blogmanual/file/myphoto.jpg) fixed;


例では、右下に固定で背景画像を表示
http://13.dtiblog.com/b/blogmanual/file/penguin.jpg) bottom right no-repeat fixed;