アメブロのCSS編集用デザインで、ページ全体の背景色を設定したり、画背景像を並べて敷き詰めるカスタマイズ方法をご紹介します。
カスタマイズは、CSSの編集で行いますので、わからない場合は先にやり方を確認しておいて下さい。
CSSの編集
以下のコードをCSSの末尾に追加して下さい。
/*********************************************************
新CSS：ページ背景色と背景画像
*********************************************************/
/* ヘッダーとボディを透過 */
.skin-bgHeader, .skin-blogBody, .skin-blogBodyInner {
background-color: transparent
}
/* ページ背景色と背景画像 */
.skin-page {
background-color: #f7f7f7; /* 背景色 */
background-image: url(画像のURL);
}新CSS編集用デザインは、初期状態でヘッダーやコンテンツボディ部が白(#ffffff)で塗りつぶされている状態のため、ページ背景に色や画像を設定しても見えないためそれらを「透過」してあります。
背景色は仮の値(#f7f7f7)を設定してありますので、好みに応じて設定して下さい。
「画像のURL」にはアメブロにアップロードした画像のURLを設定します（この画像が縦横に並んで敷き詰められます）。
また、トップページがリスト型やタイル型の場合、トップページの記事一覧部分も透過してしまいます。
その部分の背景を白にするにはCSSに以下のようなコードも追加します。
/*********************************************************
新CSS：リスト型・タイル型トップページの記事一覧部分の背景色
*********************************************************/
/* リスト型 */
.skin-timeline {
margin-left: 0;
margin-right: 0;
padding-left: 40px;
padding-right: 40px;
background-color: #ffffff; /* 記事一覧部分の背景色 */
}
/* リスト型 */
.skin-tiles {
padding-top: 40px;
background-color: #ffffff; /* 記事一覧部分の背景色 */
}逆に、これ以外のところも透過してページの背景色や背景画像が見えるようにしたい場合は、必要に応じ、以下を参考にしてCSSにコードを追加して下さい（「ダミー」の行は他の設定をどれでも削除しやすいように入れてあります）。
/*********************************************************
新CSS：各所を透過
*********************************************************/
.skin-bgHeader, /* ブログヘッダー部 */
.skin-blogHeaderNav, /* ヘッダーナビゲーション */
.skin-blogFooterNavInner, /* フッターナビゲーション */
.skin-blogBody, .skin-blogBodyInner, /* ブログコンテンツ部 */
.skin-bgMain, /* 記事部分 */
#commentsList .is-owner, /* オーナーコメント */
.____dummy____ { /* ダミー */
background-color: transparent;
}まとめ
以上、アメブロの新CSS編集用デザインで、ページ全体の背景色を設定したり、画背景像を並べて敷き詰めるカスタマイズ方法、また、背景の見える範囲を調整するために各所を透過する方法をご紹介しました。
よかったら参考にして下さい。
