アメブロのヘッダー画像を自分で設定する方法

パソコンが苦手な女性フリーランスの方に寄り添いたいWebデザイナー絢です。
アメブロのカスタマイズやホームページを制作しています。

前回、スマホアプリを使ったヘッダー画像の作り方をご紹介しました。

: Canvaを使ったアメブロのヘッダー画像の作り方

パソコンが苦手な女性フリーランスの方に寄り添いたいWebデザイナー絢です。アメブロのカスタマイズやホームページを制作しています。アメブロのカスタマイズのご依頼理由を伺うと、「まずブログの見た目を整え ...

続きを見る

今回は実際にアメブロにヘッダーを設定する方法をご紹介いたします。

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

事前準備

ヘッダー画像
ヘッダー画像の高さ（px）

を準備します。

アメブロヘッダーの設定画面を開きます

アメブロにログインしたら、ブログ管理をクリックします。

デザインの設定をクリックします。

下の「他のカテゴリからブログデザインを探す」にある「カスタム可能」をクリックします。

アメブロの記事の表示レイアウトを選択します

注意

すでにカスタマイズされている方は、レイアウトを変更しますと設定がリセットされますのでご注意ください。

アメブロのヘッダーを設定するには、「css編集用デザイン」を選択する必要があります。

「css編集用デザイン」はブログのトップページを3種類のレイアウトから選択できます。

記事一覧表示（最新のブログ記事の一覧が表示される）
トップ記事表示（最新の記事そのものが表示される）
タイル表示（最新のブログ記事の一覧が画像メインでタイル表示される）

この３つのレイアウトからお好みのものを選択します。
例として、トップ記事表示（下の赤枠の真ん中のもの）を選択します。

トップ記事表示レイアウトはさらに５パターンから選択できます。

２カラム・サイドメニュー左
２カラム・サイドメニュー右
３カラム・右ワイドメニュー
3カラム・左ワイドメニュー
３カラム・右メニュー

この５つのレイアウトからお好みのものを選択します。
例として、２カラム・サイドメニュー右（下の赤枠の左から2番目）を選択し、「適用する」ボタンをクリックします。

ヘッダー画像をアップロードします

次にヘッダー画像をアップロードします。

「cssの編集をする」ボタンをクリックします。

「ファイルを選択」ボタンをクリックして、準備しておいたヘッダー画像を選択し
「アップロード」ボタンをクリックします。

※画像のファイルサイズが1MBを超えてアップロードできない場合は、画像を圧縮する必要があります。

こちらのサイトで圧縮できます。
https://tinypng.com/

赤枠のところに、圧縮したいファイルをドラッグアンドドロップします。

「finished」になったら、「download」をクリックすると、ファイルがダウンロードされます。

「アップロードされた画像」の項目に、ヘッダー画像がアップロードされていることを確認します。

ヘッダー画像を設定します

次にヘッダー画像を設定します。

以下のコードをコピーします。

/* ヘッダー背景 */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(#);
background-size: 100%;
width: 1120px;
height: 400px;
margin: 0 auto;
}

/* ヘッダータイトル */
.skin-headerTitle {
display:none;
}

「現在使用中のブログデザインCSS」の枠の中を一番下までスクロールし、
先ほどコピーしたコードを貼り付けます。

アップロードしたヘッダー画像のURL（青枠）をコピーします。
先ほど貼り付けたコード中の「#」を消し、そこに貼り付けます。（赤枠）

※＃は貼り付ける場所の目印ですので、消してから貼り付けてください。

◇ヘッダー画像のURLを貼り付ける前

◇ヘッダー画像のURLを貼り付けた後

次にヘッダーの高さを設定します。
作成したヘッダー画像の高さを下の赤枠のところに入れてください。

※見本は400pxで作成したので、400になっています。
変更の必要がなければそのままでOKです。

ヘッダー画像の設定を確認し保存する

ヘッダー画像の設定ができたか確認します。
「表示を確認する」をクリックします。

設定されていることが確認できました。
※まだ、この段階では保存されていません。

cssの編集画面へ戻ります。

ヘッダー画像の設定を確定します。
「保存」ボタンをクリックして完了です。ブログを確認してください。