【初心者向け】WordPressのヘッダー背景を変えるには？（Luxeritas）

2022年4月4日2023年12月9日

WordPressテーマ「Luxeritas」（ルクセリタス）のサイトデザインは、白を基調としたシンプルさが特徴的ですが、
シンプルなデザインが少し物足りない。でもデザイン変更って難しそう…
このように感じたことはありませんか?

Webサイトの作成経験もなく、WordPressの操作に不慣れな初心者の中には、「Luxeritas」（ルクセリタス）のサイトデザイン変更の操作はなんだか難しそう、ハードルが高い、間違えず操作する自信がないと感じる方もいらっしゃるかもしれません。
そのようなときは、ヘッダーエリア（ページの一番上のエリア）の背景に画像や色を入れるだけでも印象が変わりますので、一度試されてみてはいかがでしょうか。

本記事では、「Luxeritas」（ルクセリタス）のヘッダー背景の変更方法について、ブログシステムを使ったWebサイトの更新方法をお客様に説明していた私が紹介していきます。

Webページのヘッダーとは?

Webページの中で、一番上に表示されるエリアを「ヘッダー」と言い、サイト名・背景画像・ナビゲーションメニューなどサイトを訪れたときにまず最初に目に入るエリアとなります。
サイトに訪れたユーザーは、そのサイトが自分の求めているものにマッチしているかどうか3秒で判断すると言われており、最初の3秒で印象が悪ければ、中身の記事を読み進めることなく離脱する可能性も高くなります。
したがって、ヘッダーはサイト全体のイメージを印象づける重要なエリアとも言えます。

ヘッダーにはフリー画像を利用する

ヘッダーに自作でない画像を使いたい場合は、フリー素材（無料で使用できる写真やイラスト）を利用しましょう。また、ブログでアフィリエイト収益が発生するならば、商用利用の可否を事前に確認する必要がありますので必ずフリー素材サイトの利用規約に目を通してください。画像を加工・改変しての使用可否についても確認が必要です。

【Luxeritas】ヘッダー背景の設定

ヘッダー背景は、「画像」「色」を設定する2通りのやり方があります。
編集ツールを使って画像を加工し準備できる方は、「画像」を設定する方法にチャレンジしてみてください！
画像を加工することが難しい方は、「色」を設定する方法をお試しください！

ヘッダー背景に「画像」を設定する場合

1. 事前に【横幅1280px、高さ200px程度】の画像を準備します。
   ヘッダー画像は、使用しているWordPressテーマによって推奨サイズが異なりますが、まずは横幅1280px、高さ200px程度で作成してサイト全体の印象を確認し、後から微調整されるのもよろしいかと思います。
2. ダッシュボードの左メニューから[外観]→[カスタマイズ]をクリックします。
3. 左メニューから[背景・タイトル・ロゴ画像]をクリックします。
4. 下にスクロールし、ヘッダー背景画像で[画像を選択]をクリックします。
5. [ファイルをアップロード]の画面で[ファイルを選択]をクリックし、準備した画像を選択します。
6. 以下の 1～3のように設定し、さいごに[公開]をクリックします。
   1. 「画像に合わせて高さを自動的に調整する」にチェック
   2. 「no-repeat（繰り返さない）」を選択
   3. 「auto（自動）」を選択

ヘッダー背景に「色」を設定する場合

1. ダッシュボードの左メニューから[外観]→[カスタマイズ]をクリックします。
2. 左メニューから[背景色／枠線色]をクリックします。
3. 下にスクロールし、ヘッダー背景色で[色を選択]をクリックすると、カラーパレットが表示されます。
4. 小さい四角（赤やオレンジなど）を選択すると、パレットに色が表示されます。右のスライダーで濃さを調整することもできます。お好みの色を選択したら、さいごに[公開]をクリックします。

まとめ

「Luxeritas」（ルクセリタス）のサイトデザインは、白を基調としたシンプルさが特徴的ですが、初心者でも簡単にオリジナルのデザインファイルを作成しカスタマイズできます。
また、公式ページではサイトデザインのバリエーションを紹介しているので、気に入ったデザインがあればファイルをダウンロードしデザイン変更することも可能です。

公式ページ（デザインファイル）

手順のなかの「バックアップ」「リストア」のようなキーワードを見て、操作する自信がないと感じる方もいらっしゃるかもしれません。そのようなときは、メニューの「外観→カスタマイズ」からヘッダーエリアの背景に画像や色を入れるだけでも印象が変わるので、ぜひ一度試されてみてください。

最後までお読みいただきありがとうございます。本記事が少しでもお役に立ちましたら幸いです。