アメブロのヘッダー画像を変更する方法

アメブロカスタマイズの初級編として
今回はアメブロのヘッダー画像を変更する
方法について解説します。

まずは、アメブロのカスタマイズを行うにあたり、
カスタム可能なデザインテンプレートの設定が必要です。

以前、「はじめてのアメブロカスタマイズ【準備編】」という
記事を書かせて頂きました。こちらでカスタム可能なデザインテンプレートの設定の
説明をさせて頂いていますので、こちらの記事を参考に設定を行ってみて下さい。

ブログデザインのCSSの編集

ブログ管理画面の左サイドバーにある「デザインの変更」をクリックして
適用中のデザインの［ CSSの編集 ］をクリックすると、ブログデザインの
CSSの編集のページが表示されます。

まずは、ヘッダー画像をアップロードする必要があるのですが、
レンタルサーバーをお持ちでしたら、そちらにアップロードして頂く方が
やりやすいと思いますが、今回はアメブロの方にアップロードする方法で
解説させて頂きます。

「ブログデザインヘッダ・背景用画像の追加」の「ファイルを選択」ボタンをクリックして
用意したヘッダー画像を選択し、アップロードボタンをクリックします。

ヘッダー画像のサイズは、横幅は980pxと決まっているので、このサイズで作成します。
縦幅はご自由に設定出来ますが、今回は300pxの画像でご説明させて頂きます。

アメブロにアップロードする場合、扱えるファイルはgif、jpg、pngのみで、
１枚あたりのサイズは1MB以内というルールがありますので気をつけて下さい。

無事にアップロードされると、このように「アップロードされた画像」の一覧に
表示されます。「この画像のパス」のURLは後程、ヘッダー画像のCSS設定部分で
使用します。

CSSファイルを編集する

「現在使用中のブログデザインCSS」にCSSの記述がされていますが、
この中のCSSを全て選択してコピーします。

テキストエディターなどを立ちあげて、コピー内容を貼り付けます。
アメブロ内で編集しても良いですが、テキストエディターの方に
貼り付けて編集した方がやりやすいと思います。

CSS設定を見ていくと下記のような記述があります。

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

ここの部分に設定していきます。

.skinHeaderArea{}となっていますが、
この{}の中に下記の設定を記述します。

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

（画像のパス）の部分に、アメブロにアップロードしたヘッダー画像のパスを
記述します。「アップロードされた画像」一覧の部分の「この画像のパス」の所に
画像パスのURLが書かれているのでコピーして貼り付けます。

まとめますと、

/* (3-2) ブログヘッダー
——————————————–*/
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background-image: url(http://stat.blogskin.ameba.jp/◯◯.jpg);
background-repeat: no-repeat;
background-position: center top;
width: 980px;
height: 300px;
}/* ←ブログヘッダーに背景画像を敷きたいとき */

このように記述します。

ちなみに、CSSの書き方はこの他にも記述方法はいくつかあるので
こちらは一例になります。

記述が終わりましたら、CSSのファイル内容を全選択してコピーして
アメブロの「現在使用中のブログデザインCSS」の中に貼り付けて
「保存」ボタンをクリックします。

ブログを確認して、このように設定したヘッダー画像が表示されれば成功です。

まとめ

うまく表示されない時は、CSSの例えば()を削除してしまっていたり、
うっかりミスが原因のこともありますので、
コピペをやり直して再度確認してみて下さい。

CSSの知識があまりない方でも、コピペして使って頂ければ
すぐに好きなヘッダー画像に変更出来ますので、
是非チャレンジしてみて下さい。

まずは、アメブロカスタマイズの基本中の基本、
ヘッダー画像の変更を是非マスターしてみて下さいね。

今後、また他の部分のカスタマイズ方法についても
ご紹介させて頂ければと思っております。

• Tweet
• 
• 

• 
• 
•