アメブロヘッダーをオリジナル画像に変える5つのステップ！簡単コピペでOK！

実は2020年4月から私もアメブロをしっかりと始めたのですが、最初オリジナル画像に変える方法で迷ったので、同じような悩みを持っている方のお役に立てたら嬉しいです。

アメブロのヘッダーをオリジナル画像に変える5つのステップ

アメブロのヘッダーをオリジナル画像に変える6つのステップをご紹介します。

ステップ1：オリジナルヘッダーに使う画像を準備する

まずはオリジナルヘッダーに使う画像を準備します。

私の推奨サイズは「1120×400」です。

私は以下のアプリでスマホで作っています。
・Canva
・iBisPaint

PCであれば以下のような無料ソフトで作れます。
・Gimp

いずれにせよ今は無料で作れるアプリが沢山あるので、好きな画像を「1120×400」サイズで作りましょう。

 

ステップ2：アメブロのデザインにCSS対応を選ぶ

ステップ2ではアメブロのデザインにCSS対応の物を選びます。

まずブログ管理のデザインの設定を選択します。

一番下までスクロールして「カスタム可能」というカテゴリをクリックしてください。

スクロールしていくと下の方に「CSS編集用デザイン」というものが何種類かあるので好きなデザインを選んでください。

クリックすると、以下のように「ブログデザインの表示確認・レイアウト変更」が出来るので好きなデザインを選んでください。

私はシンプルな「2カラム・メニュー右」を選んでいますが、ここはカテゴリーや新着記事を目立たせたい人は3カラムを選ぶのもありかと思います。

ステップ2はこれで完了です。

ステップ3：オリジナルヘッダー画像をアップロードする

ステップ3では、ステップ1で作成したオリジナルヘッダー画像をアメブロにアップロードします。

アップロードはボタン1つで出来るのでとっても簡単です！

まずはまた管理トップから「デザインの変更」に移動します。

そこで適用中のデザイン：CSS編集用デザインの下の［CSSの編集］というリンクがあるのでそちらをクリックしてください。

そうすると以下のような画面になりますので、以下の2つの手順でオリジナルヘッダー画像をアップロードしてください。

ステップ4：アメブロのCSSを編集する

ステップ4は、ステップ3で追加した画像をアメブロのCSSの中に組み込みます。

また「デザインの変更」から［CSSの編集］に入ります。

そして下の方にスクロールしていくとこんな画面「現在使用中のブログデザインCSS」ってのが出てきます。

その一番下に以下のソースコードを追加します。

/* ヘッダー画像を設定する */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(★この部分にオリジナル画像のアドレスを追加★);
}
/* ヘッダーの高さを設定する */
.skin-bgHeader [amb-layout="headerInner"]>a,
.skin-bgHeader [data-uranus-layout="headerInner"]>a {
height: 400px;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
display: none;
}

そしてコードを一番下に追加します。

私の推奨で高さは400pxになっていますが、自由に数字を変えてよいです。

大きくなればなるほど縦に長くなります。

ステップ5：アメブロのデザインを確認して保存する

最後ステップ5は実際のアメブロの表示を確認して、保存します。

アメブロのヘッダーをオリジナル画像に変える5つのステップまとめ

アメブロのヘッダーをオリジナル画像に変える5つのステップをまとめます。

特に集客でアメブロを使う場合はブログデザインも重要になりますので、是非頑張ってみて下さい。