【コピペOK◎】アメブロにお洒落なヘッダー画像を設定する方法！画像サイズについても解説します。

右上の『デザインを作成』をクリックしましょう。

下部にある『カスタムサイズ』をクリックして、『幅：1120px』『 高さ：400』を入力して下さい。（縦はお好みに合わせてご変更下さい。）

指定したサイズの編集ページが開けたら、ヘッダー画像を作成していきましょう。

一番簡単な作り方はテンプレートを使うことです🙌

左サイドバーに『デザイン』というものがあるので、こちらをクリックします。
検索バーが表示されるので『ヘッダー』と入力しましょう。

お洒落なテンプレートが多数出てくるので、１から作成することが難しい方はこれらテンプレートを活用すると良いでしょう◎

▼『テンプレートって何？』という方は、下記記事をご覧下さい。

あわせて読みたい

Canvaでは何が作れる？便利なテンプレート例をご紹介します！ こんにちは！Chico（@chico_webdesign）です＊今回は、Canvaで作れるものについてご紹介します！便利なテンプレート例もご紹介しますので、是非最後までチェックしてみ…

前提として、アメブロのヘッダー画像を設定できるのは「カスタム可能」デザインのみになります。他の既存デザインテンプレートでは使用することができません。

なのでまずは、テンプレートを『CSS編集用デザイン』に変更しましょう。

① 管理画面の左サイドバー『デザインの設定』をクリックしましょう。

② ページ下部の『カスタム可能』をクリックします。

③ ページ下部の『CSS編集用デザイン』をクリックします。

『CSS編集用デザイン』が４つ表示されますが、今回は上段３列に並んでいる真ん中のものをご選択ください。

④ レイアウトのオススメは、左から２番目の『２カラム・右メニュー』です🙌
『２カラム・右メニュー』を選択して、『適用する』をクリックしましょう。

こちらでテンプレートの設定は完了です。

① 上記『２カラム・右メニュー』を選択して『適用する』をクリックすると、下記画像のように『CSSの編集をする』という項目が表示されます。こちらをクリックしましょう。

②『ファイルを選択』をクリックし、作成したヘッダー画像を選択して『アップロード』をクリックします。

アップロードが完了すると、『この画像のパス』という項目の部分にURLが表示されます。

『この画像のパス』URLは、あとで必要になりますのでコピーしてメモ帳等に貼り付けておきましょう。

③『現在使用中のブログデザインCSS』という箇所を、一番下までスクロールします。

④ 一番下までスクロールできたら、下記コードを追加しましょう。

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(画像のパスURL)』という箇所に、上記②でコピーしておいたURLを貼り付けます。

() の中に画像URLを入れて下さい。() は消さないようにご注意ください！

作成したヘッダー画像の高さが400pxの場合は、そのままコピペでOKです！
400px以外で作成した場合は、数値を変更して下さい。

⑥ 全ての設定が完了したら『表示を確認する』ボタンを押して、プレビュー画面にて正しくヘッダー画像が反映されているのか確認しましょう。

問題がなければ『保存』ボタンをクリック。

これでヘッダー画像の設置は完了となります！

Chico

設定は以上となります！
ヘッダー画像の設置お疲れ様でした＊