アメブロカスタマイズで背景変更する為の情報まとめ



アメブロのカスタマイズはCSSを調整すれば細かい部分まで設定が可能です。

今回は背景をカスタマイズする方法を解説していきます。

2016年以降の最新版CSS編集デザインと2016年以前の旧CSS編集デザインの両方で使えるようそれぞれ解説しています。

スポンサーリンク

 

記事の背景とブログ全体の背景を意識する

アメブロでは記事背景とブログ全体の背景を別々に設定する事が可能です。

例えば、ブログ全体の背景を黒色にした場合、記事の背景まで黒色だと記事が読めませんよね。

そんな時は記事の背景部分を白色にして対応します。

 

全体の雰囲気が黒色になっても記事部分は背景が白色であれば記事が読めない心配もありません。

 

このように全体の背景と記事背景の色を分ける事で読みやすいブログを作る事が可能なのです。

ブログ全体の背景色をカスタマイズする時には特に注意しておきましょう。

 

ブログ全体の背景色を変える方法

ブログ全体の背景色を変える方法を紹介します。

最新版CSS編集デザインと旧CSS編集デザインと分けて説明するので自分のデザインに合った方を使用してください。

 

最新版CSS編集デザインでブログ全体の背景色を変更する

以下のコードをコピーしてCSSの一番下に貼りつけてください。

.skin-page {
background-color: #FFFFFF;
}
.skin-blogBodyInner {
background-color: #FFFFFF;
}

 

旧CSS編集デザインでブログ全体の背景色を変更する

以下のコードをコピーしてCSSの一番下に貼りつけてください。

.skinFrame {
background-color: #FFFFFF;
}

 

背景色を設定する時の補足解説

・「#FFFFFF」の部分のカラーコードを変更すると色が変わります

 

記事部分の背景色を変える方法

記事部分の背景色は記事タイトルの上あたりも含みます。

記事全体を覆うような背景色の変更となります。

 

最新版CSS編集デザインで記事部分の背景色を変更する

以下のコードをコピーしてCSSの一番下に貼りつけてください。

.skin-bgMain {
background-color: #ffffff;
border: 1px solid #000000;
}

 

旧CSS編集デザインで記事部分の背景色を変更する

以下のコードをコピーしてCSSの一番下に貼りつけてください。

.skinArticle {
background: #ffffff;
border: 1px solid #000000;
}

 

記事部分の背景色設定の補足解説

・「#FFFFFF」の部分のカラーコードを変更すると色が変わります

・「#000000」の部分を変更すると枠の色を変更できます

・枠を無くしたい時は「1px」の数字を「0px」に変更すると枠が消えます

 

ブログ全体の背景に画像を設定する方法

ブログ全体の背景を画像にする事で表現の幅が大きく増えます。

 

最新版CSS編集デザインで背景に画像を設置する

・背景画像を全体に敷き詰める場合(縦横に繰り返し配置)

.skin-page {
background: url(ここに画像のURL) repeat ;
}

 

・縦に連続で背景画像を配置する場合

.skin-page {
background: url(ここに画像のURL) repeat-y center 0;
}

 

・背景画像を固定する場合

.skin-page {
background: url(ここに画像のURL) no-repeat ;
background-attachment: fixed;
background-position: right bottom;
}

 

旧CSS編集デザインで背景に画像を設置する

・背景画像を全体に敷き詰める場合(縦横に繰り返し配置)

.skinFrame {
background: url(ここに画像のURL) repeat ;
}

 

・縦に連続で背景画像を配置する場合

.skinFrame {
background: url(ここに画像のURL) repeat-y center 0;
}

 

・背景画像を固定する場合

.skinFrame {
background: url(ここに画像のURL) no-repeat ;
background-attachment: fixed;
background-position: right bottom;
}

 

背景画像配置に関する補足解説

・背景画像は濃い色にすると記事のテキストが見え辛くなるのでカスタマイズする際には注意が必要です

・背景画像を設定しても画像が表示されない場合は他の部分に背景色が設定されている可能性が高いです。その場合は背景色の設定を消す必要があります。

・背景画像を固定する場合は「background-position」で画像の場所を指定しておきましょう

 

背景に画像を設定する時のサイズはどれくらい?

背景画像を設定する時の画像サイズは背景画像の配置の仕方によって変わります。

例えば、ブログ全体に画像を敷き詰めたい(縦横に敷き詰める)場合は「100px×100px」や「50px×50px」といった小さめの画像でも大丈夫です。

しかし、縦にだけ繰り返し配置するパターンの場合は横長の画像が必要になります。

 

横長の画像とはだいたい「1400px×50px」といった感じのサイズになります。

旧CSS編集デザインであればもう少し小さい横幅「1300px×50px」でも大丈夫でしょう。

サイズの微調整は必要になりますが、このサイズであれば概ね綺麗に背景画像としてカスタマイズする事ができます。


スポンサーリンク