目次

【アメブロカスタマイズ】ヘッダー画像を設置する方法

アメブロのCSS編集用デザインには、ブログの看板とも言えるヘッダー画像を簡単に設置する機能が用意されていません。

ですが、オリジナルのヘッダー画像を作って設置・表示すると、ブログの雰囲気を一気に変えることができますし、何を伝えたいブログなのかを一瞬で読み手に知らせることも可能ですので、ブログで扱う内容にもよりますが、設置を検討する価値は十分にあるのではないでしょうか。

そこで当記事では、新CSS編集用デザイン適用済みのアメブロにヘッダー画像を設置する方法をご紹介したいと思います。

では、以下、アメブロにヘッダー画像を設置して表示するまでのカスタマイズ手順をご説明します。

当記事の手順は、Windows 10とGoogle Chromeを使った場合です。環境が異なる場合は表示や操作が異なる可能性もありますので、ご自身の環境に合わせて読み替えて下さい。

ヘッダー画像を準備する

まずは、アメブロに設置するヘッダー画像を準備しましょう。

ヘッダー画像は、

  • プロに依頼して作成してもらう
  • 画像編集ソフトや画像編集サイトを使って自作する
  • 有料・無料で配布されている既成のヘッダー画像を流用する

などの方法で入手できますが、どのようにするかは好みや予算に応じて決定することになると思います。

ヘッダー画像が(使用する素材も含めて完全な)オリジナルでない場合は、著作権や肖像権などの権利の有無をしっかり確認しておくことが重要です。これらの権利の侵害で損害賠償を請求されるなどということにならないよう、十分にご注意下さい。

なお、アメブロにアップロードできる画像形式は、jpgpnggifのみですので、作成する場合は、これらの画像形式の何れかを選んで下さい。

通常はjpgで良いと思いますが、例えば透過が必要な場合はpng、アニメーションが必要な場合はgifなどが適していると思います。

また、ヘッダー画像の横幅や高さは自由ですが、アメブロをカスタマイズするベースとなる新CSS編集用デザインのコンテンツ領域の横幅に合わせる場合は、横幅=1120ピクセルにするとピッタリ納まります。

最近は、ヘッダー画像を画面幅いっぱいに表示することも多くなりましたので、そういう場合は、もう少し大きめに、例えば最近のモニターに多い横幅=1920ピクセルなどにすると、画質が荒れずきれいに表示できると思います。

ヘッダー画像をアップロードしてURLを取得する

ヘッダー画像の用意ができたら、次は、その画像をアメブロに表示できるようにアップロードして、アップロードした画像のURLを取得します。

画像のアップロードと画像のURLの取得方法についてはこちらの記事で説明していますので、参考にして下さい。

取得した画像のURLは、後ほど使いますので、メモ帳などに貼り付けて分かるようにしておいて下さい。

ヘッダー画像をアメブロに設置・表示する

ヘッダー画像をアップロードして画像の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に変更してください。

なお、ヘッダー画像のサイズは、横1120ピクセル×縦400ピクセルを想定していますが、ヘッダー画像の高さが400ピクセルでない場合は、コード中の「400」の部分を適切に修正して下さい。

通常、これでヘッダー画像が表示されますが、うまくできたでしょうか?

文字を消したくない場合は

前項でご紹介したコードは、画像に文字も書かれていることを想定していますので、もともと表示されていた「ブログタイトル」や「説明文」が非表示になります。

もし、これらをそのまま残したい場合は、コード中の「/* ブログタイトルと説明文を非表示にする */」から下を削除すればOKです。

ヘッダー画像の背景色を指定したい場合

また、ヘッダー画像の背景にあたる部分の色も変更できます。

ヘッダー画像の背景色は、ヘッダー画像の透過部分、ヘッダー画像両側の余白部分、ヘッダー画像上下の余白部分などが塗りつぶされる色です。

例えば、下の画像の赤枠で囲った部分が「背景色」として薄いグレーで塗りつぶされています。

もし、このように背景色も指定したい場合は、以下のようなコードもCSSに追加して下さい。

/* ヘッダーの背景色を指定する */
.skin-bgHeader {
  background-color: 【背景色】;
}

「【背景色】」の部分に設定する値は、Webの色コードで「#」と16進数6桁(または3桁)で書きます。

こちらのサイト様などが参考になると思います。

ヘッダー画像の横幅が1120ピクセルでない場合

また、ヘッダー画像の横幅が新CSS編集用デザインのコンテンツ幅(1120ピクセル)と異なる場合、トップページへのリンクとなる範囲がヘッダー画像の幅と合わなくなってしまいます。

その場合は、以下のように横幅を指定するコードをCSSに追加することで、トップページへのリンクの範囲をヘッダー画像の横幅に合わせることができます。

/* ヘッダーの横幅を指定する */
.skin-bgHeader>div {
  width: 【ヘッダーの横幅】;
}

「【ヘッダー画像の横幅】」は、トップページへのリンクとしたい幅をピクセル(px)数で設定すると良いでしょう。

なお、例えば画面幅いっぱいまでトップページへのリンクの範囲を広げたい場合などは、固定のピクセル数ではなく、「100%」のようにパーセント(%)で指定することも可能です。

まとめ

以上、アメブロにヘッダー画像を設置・表示するカスタマイズ方法をご紹介しました。

ひと目でブログの内容が伝わりやすくなるヘッダー画像の設置は、フォロワー獲得の手段としても非常に効果的な方法の一つだと思いますので、よかったらチャレンジしてみてもらえればと思います。