アメブロ

集客力アップ!アメブロをオリジナルのヘッダーにする方法

芸能人の方のAmebaブログなどを見ると、オリジナルのおしゃれなヘッダーにされている方を見かけますよね。個人の方でもお店のページをPRするのに、自分の写真などが入ったオリジナルのヘッダーにしたいという方は多いと思います。実はアメブロのヘッダーは自分で簡単に変更することができます。

この記事ではアメブロで自分だけのオリジナルヘッダーを設定する方法を、かんたんな方法と少し難しいけれどこだわりたい方向けの、二種類のヘッダーの入れ方を紹介します。アメブロで使用したいヘッダーの画像が用意できたら、ぜひ挑戦してみてください!

アメブロのブログデザインの一覧を表示する

まずは自分のアメブロにログインして、ブログ管理のページを開きましょう。

デザインの変更ページを開きます。

たくさんきれい、かわいいデザインが並んでいますが、こうしたデザインの多くは残念ながらオリジナルのヘッダーを設置することができません。アメブロでオリジナルのヘッダーを設置する場合は、カテゴリから探す→カスタム可能を選択してください。

カスタマイズ可能なデザイン

自分でヘッダーなどのデザインをカスタマイズすることができるデザインの一覧が表示されます。

デザインの選び方

表示されたものであれば、どのデザインであってもオリジナルのヘッダーへの変更が可能です。ただしここで選ぶデザインが、CSS編集用デザインかそうでないかによって、こだわって変更できることが変わります。

それぞれアメブロのデザインには次のような特徴があります。

その他のデザイン
  • 簡単にヘッダー・背景が変更できる!
  • ヘッダーと背景以外は変更ができない…
  • ヘッダーの大きさは幅980px、高さ0~300pxという制限がある
CSS編集用デザイン
  • ちょっと難しい
  • ヘッダー・背景以外にも、サイドバーやグローバルメニューが設置できるようになる!
  • 自由にヘッダーの大きさを設定できる

アメブロにはデザインを簡単にカスタマイズする機能があります。とりあえずかんたんにヘッダーだけを設置したいという方であれば、CSS編集用デザイン以外を選べばOKです!

ちょっと難しくてもブログのデザインに挑戦してみたいという方は、CSS編集用デザインを選び、ブログデザインを適用させましょう。

ヘッダーをオリジナルデザインに変更する

CSS編集用デザイン以外とCSS編集用デザインでは、アメブロのヘッダーをオリジナルデザインに変更する方法が違います。ここからは2通りの方法でアメブロのヘッダーを変更する方法をご紹介します。

CSS編集用デザイン以外でヘッダーを変更する方法

CSS編集用デザイン以外を選択した場合、このような画面が表示されます。

アメブロのデザイン変更画面

ここで「デザインを簡単カスタマイズ」をクリックしましょう。

アメブロのデザイン変更ページ

「デザインの変更」のページから適用中のデザイン→カスタマイズをクリックしてもOKです。

カスタマイズの画面を開くと、このような画面が表示されます。

アメブロの簡単カスタマイズの画面

一番左のヘッダーから「オリジナル画像を使う」というところを押せば、自分の好きな画像をアメブロにアップロードすることができ、ヘッダーに設定することができます!

変更ができたら保存を押しましょう。

CSS編集用デザイン以外の場合のまとめ
  1. アメブロで使用したいヘッダーの画像を用意する。
  2. ブログのデザインをカスタマイズ可能なデザインに変更する。
  3. ヘッダーをアップロードし、デザインをカスタマイズする。

簡単カスタマイズの場合、これだけでヘッダーを変更することができます!かんたんでしょう?

CSS編集用デザインでヘッダーを変更する方法

CSS編集用デザインを選択した場合、このような画面が表示されます。

CSS編集用デザインを適用したときのアメブロのぺージ

ここで「CSSの編集をする」をクリックしましょう。

アメブロのデザイン変更ページ

「デザインの変更」のページから適用中のデザイン→CSSの編集をクリックしてもOKです。

するとこのような画面が表示されます。

オリジナルヘッダーのアップロード

ブログデザインヘッダ・背景用画像の追加というところから、自分のヘッダーをアップロードしましょう。アップロードに成功すると、次のような画面になります。

自分の変えたいヘッダーと、その下に「この画像のパス」という文字が表示されました。

パスとはこのヘッダーの画像の住所のようなものです。ここにヘッダーに使用するための画像があるから、この場所の画像を表示させてほしいというお願いをするために使用します。

ブログデザインCSSの編集

CSSはウェブページの見た目を整えるための指示書です。これから「ヘッダーとしてこの画像を使用してね」という指示を、ブログに教えてあげるための作業をします。

現在使用中のブログデザインCSSという項目を、下にスクロールしていくと、(2)ヘッダーエリアのスタイルと書かれている部分が見つかります。

修正前

/*
*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*

(2)ヘッダーエリアのスタイル

*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*
*/
/* (2-1) ヘッダー背景
——————————————–*/
/* ヘッダー背景 */
.skin-bgHeader {
background-color: #ffffff;
}

これを次のように書き換えます。

修正後

/*
*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*

(2)ヘッダーエリアのスタイル

*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*
*/
/* (2-1) ヘッダー背景
——————————————–*/
/* ヘッダー背景 */
.skin-bgHeader {
background-image: url(ここを画像のパスに書き換える);

height: 400px;
}

background-image:url();の部分に、先ほどアップロードした「この画像のパス」と書かれている文字をコピーして貼り付けます。「この画像を使用してね」という指示を、わかりやすく出してあげます。

height:400pxの部分は、ヘッダー部分の高さを指定しています。自分の設定したいヘッダーの大きさに変更してください。

保存を押せば完成です!お疲れさまでした!

CSS編集用デザインの場合のまとめ
  1. アメブロで使用したいヘッダーの画像を用意する。
  2. ブログのデザインをCSS編集用デザインに変更する。
  3. ヘッダーをアップロードし、cssを書き換える。

ヘッダーが表示されない、反映されないとき

せっかく設定したヘッダーが表示されない、反映されない、変わらないという場合は、キャッシュ(インターネット上の一時ファイル)がお使いのブラウザ(InternetExplorerやChromeなど、ウェブページを閲覧するためのソフト)に保存されている場合があります。

これは一度閲覧したウェブページをもう一度表示するときに、すばやく表示するための機能ですが、何かウェブページを変更した直後には、その変更がすぐに反映されないという面があります。一度キャッシュの削除をお試しください。

まとめ

アメブロのヘッダーは自分でも簡単に変更できます。難しい!と思うのであれば外注してしまうのも選択肢のひとつではありますが、案外挑戦してみれば簡単にできますよ!

一度挑戦してみて、もし難しいようであればTwitter等でもご質問を受け付けております。お気軽にご相談ください。