え？アメブロのヘッダーがこんな簡単に作れるの？画像サイズや設置方法

今日は、アメブロのヘッダー画像について、私が最近経験したちょっとした冒険をお話ししたいと思います。

ブログを始めてからずっと、「プロっぽいヘッダー画像」に憧れていたんです。

でも、「難しそう」「お金かかりそう」って思って、ずっと後回しにしていました。

ところがある日、思い切って挑戦してみたら…割と簡単にできてびっくりです！

アメブロのヘッダーの変更まとめ
- アメブロのヘッダー画像サイズは？
アメブロのヘッダー画像の設定方法
やってみれば意外と簡単！

アメブロのヘッダーの変更まとめ

アメブロのヘッダー画像を変えると、こうなりました。

今回のポイントを簡単にまとめます。

・アメブロヘッダーの基本サイズは意外と簡単
・失敗しても大丈夫、すぐに元に戻せる
・ヘッダー作りで新しい趣味が見つかるかも

では、詳しく見ていきましょう！

アメブロのヘッダー画像サイズは？

まず、アメブロヘッダーのサイズ。

これが意外と簡単だったんです。

基本は横1120ピクセル、縦400ピクセル。

最初は「ピクセルって何？」って感じでしたが、調べてみたら画像の大きさを表す単位だってわかりました。

そして、無料ツールの存在を知ったんです。

「Canva」というサイトなんですが、これがすごく使いやすい！

最初は戸惑いましたが、慣れてくると楽しくなってきて。

写真を選んで、文字を入れて…あっという間に素敵なヘッダーができあがったんです。

「よーし、これで完成！」と思い、さっそくアメブロに反映させてみようかなと思ったんですが、無料のテンプレートで好きなのがなかったので、PHOTHOSHOPで作ることに…

最初は「ヘッダー画像がうまくいかなかったらどうしよう」って不安でした。

でも、アメブロの設定を見てみたら、簡単に元に戻せることがわかったんです。

これで安心して挑戦できました。

アメブロのヘッダー画像の設定方法

アメブロのヘッダー画像を変更するには、指定されたデザインテーマから選ぶ必要があります。

まず、左のメニューから「デザインの設定」を選んで、下の方にある「カスタム可能」をクリックしましょう。

すると、以下のように「CSS編集用デザイン」があるので、そこから、好きなカラムのデザインを選びます。

そうしたら、参照の所から、作っておいたヘッダー画像を選び、アップロードをクリックします。

画像がアップロードされたら、このコードを使うので、後で何とでもなりますが、どこかにコードをコピペしておくのをおすすめします。

ここまで終わったら、画面の一番下までスクロールして、以下のコードをコピペしてください。

/* ▼追加コード▼ */
/* ヘッダー画像を設定 */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(ヘッダー画像のURL);
}
/* ヘッダーの高さを設定 */
.skin-bgHeader, .skin-bgHeader a {
  height: 400px;
}
/* ブログタイトルと説明文を非表示 */
.skin-headerTitle {
display: none;
}

引用元：ユリカデザインコラム様

URLの後ろの（）部分に、先ほどの画像のコードに入れ替えて、画像の高さのピクセル(おすすめサイズの400PXなど)にしたら、保存をクリックして完了です。