アメブロ – ヘッダー画像の変更

2015/09/25

アメブロのカスタマイズをしてみたのでメモ的に投稿します。

無料ブログの場合は、デフォルトで広告が入ってきてしまったり、カスタマイズがうまくできなかったりすることが多いですね。

アメブロも例外ではなく、カスタマイズが少々面倒ですね。

SEO的な対策はどうかというと、あまり気にせず。。。

というか、無視しています。

アメブロを使った理由は幾つかあるのですが、

・スマホから軽く書けるブログ用にブログが欲しかった。

・被リンク送れれば良いかな。

・有名な無料ブログが良いかな。

という点でしょうか。

アメブロの場合はアフィリエイトでの活用は禁止されているので、広告を貼りつけるなどとは考えていません。

本当、軽い気持ちで、有名・無料・気軽・被リンク送るという点だけで選びました。

アメブロの場合、ヘッダー画像の大きさは、横980pix　×　縦300pix以内です。

CSS編集ができるようにする

まずは、「ブログ管理」画面から、「デザインの変更」を選択し、その中の右下の「カスタム可能」ボタンをポチっとする。

次に、「CSS編集用デザイン」を選択する。

適当に、好みのデザインを選択して「適用する」ボタンをポチっとします。

これでCSS編集できるようになっているはずです。

ヘッダー画像をアップロードする

再び、「ブログ管理」画面から「デザインの変更を」選択し、「CSSの編集」のアンカーをポチっとします。

まずはヘッダー画像とする画像をアップロードします。

画像は横980pix　×　縦300pix以内です。

画像の保存形式は、jpg、gif、pngのいずれかの形式のものになります。

CSSを編集する

次に、CSSを編集していきます。

編集するのは下記の範囲になります。

①変更するのは下記部分です。


/* (3-2) ブログヘッダー
--------------------------------------------*/

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */

②{}の中に下記5行を追記します。

・追記するコード


background-image: url(コピーした画像のパス);
background-repeat: no-repeat;
background-position: center top;
width: 980px;
height: 300px;

・追記後のコード


/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background-image: url(コピーした画像のパス);
background-repeat: no-repeat;
background-position: center top;
width: 980px;
height: 300px;
}/* ←ブログヘッダーに背景画像を敷きたいとき */

③（）内の"コピーした画像のパス"に画像のパスを書き込みます。

画像のパスは下記になっているので、コピペすればオッケーです。

・コピーする画像のパス

・編集後のコード


/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background-image: url(http://stat.blogskin.ameba.jp/blogskin_images/20150925/10/31/EQ/p/o09800300pierre-551443144570406.png);
background-repeat: no-repeat;
background-position: center top;
width: 980px;
height: 300px;
}/* ←ブログヘッダーに背景画像を敷きたいとき */

最後に「保存」ボタンをポチッとして終了です。