アメブロのページ全体に背景画像を表示する方法(パターン敷き詰め)
新タイプ(第二世代)CSS編集用デザインのアメブロの、ページ全体に背景画像を表示するカスタマイズ方法です。
ページ全体の背景画像は、ブログの雰囲気を決定づける要素の一つですので、印象アップのための導入を検討してほしいと思います。
背景画像は、小さめの画像(パターン)を全体に敷き詰める方法と、大きい画像を1枚だけ表示する方法の、主に2種類の方法がありますが、当記事では、「背景パターンを敷き詰めて表示する方法」をご紹介します。
「大きい画像を1枚だけ表示する方法」は別記事にてご紹介予定です。
アメブロのページ全体にパターン画像を敷き詰める
今回は、以下のようなパターン画像を使うことにします。
まず、アメブロの画像フォルダに、パターン画像をアップロードして、アップロードした画像のURLを取得しましょう。
画像のアップロードや画像のURLの取得方法がわからない場合は、こちらの記事を参照下さい。
画像のURLを取得できたら、そのURLを使って、ブログデザインCSSに以下のようなコードを追加しましょう。
CSSの編集のしかたがわからない場合は、こちらの記事を参照下さい。
1 2 3 4 5 6 7 8 9 10 |
/* ページ全体に背景パターン画像を敷き詰める */ .skin-page { background-image: url(【背景画像のURL】); } /* ヘッダー部とコンテンツ部の左右余白部を透過する */ .skin-bgHeader, .skin-blogBody { background: transparent; } |
【背景画像のURL】の部分は、上で取得した画像のURLで置き換えて下さい。
以上で、設定した背景パターン画像が記事冒頭の画像のように背景に敷き詰めて表示されます。
背景の見えない箇所を半透明にしてみる
ついでというわけではありませんが、標準のナビゲーションバーやブログコンテンツ部など、冒頭の画像で白になっている部分を半透明にするやり方もご紹介します。
下記画像のように、背景画像が少し透けてみえるので、上手く使うと狙った雰囲気を演出できるかもしれません。
このように、背景画像が透けて見えるように半透明化するには、上記コードに加えて、以下のコードもブログデザインCSSに以下のようなコードを追加しましょう。
1 2 3 4 5 6 7 8 9 |
/* 背景画像が透けて見えるようにする */ .skin-blogHeaderNav, .skin-blogBodyInner { background: rgba(255, 255, 255, 0.8); } .skin-message, .skin-bgMain { background: transparent; } |
まとめ
以上、新タイプ(第二世代)CSS編集用デザインのアメブロのページ全体に背景画像を表示するカスタマイズ方法をご紹介しました。
よかったら参考にして下さい。
“アメブロのページ全体に背景画像を表示する方法(パターン敷き詰め)” に対して 2 件のコメントがあります
コメントを残す
ご覧いただきありがとうございます。どうぞお気軽にコメント下さい。ただし、コメントでのご質問の方は、記事内容に関することだけに限定させていただきます。ご了承下さい。
くまです。
お世話になってます。
新しいCSSデザインにしたらヘッダーは反映されたのですが、
背景がなぜか反映されませんでした(/ω\)
あとグローバルメニューが、ヘッダーの下に表示されなくて、
なぜかフリースペースのところに表示されてしまいました。。
なぜでしょうか|д゚)
くまさん
こんにちは。
拝見しましたが、背景画像表示されていました。
Ctrl+F5などで再読込してみて下さい。