アメブロの背景に色や画像を入れる


アメブロの背景に色を入れる

新カスタム可能デザインの「CSS編集用デザイン」で背景に色をいれるやり方です
(旧カスタム可能デザインのベーシックではありません)

CSS編集デザインのCSSの編集で

.skinBody{
background-color:#CCCCCC; /*背景色*/
}

を追加します

#CCCCCC; の部分のカラーコードを変えて色を変えます。

カラーコードはこちらから

ただ、このままですと



このようになります。

記事やサイドバーの部分は白くするためには

.skinHeaderArea,.skinContentsArea{
background-color:#ffffff; /*背景色*/
}

も追加してみてください

背景に画像を入れる場合

色ではなく、画像を入れる場合は

.skinBody{
background:url(画像URL) no-repeat;
}

をCSSに追加します

※ページ背景にしたい画像のURLを括弧内に入れます。

ユーザー環境によって、パソコンの画面の大きさは異なります。

background:url(画像URL) no-repeat;

このno-repeatを削除すると、それぞれの画面に応じて背景画像が画面の大きさ分繰り返して表示されます。

背景画像を繰り返して表示させない場合は、 no-repeat
背景画像を縦に繰り返したい場合は repeat-y
背景画像を横に繰り返したい場合は repeat-x

にします

2017年3月からのアメブロ常時SSL化に際しまして、「フリープラグイン」を使ったカスタマイズが利用できなくなる可能性があります
【追記あり】アメーバブログの常時SSL化に伴う仕様変更について|スタッフブログ
フリープラグインを使ったカスタマイズはせずに、CSSを使ったカスタマイズを行ってください

コメントを残す