目次

【アメブロカスタマイズ】ページ全体の背景画像を表示する方法(パターン敷き詰め)

「新CSS編集用デザイン」向けです

新CSS編集用デザインのアメブロで、ページ全体の背景画像を表示するカスタマイズ方法をご紹介します。

背景画像は、ブログの雰囲気を決定づける要素の一つですので、背景が白一色では寂しいという場合は検討してみてはいかがでしょう。

背景画像の表示のしかたは、小さめの画像(パターン)を全体に敷き詰めて表示する方法と、大きい画像1枚だけを背景いっぱいに広げて表示する方法の、主に2種類の方法がありますが、当記事では「パターンを敷き詰めて表示する方法」をご紹介します。

「大きい画像1枚だけを背景いっぱいに広げて表示する方法」は別記事にてご紹介できる機会があればと思います。

ページ全体の背景に画像を敷き詰める

今回は下のようなパターン画像を使うことにします。

まず、背景にする画像をアメブロにアップロードして、アップロードした画像のURLを取得します。

もし、画像のアップロード方法や画像のURLの取得方法がわからない場合は、↓こちらの記事をご参照下さい。

画像のURLを取得できたら、そのURLを使って、CSSの末尾に必要なコードを追加します。

もし、CSSの編集のしかたがわからない場合は、↓こちらの記事をご参照下さい。

CSSに追加するコードは以下のようなものです。

/* ページ全体に背景パターン画像を敷き詰める */
.skin-page {
  background-image: url(【背景画像のURL】);
}
/* ヘッダー部とコンテンツ部の左右余白部を透過する */
.skin-bgHeader, .skin-blogBody {
  background: transparent;
}

【背景画像のURL】の部分は、上で取得した画像のURLで置き換えて下さい。

なお、もしヘッダー画像の設定をしてある場合、ヘッダー部を透過してしまうとヘッダー画像が消えてしまいますので、上記コード中の「.skin-bgHeader,」を削除してください。

以上で、設定した背景パターン画像が記事冒頭の画像のように背景に敷き詰められて表示されると思います。

背景画像が見えない部分を半透明にしてみる

ついでというわけではありませんが、標準のナビゲーションバーやブログコンテンツ部など、記事冒頭の画像には、背景が白で背景画像が見えない部分がありますが、ここを半透明にするやり方もご紹介しようと思います。

下の画像のように背景画像が少し透けて見えるので、上手く使うと凝った雰囲気を演出できるかもしれません。

背景画像が透けて見えるように半透明化するには、以下のコードも合わせてCSSの末尾に追加して下さい。

/* 背景画像が透けて見えるようにする */
.skin-blogHeaderNav, .skin-blogBodyInner {
    background: rgba(255, 255, 255, 0.8);
}
.skin-message, .skin-bgMain {
    background: transparent;
}

まとめ

以上、新CSS編集用デザインのアメブロで、ページ全体の背景画像を表示するカスタマイズ方法をご紹介しました。

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