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

ブログで稼ぐ
アメブロのヘッダーをオリジナル画像に変えたい!
そんなあなたにアメブロのヘッダーを簡単にオリジナル画像に変更する方法をご紹介します。

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

ゆめだるま
ゆめだるま

見ながらやればとても簡単に出来るよ!

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

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

ゆめだるま
ゆめだるま

順番にやっていけば簡単に出来るからね~。

①オリジナルヘッダーに使う画像を準備する
②アメブロのデザインにCSS対応を選ぶ
③オリジナルヘッダー画像をアップロードする
④アメブロのCSSを編集する
⑤アメブロのデザインを確認して保存する
では順番に説明していきます!

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

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

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

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

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

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

ゆめだるま
ゆめだるま

私のディズニーオタクアメブロのヘッダーはこんな感じ。iBisPaintで作ったよ~!

 

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

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

ゆめだるま
ゆめだるま

画像の通りに進めば大丈夫です。操作はPCからやってくださいね!

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


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

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

ゆめだるま
ゆめだるま

私のブログは左から2つ目の1記事がドーンと表示されるやつだよ~

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

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

ゆめだるま
ゆめだるま

自分のブログにあったデザインを選んで「適用する」ボタンを押してね~!

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

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

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

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

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


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

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

①「ファイルを選択」:オリジナルヘッダー画像を選択
②「アップロード」
ファイルはgif、jpg、pngのみで5枚(各1MB以内)までアップロード可能なので大きすぎると登録出来ないのでサイズに注意
ゆめだるま
ゆめだるま

簡単に出来るよ~!

ステップ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;
}
★この部分にオリジナル画像のアドレスを追加★のところにはステップ3で追加した”この画像のパス”が入るので自分で編集してください!
ゆめだるま
ゆめだるま

自分のオリジナル画像のURLにしてね!

赤く囲ってある部分をコピーして差し替え

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

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

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

ゆめだるま
ゆめだるま

あまり大きすぎるのも記事が見えなくなるのでNGです!

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

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

ゆめだるま
ゆめだるま

保存する前にかならずまずは「表示を確認」してね!CSSミスするとページの表示が崩れる場合もあるよ!崩れてたら編集前の状態に戻せるから安心してね!

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

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

①オリジナルヘッダーに使う画像を準備する
②アメブロのデザインにCSS対応を選ぶ
③オリジナルヘッダー画像をアップロードする
④アメブロのCSSを編集する
⑤アメブロのデザインを確認して保存する
④だけ少しハードル高いですが、そこだけ注意すれば比較的簡単に変更可能ですので是非トライしてみて下さい。

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

ゆめだるま
ゆめだるま

あなたのブログが素敵なブログになることを楽しみにしています!もし何か質問等あればTwitterのDMからお願いします(@Yumefab_2016)

この記事を書いた人
ゆめだるま

節約してお金を貯めて投資で増やすのが得意なフルタイムワーママ。貯めたお金で国内株式とFX運用中。ズボラほったらかし投資で1000万円以上の含み益を得ています。

ブログや投資で稼ぐためのノウハウ公開中。

\是非フォローしてね!/

ゆめだるまをフォローする
ブログで稼ぐ
スポンサーリンク
\ シェアしてね! /
ゆめだるまをフォローする
ゆめだるまねー
タイトルとURLをコピーしました