アメブロカスタマイズその2 ヘッダー画像を設置する方法

起業・副業の集客ツールの一つであるアメブロ。今回はアメブロカスタマイズその2と題しまして、その1で作成したアメブロヘッダー画像をアメブロのヘッダーに設置する方法をご紹介します。

やり方を見ながら進めていけば、簡単に設置することができますので、ぜひ自分でアメブロヘッダー画像をオリジナルにカスタマイズしてみて下さいね！

アメブロカスタマイズその1 ヘッダーメニューを簡単に作成する方法

見ながらやれば簡単！アメブロのヘッダー画像設置方法

テンプレートのヘッダー画像から、オリジナルのヘッダー画像にチェンジ！ブログの顔とも言えるヘッダー画像を変えるだけで、ブログの印象はグッと良くなりますよ！

説明を見ながらやれば簡単に設置できますので、ぜひトライしてみて下さいね。

まず、アメブロの管理画面のブログ管理左メニューから、「デザインの設定」をクリック。

様々なデザインテンプレートが並んでいますが、下の方の「他のカテゴリからブログデザインを探す」の中の「カスタム可能」をクリック。

「カスタム可能」デザインが表示されますので、この中からデザインを選びます。ヘッダー画像をオリジナルに変更する場合は、必ず「カスタム可能」デザインから選ぶ必要があります。現在のデザインが「カスタム可能」でない場合は、こちらからで選んで変更しましょう。

デザインの変更が完了したら、「デザインの設定」をクリックし、「適用中のデザイン」の下にある「CSSの編集」をクリック。

「ブログデザインヘッダ・背景用画像の追加」から、作成したアメブロヘッダー画像をアップロードします。「ファイルを選択」でパソコン内に保存された画像を選択し、右側の「アップロード」ボタンをクリックします。

すると、「アプロードされた画像」に作成したアメブロヘッダー画像が表示され、その下に「この画像のパス」としてURLが表示されます。

続いて、その下に表示されている「現在使用中のブログデザインCSS」の部分にコードを追加します。

すでにコードが入っていますので、このコードは変更したり削除しないように気を付けて下さいね。アメブロのデザインが崩れてしまいます！

CSSの編集画面の1番下までスクロールして、下記のコードをコピー＆ペーストで貼り付けて下さい。

/* ▼▼▼ここからヘッダー画像の設定▼▼▼*/
/* ヘッダー画像を設置する*/

.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(ヘッダー画像のURL);
}/ *ヘッダーの高さを設定する* /
.skin-bgHeader a {
height: 400px;
} /* ブログタイトルと説明文を消す* /
.skin-headerTitle { display: none; }/*
▲▲▲ここまでヘッダー画像の設定▲▲▲*/

赤字にした「ヘッダー画像のURL」部分に、先ほどアップロードした際に表示されたアメブロヘッダー画像のURL「この画像のパス」を貼り付けます。

「表示を確認する」をクリックするとプレビュー画面が開きますので、正しく設置ができているか確認しましょう。問題なければ「保存」ボタンをクリック。

自分のブログを確認して、ヘッダー画像が変わっていればOKです！

※キャッシュが残っていると前の画像が表示されてしまう場合があります。画像が変わらない時は、ブラウザーの更新ボタンをクリックして再度確認してみて下さい。

アメブロヘッダー

アメブロカスタマイズその1 ヘッダーメニューを簡単に作成する方法

まとめ

アメブロヘッダー画像を設置する方法をご紹介致しました。説明に沿って行えば、CSSがわからなくても簡単にオリジナルヘッダー画像に変更することができます。起業・副業でアメブロ集客を考えている方はぜひ試してみて下さいね。ブログを見た時に、どのようなブログなのかがパッとすぐわかるので、アメブロヘッダー画像の変更はおすすめです！

Follow me!

@yumekanaulife