背景色・背景画像の変え方

  1. テンプレート カスタマイズ
背景色の変更

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

テンプレート名:[ pluging_2a_01 ]

背景色変更完了!



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

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


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

更新ボタンをクリック



背景画像の変更

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

テンプレート名:[ pluging_3b_01 ]

背景画像変更完了!



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

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


更新ボタンをクリック

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






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

*例で使用しているテンプレートは、#container、#left .menucontent、#right .menucontentという3つのブロックの背景色をなしにして編集してあります。

デザインの編集→修正→スタイルシートから#containerと#left .menucontentと#right .menucontentを探し、下記のコードをを削除。

background-color: #ffffff;


繰り返しなし

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;


<<  左右カラムの入れ替え方  |  もくじへ  |  テンプレートのレイアウトと横幅の変更  >>
<<  左右カラムの入れ替え方  |  ホーム  |  テンプレートのレイアウトと横幅の変更  >>

コメント

コメントの投稿

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


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

トラックバック

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