アメブロの新CSS編集用デザインで、ヘッダー部にヘッダー画像を設置・表示するカスタマイズ方法をご紹介します。
ヘッダー画像を設置すると、ブログの雰囲気を一気に華やかにしたり、伝えたいことを一瞬で読み手に知らせることができるようにするのに役立ちますのでお勧めです。
目次
ヘッダー画像を準備する
まずは、アメブロに設置するヘッダー画像を準備する必要があります。
ヘッダー画像は、好みや予算に応じて、
- プロに依頼して作成してもらう
- 画像編集ソフトや画像編集サイトを使って自作する
- 有料・無料で配布されている既成のヘッダー画像を流用する
などの方法で入手できます。
管理人は、こちらの無料のデザイン作成サイトをよく利用します。
日本の会社が日本人向けに作っているので、個人的には海外製よりも使いやすいように思います。
アメブロにアップロードできる画像形式はjpg、png、gifのみですので、ヘッダー画像の保存形式もこれらの何れかにする必要があります。
通常はjpgで良いと思いますが、例えば透過が必要な場合はpng、アニメーションが必要な場合はgifなど、必要に応じて画像形式を決定して下さい。
ヘッダー画像の横幅や高さは自由ですが、新CSS編集用デザインのコンテンツ幅に合わせるなら、横幅は、1120ピクセルとなります。
高さは本当に自由ですが、アメブロはヘッダー画像がすべてのページに表示されるため、あまり大きすぎると読み手にとって邪魔に感じることが多くなりますので注意が必要です。
画像をアップロードして画像のURLを取得する
ヘッダー画像の準備ができたら、アメブロにアップロードして画像のURLを取得します。
画像のURLは後ほど使いますので、メモ帳に貼り付けておくなど、分かるようにしておいて下さい。
CSSにコードを追加する
次は、アメブロのアップロードした画像をヘッダー部に表示するために、CSSを編集します。
以下のようなコードをCSSの末尾に追加して下さい。
/************************************************
新CSS：ヘッダー画像を表示する
************************************************/
/* ヘッダーの背景に画像を設定する */
.skin-bgHeader {
background: no-repeat scroll center;
background-image: url("画像のURL");
}
/* ヘッダーの高さを設定する */
.skin-bgHeader, .skin-bgHeader a {
height: 400px;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
display: none;
}これが、基本コードとなります。
CSSに追加したコードを編集する
CSSに基本コードを追加したら、アップロードした画像に合わせて修正します。
まず「画像のURL」と書いてある箇所を、アメブロにアップロードした画像のURLに書き換えます。
また、画像の高さ(仮に400pxと記述してあります)には、ヘッダー画像の高さ（ピクセル数）を設定して下さい。
ヘッダー画像の表示のしかたに応じてコードを追加
通常は、上記の基本コードでヘッダー画像を表示できると思いますが、希望するヘッダー画像の表示のしかたによっては、以下のようなコードを追加する必要があります。
画像の横幅がコンテンツ幅よりも広い場合
もし、画像の横幅がコンテンツ幅(1120px)よりも広い場合、基本コードだけではヘッダー画像全体がトップページへのリンクになりませんので、以下のようなコードを追加します。
/* 画像の横幅がコンテンツ幅よりも広い場合 */
.skin-bgHeader > div {
width: 1200px;
}画像の横幅(仮に1200pxと記述してあります)には、ヘッダー画像の横幅（ピクセル数）を設定して下さい。
ヘッダー画像を常に画面幅いっぱいに表示する場合
もし、ヘッダー画像を常に画面幅いっぱいに表示したい場合は、基本コードに加えて以下のようなコードを追加します。
/* ヘッダー画像を常に画面幅いっぱいに表示 */
.skin-bgHeader {
background-size: cover;
}
.skin-bgHeader > div {
width: 100%;
}この場合、ヘッダー画像の横方向は常に画面幅いっぱいまで(小さければ拡大されて)表示されますが、高さ方向は中央部分が切り取られて表示されます。
画面幅いっぱいで高さ方向も画像全体を表示する場合
横方向を画面幅いっぱいに表示しながら、高さ方向(縦方向)も画像全体を表示したい場合は、基本コードに加えて以下のようなコードを追加します。
/* 画面幅いっぱいで高さ方向も画像全体を表示 */
.skin-bgHeader {
position: relative;
height: 0;
padding-top: calc( 400 / 1200 * 100% );
background-size: cover;
}
.skin-bgHeader > div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.skin-bgHeader a {
height: 100%;
}縦横比には、ヘッダー画像の縦横比を％で設定します。
上記コードは、縦400pxが横1200pxという画像の場合に縦横比(％)を計算する設定ですので、400の部分に高さ、1200の部分に横幅のピクセル数(数字のみ)を設定すれば大丈夫です。
画面サイズに合わせて画面全体に大きく表示する場合
もし、画面サイズに合わせて画面全体にヘッダー画像を大きく表示（いわゆる「ヒーローヘッダー」に）したい場合は、基本コードに加えて以下のようなコードを追加します。
/* 画面サイズに合わせて大きく表示 */
.skin-bgHeader {
position: relative;
height: calc( 100vh - 49px - 91px ); /* ヘッダー画像を表示する高さ */
background-size: cover;
}
.skin-bgHeader > div {
width: 100%;
height: 100%;
}
.skin-bgHeader a {
height: 100%;
}ヘッダー画像を表示する高さは、画面の高さから、アメブロに共通の上部のメニューバー(49px)と、画面下に表示される広告(91px)を引いたサイズを指定しています。
なので、広告を非表示にしている場合は- 91pxは不要です。
また、ヘッダー下にグローバルナビを表示していて、ナビも同時に表示したい場合は、グローバルナビの高さ分も引くとうまくいくと思います。
保存して確認
一通りCSSの編集ができたら、編集内容を保存して確認して下さい。
うまくヘッダー画像が表示できていれば完了です。
トップページだけヘッダー画像を変える方法
アメブロではあまり一般的ではありませんが、WordPressで制作されたサイトなどを見ていると、トップページのみ大きいヘッダー画像(メインビジュアル)を表示して、他のページは控えめなヘッダーとなっていることがよくあります。
もし、アメブロでこのようにしたい場合、トップページにメッセージボードを表示すれば、メッセージボードの有無でトップページを識別できます。
これによって、トップページだけ別のヘッダー画像を表示したり、ヘッダー画像の表示サイズを変えたりすることができます。
例えば、新CSS編集用デザインで、トップページ専用のヘッダー画像を画面いっぱいに表示したい場合、上記の基本コードに加えて以下のようなコードを追加します。
/* トップページ専用の設定 */
.skin-page:has(.skin-message) {
/* トップページ用のヘッダー画像 */
.skin-bgHeader {
background-image: url("画像のURL");
}
/* 画面サイズに合わせて大きく表示 */
.skin-bgHeader {
position: relative;
height: calc( 100vh - 49px - 91px );
background-size: cover;
}
.skin-bgHeader > div {
width: 100%;
height: 100%;
}
.skin-bgHeader a {
height: 100%;
}
}まとめ
以上、新CSS編集用デザインのアメブロのヘッダー部にヘッダー画像を設置・表示するカスタマイズ方法を紹介しました。
まとめると、
- 画像を準備する
- 準備した画像をアップロードする
- CSSにコードをコピペする
- コピペしたコードに画像の情報を反映する
- 必要に応じてコードを追加する
- 保存して確認する
という手順になります。
よかったら参考にして下さい。
