サイトのヘッダーに画像があると印象的になりますよね。 今日はヘッダー画像の入れ方についてご紹介します。

外観（ヘッダー）をカスタマイズする

サイトのサイズを知る

まずサイトの横幅サイズを調べましょう。 開く「外観」「カスタマイズ」「全体レイアウト」 headerキャプチャ画面

横幅にあったヘッダー画像を準備する

私の利用している素材サイトは無料イラストなら【イラストAC】です。
ダウンロードするのであればIllustratorやInkScapeなどで編集できる、「eps・ai」形式のファイルをおすすめします。好きなサイズに加工できますし、イラストの使いたい部分だけを選んで使うこともできるので。
beforeこれを ヘッダー画像 afterこうしたり（サイズ：1116×191） ヘッダー画像

ヘッダー画像を追加する

開く「外観」「カスタマイズ」「背景・タイトル・ロゴ画像」
  1. ヘッダー背景画像の「画像を選択」をクリックします。
    2. headerキャプチャ画面
  2. 画像の保存場所を指定し追加します。
  3. 画像の配置方法はとりあえずこんな感じで設定します。
    4. headerキャプチャ画面

ヘッダーのパディングを調整する

  1. 上のままではヘッダー画像の上下が切れていると思いますので、パディングで調整します。 カスタマイズ画面を上の方までスクロールし「＜」をクリックします。
    2. headerキャプチャ画面
  2. 「ヘッダー/フッター」を開きます。 上下のパディングサイズを右側のプレビューを確認しながら画像の縦サイズに合わせて調整します。
    3. headerキャプチャ画面
  3. 完成！（スマホでも確認しておきましょう）
    4. headerキャプチャ画面
[ads]

あとがき

うまくいきましたでしょうか？ Luxeritas(ルクセリタス)なら誰でも簡単にヘッダーに画像が追加できますので、ぜひやってみてくださいね！ こちらもどうぞ

関連グローバルナビをカスタマイズする ヘッダーナビ（グローバルナビ）をカスタマイズする

関連帯状メニューをカスタマイズする 帯状メニューをプチカスタマイズする