新タイプ(第二世代)CSS編集用デザインのアメブロの、ページ全体に背景画像を表示するカスタマイズ方法です。

ページ全体の背景画像は、ブログの雰囲気を決定づける要素の一つですので、印象アップのための導入を検討してほしいと思います。

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

「大きい画像を1枚だけ表示する方法」は別記事にてご紹介予定です。

アメブロのページ全体にパターン画像を敷き詰める

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

まず、アメブロの画像フォルダに、パターン画像をアップロードして、アップロードした画像のURLを取得しましょう。

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

画像のURLを取得できたら、そのURLを使って、ブログデザインCSSに以下のようなコードを追加しましょう。

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

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

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

背景の見えない箇所を半透明にしてみる

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

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

このように、背景画像が透けて見えるように半透明化するには、上記コードに加えて、以下のコードもブログデザインCSSに以下のようなコードを追加しましょう。

まとめ

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

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

よろしければフォローお願いします