アメブロ

アメブロにオリジナルの背景を設定する方法

ウェブページの背景が真っ白だと、クリーンな印象になりますが、寂しい印象にもなりがちです。オリジナルのヘッダーを設定し、背景に画像を敷き詰めると、一気にオリジナル感のあるブログに変わります。

せっかくなら自分だけのオリジナルのブログを作って、自分自身も楽しく、ブログを見に来ていただいた方にも興味を持ってもらえるような、おしゃれで素敵なブログを作りましょう!

アメブロの背景を設定するための下準備

アメブロの背景をオリジナルのものに変更するためには、アメブロのデザインをカスタマイズ可能なデザインに変更する必要があります。

カスタマイズ可能なデザインに変更する手順、カスタマイズ可能なデザインの種類については以下のヘッダー設置の方法を書いた記事の中で詳しく紹介しています。

集客力アップ!アメブロをオリジナルのヘッダーにする方法芸能人の方のAmebaブログなどを見ると、オリジナルのおしゃれなヘッダーにされている方を見かけますよね。個人の方でもお店のページをPRす...

CSS編集用デザインにするか、そうでないカスタマイズ可能なデザインにするか、ご自分の好みで選んでください。

今回作るアメブロの背景のデザインパターン

ウェブページに背景画像を設定する場合、背景にぎっしり画像を敷き詰めるパターン、特定の場所にのみ背景を設定するパターンがあります。この記事の中では、背景にぎっしり画像を敷き詰めるパターンのみを紹介します。

背景画像の表示サンプル

アメブロのカスタマイズ可能なデザインの内、CSS編集用デザインでは自由に選べますが、そうではない簡単カスタマイズを使用する場合、背景にぎっしり画像を敷き詰めることになります。

CSS編集用デザインでは特定の部分のみに背景画像を使用することができます。右下などにワンポイント的に背景画像を使う場合、たとえば動物などのキャラクターをちょこんと乗せるとかわいくなりますよ!

またCSS編集用デザインでは、背景に画像だけでなくCSSでの装飾を設定することができます。CSSはウェブページの見た目を整えるための指示書ですので、たとえば「グラデーションの背景にしてほしい」というような複雑な指示も指定させることができます。

それぞれアメブロのデザインには次のような特徴があります。

その他のデザイン
  • 簡単にヘッダー・背景が変更できる!
  • ヘッダーと背景以外は変更ができない…
  • 背景はぎっしり画像を敷き詰めるデザインのみ
CSS編集用デザイン
  • ちょっと難しい
  • 背景の設置位置、繰り返しが自由に設定できる
  • CSSでグラデーションなど背景のデザインを指定できる

ウェブページの背景画像の選び方のポイント

ウェブページにぎっしりと繰り返して背景画像を敷き詰める場合、シームレスな画像(継ぎ目のない画像)で、そこまで派手ではないもの、ごちゃごちゃしていないシンプルなものを使用するのが望ましいです。

ウェブページの背景はシンプルなものが望ましいです

背景に派手なデザインを使用してしまうと、読む人の目の負担になりますし、何より記事に集中できず背景に目が行ってしまいます。記事を落ち着いてしっかり読んでもらうために、アメブロの背景画像はすっきりシンプルなデザインを選びましょう。

ウェブページの背景画像はシームレスな画像を使いましょう

シームレスな画像ではないものを使用した場合、繰り返しをしたときの境目がガタガタになってしまいます。たとえばお店でプレゼントを買ってラッピングをしてもらった場合、同じ柄、模様がずっと続いていて、どこで切り取ってもきれいな紙があると思います。

あんな感じで繰り返し画像を繰り返し敷き詰め、同じ柄と模様を続けて表示させたとき、その境目がまったく見えなくなるのがシームレスな画像です。

アメブロの背景をオリジナルのものに変更する

CSS編集用デザイン以外とCSS編集用デザインでは、アメブロの背景をオリジナルデザインに変更する方法が違います。

ここからは2通りの方法でアメブロの背景を変更する方法をご紹介します。

CSS編集用デザイン以外で背景を変更する方法

これからCSS編集用デザイン以外でカスタマイズ可能なデザインを選択した場合の、アメブロの背景を変更する方法を紹介します。

「デザインの変更」のページから適用中のデザイン→カスタマイズをクリックしましょう。

カスタマイズの画面を開くと、このような画面が表示されます。

アメブロの簡単カスタマイズの画面

一番右の背景から「オリジナル画像を使う」というところを押せば、自分の好きな画像をアメブロにアップロードすることができ、背景として設定することができます!

またアメブロではいくつかデフォルトの背景が用意されています。テンプレートから選択できますと書かれた左の画像をクリックすると、最初から用意されている、いくつかのパターンを選択することができ、その背景に設定することができます。

変更ができたら保存を押しましょう。

CSS編集用デザインで背景を変更する方法

これからCSS編集用デザインを選択した場合の、アメブロの背景を変更する方法を紹介します。ヘッダー以下に背景を設置する場合のCSSの編集方法、ヘッダーの周辺を含めたブログ全体に背景を設置する場合のCSSの編集方法の2種類をご紹介します。

「デザインの変更」のページから適用中のデザイン→カスタマイズをクリックしましょう。

オリジナル背景画像のアップロード

ブログデザインヘッダ・背景用画像の追加というところから、ファイルを選択して使いたい画像をアップロードしましょう。アップロードに成功すると、次のような画面になります。

背景画像をアップロードした画面

