Astra無料版で自作ヘッダーを画面幅ピッタリに設定する簡単方法

Astra無料テーマを使って、自作の横長ヘッダー画像をウィンドウ幅ぴったりに設定できたので
その方法を記録しておきます。

やりたかったこと

自作した画像をブログサイトのヘッダー横いっぱいに設定しようと思いました。
外観→ヘッダー→サイトタイトルとロゴから用意した画像を設定しましたが
小さく設定され周りは空白になってしまいました。

Astra無料版で自作ヘッダーが小さくなる理由

• 無料版は「ロゴ枠」に入れると自動で縮小される仕様
• 背景画像をCSSで設定しても、Astraの余白構造や縦横比の制約で思い通りにならない

PC画面幅ピッタリにする手順

①サイトタイトルとロゴを配置

外観→ヘッダーを開き
画像を参考に「サイトタイトルとロゴ」を中央に配置します。

➁自前のヘッダー画像をCSSで背景に設定する

外観→追加CSSに以下のコードを追記してください。

.ast-primary-header-bar {
  width: 100%;
  aspect-ratio: 1600 / 360; /* 用意した画像のサイズ */
  background-image: url(https://example.com/your-header.png);
  background-size: 100% auto !important;
  background-position: top center !important;
  background-repeat: no-repeat;
  padding: 0 !important;
  margin: 0 !important;
	min-height: 0px !important;
}

background-imageは使用する画像のリンクを設定してください。

画像のアップロード方法やリンクの確認方法はこちらの記事で紹介しています。

👉初心者向け！WordPressで画像や動画をアップロードして使う方法

まとめ

これで自分で用意したヘッダー画像をサイトのヘッダーとして設定できました。
この備忘録が誰かの役に立てれば幸いです。