旧CSS：ページ全体の背景色の設定と背景画像を敷き詰める方法

アメブロのCSS編集用デザインで、ページ全体の背景色を設定したり、画背景像を並べて敷き詰めるカスタマイズ方法をご紹介します。

新CSS編集用デザイン向けはこちら

アメブロの新CSS編集用デザインで、ページ全体の背景色を設定したり、画背景像を並べて敷き詰めるカスタマイズ方法について解説します。

CSSの編集

以下のコードをCSSの末尾に追加して下さい。

/*********************************************************
  旧CSS：ページ背景色と背景画像
 *********************************************************/
.skinBody {
  background-color: #fff7f7; /* 背景色 */
  background-image: url(画像のURL);
}

背景色は仮の値(#f7f7f7)を設定してありますので、好みに応じて設定して下さい。

「画像のURL」にはアメブロにアップロードした画像のURLを設定します（この画像が縦横に並んで敷き詰められます）。

カスタマイズに使う画像のアップロード方法と画像のURLの取得方法

アメブロで画像を使ったカスタマイズをする場合に必要な、カスタマイズで使用する画像をアメブロにアップロードする方法と、アップロードした画像をCSSなどから呼び出すために必要な画像のURLを取得する方法について解説します。

旧CSS編集用デザインでは、サイドバーの各パーツに背景色が設定されているなど、透過しない部分もあります。

これらを透過してページの背景色や背景画像が見えるようにしたい場合は、必要に応じ、以下を参考にCSSにコードを追加して下さい（「ダミー」の行は他の設定をどれでも削除しやすいように入れてあります）。

/*********************************************************
  旧CSS：各所を透過
 *********************************************************/
.skinMessageBoard, /* メッセージボード */
.skinArticle, /* 記事部分 */
.skinMenu, .skinMenuHeader, .skinMenuBody, /* サイドバーパーツ */
.commentArea, .blogComment, /* コメント */
.listContentsArea, .tabArea .tab, /* 記事一覧ページ */
.____dummy____ { /* ダミー */
  background-color: transparent;
}

まとめ

以上、アメブロの旧CSS編集用デザインで、ページ全体の背景色を設定したり、画背景像を並べて敷き詰めるカスタマイズ方法、また、背景の見える範囲を調整するために各所を透過する方法をご紹介しました。

よかったら参考にして下さい。