今回は一番右の画像を背景として使用します。自分の変えたい背景画像と、その下に「この画像のパス」という文字が表示されました。

パスとはこの背景画像の住所のようなものです。ここに背景に使用するための画像があるから、この場所の画像を表示させてほしいというお願いをするために使用します。

アメブロのヘッダー以下に背景をつける場合のCSSの編集

これからアメブロのヘッダーの下部分にのみ背景をつける場合の設定をご紹介します。CSSはウェブページの見た目を整えるための指示書です。これから「背景としてこの画像を使用してね」という指示を、ブログに教えてあげるための作業をします。

現在使用中のブログデザインCSSという項目を、下にスクロールしていくと、 (1-2) 基本背景と書かれている部分が見つかります。

修正前

/* (1-2) 基本背景
——————————————–*/
/* コンテンツ背景、ヘッダー以下の背景色 */
.skin-blogBody, .skin-blogBodyInner {
background-color: #ffffff;
}

 

これを次のように書き換えます。

修正後

/* (1-2) 基本背景
——————————————–*/
/* コンテンツ背景、ヘッダー以下の背景色 */

.skin-blogBody, .skin-blogBodyInner {
background-image: url(ここを背景用画像のパスに書き換える);
}

background-image:url();の部分に、先ほどアップロードした、アメブロの背景に使用するための画像の「この画像のパス」と書かれている文字をコピーして貼り付けます。

するとこんなイメージになります。

ヘッダーの下の部分にのみ、全面に背景画像が敷き詰められました。

保存を押せば完成です!

アメブロの全画面に背景をつける場合のCSSの編集

これからはヘッダーの下だけでなくて、ヘッダーの周りも含めて全画面に背景をつけたい場合の設定をご紹介します。CSSはウェブページの見た目を整えるための指示書です。これから「背景としてこの画像を使用してね」という指示を、ブログに教えてあげるための作業をします。

現在使用中のブログデザインCSSという項目を、下にスクロールしていくと、 (1-2) 基本背景と書かれている部分が見つかります。

修正前

/* (1-2) 基本背景
——————————————–*/
/* コンテンツ背景、ヘッダー以下の背景色 */
.skin-blogBody, .skin-blogBodyInner {
background-color: #ffffff;
}

これを次のように書き換えます。

修正後

/* (1-2) 基本背景
——————————————–*/
/* 全体の背景色 */
body{
background-image: url(ここを背景用画像のパスに書き換える);
}
/* コンテンツ背景、ヘッダー以下の背景色 */
.skin-blogBody, .skin-blogBodyInner {
}

background-image:url();の部分に、先ほどアップロードした、アメブロの背景に使用するための画像の「この画像のパス」と書かれている文字をコピーして貼り付けます。

するとこんなイメージになります。

保存を押せば完成です!

記事部分などの背景を白に設定する(CSS編集用)

今回は白に近い背景画像を設定したため、その上に乗っている文字は読みやすいかと思います。しかしかわいいピンクなど濃い色の背景を設定した場合、文字が読みづらくなることがあります。

こんなはずじゃなかったのになぁ…という方に、CSS編集用デザイン限定ではありますが、良い解決策があります。

記事部分のみの背景を白に設定する

記事部分のみの背景を白に設定すると、とても記事が読みやすく、ブログ全体が華やかになります。これからCSS編集用デザインで、記事部分のみの背景に白色を設定する方法を紹介します。

記事部分の背景のCSSの編集

現在使用中のブログデザインCSSという項目を、下にスクロールしていくと、 (1-2) 基本背景と書かれている部分が見つかります。

ヘッダー以下にのみ背景をつけた場合

ヘッダー以下にのみ背景画像をつけた場合は、CSSが以下のような状態になっているはずです。

修正前

/* (1-2) 基本背景
——————————————–*/
/* コンテンツ背景、ヘッダー以下の背景色 */

.skin-blogBody, .skin-blogBodyInner {
background-image: url(ここを背景用画像のパスに書き換える);
}

これを以下のように書き換えます。

修正後

/* (1-2) 基本背景
——————————————–*/
/* ヘッダー以下の背景色 */

.skin-blogBody {
background-image: url(ここを背景用画像のパスに書き換える);
}

/* コンテンツ背景色 */

.skin-blogBodyInner {
background-color: #ffffff;
}

ヘッダー周辺を含む全画面に背景をつけた場合

ヘッダー周辺を含む全画面に背景画像をつけた場合は、CSSが以下のような状態になっているはずです。

修正前

/* (1-2) 基本背景
——————————————–*/
/* 全体の背景色 */
body{
background-image: url(ここを背景用画像のパスに書き換える);
}
/* コンテンツ背景、ヘッダー以下の背景色 */
.skin-blogBody, .skin-blogBodyInner {
}

これを以下のように書き換えます。

修正後

/* (1-2) 基本背景
——————————————–*/
/* 全体の背景色 */
body{
background-image: url(ここを背景用画像のパスに書き換える);
}
/* ヘッダー以下の背景色 */
.skin-blogBody {
}

/* コンテンツ背景色 */
.skin-blogBodyInner {

background-color: #ffffff;
}

ブログ全体に背景を設置して、記事部分のみの背景を白に変更した場合、次のようなイメージになります。

全体に設定した背景の画像が白っぽいため、効果がわかりにくいですが…

これが濃い色の背景に、記事部分のみ背景を白くすると効果てきめんです!

これでアメブロの背景は完璧です。お疲れさまでした!