テーマLuxeritas(ルクセリタス)でヘッダーに画像を入れる方法

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

外観(ヘッダー)をカスタマイズする

サイトのサイズを知る

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

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

私の利用している素材サイトは無料イラストなら【イラストAC】です。

ダウンロードするのであればIllustratorやInkScapeなどで編集できる、「eps・ai」形式のファイルをおすすめします。好きなサイズに加工できますし、イラストの使いたい部分だけを選んで使うこともできるので。

beforeこれを
ヘッダー画像
afterこうしたり(サイズ:1116×191)
ヘッダー画像

ヘッダー画像を追加する

開く「外観」「カスタマイズ」「背景・タイトル・ロゴ画像」

  1. ヘッダー背景画像の「画像を選択」をクリックします。
  2. headerキャプチャ画面

  3. 画像の保存場所を指定し追加します。
  4. 画像の配置方法はとりあえずこんな感じで設定します。
  5. headerキャプチャ画面

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

  1. 上のままではヘッダー画像の上下が切れていると思いますので、パディングで調整します。
    カスタマイズ画面を上の方までスクロールし「」をクリックします。
  2. headerキャプチャ画面

  3. 「ヘッダー/フッター」を開きます。
    上下のパディングサイズを右側のプレビューを確認しながら画像の縦サイズに合わせて調整します。
  4. headerキャプチャ画面

  5. 完成!(スマホでも確認しておきましょう)
  6. headerキャプチャ画面

あとがき

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

こちらもどうぞ

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

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

送信中です

×

※コメントは最大500文字、1回まで送信できます

送信中です送信しました!

コメント