ヘッダー画像をヘッダー部の上下にはみ出すように表示する方法

アメブロカスタマイズのわざめーばです。

こんにちは。

今回は、CSS編集用デザインで、アメブロのヘッダー画像をヘッダー部の上下にはみ出すように表示するカスタマイズ方法をご紹介します。

例えば上の画像のように、背の高い一枚のヘッダー画像をアメーババーのすぐ下からコンテンツ部の背景にまで表示したいような場合に使える方法です。

こんな風にヘッダー画像を表示すると、高さや奥行きをうまく表現できそうな気がしますね。

ではやり方です。

ヘッダー画像をこのように表示したい場合、ユーザーCSSの末尾に次のように追加してください。

.skinFrame {
  background-image: url(ヘッダー画像のURL);
  background-repeat: no-repeat;
  background-position: center top;
}

赤文字部分には、この方法でヘッダー部に表示したい画像のURLを設定します。

また、画像の上下位置を調整したい場合は、緑文字topの部分を、10pxのように、ピクセル指定することで実現できます。

top0pxと同じ意味で、値を小さくすると上へ、大きくすると下へヘッダー画像の表示位置が移動します。

また、ブログタイトル表示やブログ説明文表示など、本来のヘッダー部分の高さ調整が必要な場合は、さらに、ユーザーCSSの末尾に次のように追加してください。

.skinHeaderArea {
  height: ???px; /* 高さ指定 */
}

もちろん、???の部分には適切な数値を設定します。

なお、上の画像では、メッセージボード、記事、サイドメニューが半透明になって背景画像が透けて見えるようになっていますが、こちらのやり方については、また別途詳しくご紹介したいと思いますが、上記画像の場合の設定のみ書いておきますので、必要でしたらご利用下さい。

.skinMessageBoard {
  background-color: transparent;
  background-image: url("//wazameba.ameblo-customize.com/wp-content/uploads/2017/05/8e75ee49395430bed6e4f1ee63d826ae_transparent_fff_6.png");
}
.skinArticle {
  background-color: transparent;
  background-image: url("//wazameba.ameblo-customize.com/wp-content/uploads/2017/05/8e75ee49395430bed6e4f1ee63d826ae_transparent_fff_6.png");
}
.skinMenu {
  background-color: transparent;
  background-image: url("//wazameba.ameblo-customize.com/wp-content/uploads/2017/05/4df552043472198266a361bd9c64ce89_transparent_000_1.png");
}
.skinMenuBody {
  background-color: transparent;
  background-image: url("//wazameba.ameblo-customize.com/wp-content/uploads/2017/05/8e75ee49395430bed6e4f1ee63d826ae_transparent_fff_6.png");
}

以上、アメブロのヘッダー画像をヘッダー部の上下にはみ出すように表示するカスタマイズ方法をご紹介しました。

よかったら参考になさって下さい。

関連記事

アメブロカスタマイズ用デザイン『CSS編集用デザイン』
CSSの編集によるカスタマイズ
アメブロの画像アップロード方法と画像のURL取得方法

アメブロカスタマイズで人が集まるブログ作り