背景の変更方法


ご注意!

CSSやHTMLに関するお問い合わせはサポート対象外となります。
カスタマイズにつきましては上級者向けの機能となりますので、CSSやHTMLなどの詳細な使用方法やご不明な点などは、書籍やネット記事などをご参照いただき、お客さまの責任のもと、ご利用いただきますようお願いいたします。

ブログ全体の背景色の変更または背景画像を挿入するCSSの一例をご案内します。
※デザインテンプレートによっては反映されない場合があります。

CSS編集は、管理画面の「デザイン」-「デザイン切り替え/CSS編集」にてご変更ください。

●CSSの編集方法 - CSS・HTMLの編集方法 ※注意書きあり
https://support.at.webry.info/201907/article_design_004.html#css


【1】背景色を変更する方法
CSS

body {
background-color: 色;
}



記述例
CSS

body {
background-color: #ff8000;
}


表示例

変更前
背景before.png

変更後
背景色after.png
※背景色が灰色からオレンジ色になりました。


ご参考

#FF0000 #FF8000 #FFFF00 #BFFF00 #00FF00 #00BFFF
#0040FF #BF00FF #FF0080 #848484 #000000 #FFFFFF


【2】背景画像を設定する方法
背景画像を縦横にくり返して表示する場合
CSS

body {
background: url("画像のURL");
}



記述例
CSS

body {
background: url("https://~.jpg");
}


表示例

変更前
背景before.png

変更後
背景画像縦横after.png
※背景が画像になりました。


背景画像を横方向のみにくり返して表示する場合
CSS

body {
background: url("画像のURL") repeat-x;
}



記述例
CSS

body {
background: url("https://~.jpg") repeat-x;
}


表示例

変更前
背景before.png

変更後
背景画像横after.png
※横方向のみのくり返し表示になりました。


背景画像を縦方向のみにくり返して表示する場合
CSS

body {
background: url("画像のURL") repeat-y;
}



記述例
CSS

body {
background: url("https://~.jpg") repeat-y;
}


表示例

変更前
背景before.png

変更後
背景画像縦after.png
※縦方向のみのくり返し表示になりました。



関連リンク

●CSS・HTMLの編集方法 ※注意書きあり
https://support.at.webry.info/201907/article_design_004.html
●基本的なタグ・プロパティ
https://support.at.webry.info/202009/article_design_017.html
●ブログの更新内容が反映されません
https://support.at.webry.info/201907/article_settei_019.html

問合せ.png 問題が解決できない場合

操作方法で問題が解決できない場合は、こちらからご連絡ください。
※CSSやHTMLに関するお問い合わせはサポート対象外となります。