【WordPress】ヘッダー画像を設定する方法【Lightningテーマ】

WordPressのLightningテーマを使用しており、トップページヘッダー画像の設定方法をお探しの方向け。

ヘッダー画像はWebサイトの第一印象を表す大事な部分ですので、見栄えの良い画像を入れるとそれだけでユーザーに与える印象が良くなります。

この記事では、Lightningテーマのヘッダー画像の設定方法を解説します。

Lightningテーマのヘッダー画像とは

Lightningテーマのヘッダー部分は下図の部分です。

Lightningテーマを有効化すると、初期状態では上図の画像が設定されています。

このままではオリジナル要素を出すことができないばかりか、何のサイトかユーザーに伝わりませんので、画像を変更しましょう。

ヘッダー画像の役割と必要性

Webサイトのヘッダー画像は、Webサイトに訪問したユーザーが、「このWebサイトはどのようなサイトなのか？」ということを瞬時に理解する部分です。

なお、ヘッダー画像には、キャッチコピーやリード文とセットで構成されていることが多いです。

Webサイトのコンセプトに合致した画像を用意しましょう

ヘッダー画像はお好みの画像を挿入しても構いませんが、なるべくならWebサイトのコンセプトに合致した画像を使用するようにしましょう。

なぜなら、人は情報の80％以上は視覚から得ていますので、視覚から色々な事を判断するからです。

例えば、歯医者さんのWebサイトのヘッダー画像に、歯医者さんと全く無関係な画像がトップページに掲載されていたら、サイトに訪問したユーザーは「何のサイトなのか？」と困惑します。

こうしたミスマッチを起こすことが無いよう、ヘッダー画像はサイトコンセプトに合致した画像を設定しましょう。

Lightningテーマのヘッダー画像の設定方法

それでは、Lightningテーマのヘッダー画像の設定方法を解説します。

上記のとおりです。

ヘッダー画像の変更方法

最初に、ヘッダー画像の変更方法を解説します。

ダッシュボード＞外観＞カスタマイズ を選択し、
カスタマイザーを立ち上げます。

カスタマイザーを立ち上げたら、「Lightningトップページスライドショー」を選択します。

「Lightningトップページスライドショー」のメニューが表示されますので、下図赤枠内の「画像を変更」をクリックします。

画像選択画面が表示されますので、ヘッダー画像にしたい画像を選択します。

これから画像をアップロードするという方は、ドラッグしてアップロードします。

下図のように画像をアップロードしたら、①画像を選択し、②「画像を選択」をクリックします。

下図のように、画像が変更されました。

画像を変更したら、メニュー上部にある「公開」をクリックして、設定を保存しましょう。

ヘッダー画像の推奨サイズ

Lightningテーマのヘッダー画像の推奨サイズは以下のとおりです。

なお、上記サイズより小さい画像を使用すると、画像が横幅一杯に拡大されて表示されます。

逆に、上記サイズより大きい画像を使用すると、画像が横幅1900pxに圧縮されて表示されます。

設定可能な画像は5枚まで

Lightningテーマのヘッダー画像は5枚まで設定できます。

スライド画像の代替テキスト

ヘッダー画像に代替テキストを設定できます。

代替テキストとは、Webページに挿入された画像がどのような画像なのかを表現するテキストの事を言います。

【画像のSEO】代替テキスト（alt属性）とは【設定方法を解説】

alt属性とも呼ばれ、画像のSEO対策になりますので、なるべく設定するようにしましょう。

スライド画像リンク先URL

スライド画像リンク先URLにURLを入力すると、ヘッダー画像をクリックした際に、任意のURLに移動させることができます。

ちなみに、移動させたいページが無ければ、URLは空白にしておきましょう。

ヘッダー画像を固定したい場合（1枚だけ表示させる場合）

初期状態では、ヘッダー画像が2枚設定されていますので、画像がスライド表示されますが、2枚のうち1枚削除すると、ヘッダー画像が固定で表示されます。

下図赤枠内の「削除」をクリックします。

[2]スライド画像という項目から画像が消えます。

これで、1枚だけ表示されるようになります。

スライドの切り替え間隔・スライド効果の変更方法

次に、スライドの切り替え間隔とスライド効果の変更方法を解説します。

上記の順に解説します。

スライドの切り替え間隔

ヘッダー画像の表示が切り替わる時間の間隔を設定できます。

初期設定では40,000ミリ秒（40秒）に設定してありますので、お好みの秒数に変更しましょう。

ちなみに、40秒だとヘッダー画像がなかなか動かないので、15秒（15,000）～20秒（20,000）ぐらいが丁度よいと思います。

スライド効果の変更方法

ヘッダー画像の表示方法を変更できます。

スライド画像に色を被せる方法

被せたい色を設定して、色の濃さをパーセンテージで指定すると、ヘッダー画像に色を被せる事ができます。

例えば、被せる色を「緑」で指定し、色の濃さに10%、30%、50%、70%、100%と指定した場合、下図のように反映されます。

あまり使わないかもしれませんが、用意した画像の色が明る過ぎたり、配色を簡単に変えたい時に使えます。

テキスト・ボタンの設定

ヘッダー画像に表示される、テキストやボタンの設定方法を解説します。

各項目の設定方法は下記のとおりです。

上記を設定したら「公開」をクリックして、設定を保存して下さい。

テキストカラーの設定

スライドショーで表示させるカラー、影の有無、影の色などの設定方法を解説します。

各項目の設定方法は下記のとおりです。

ヘッダー画像の色に併せて、テキストカラーを変更しましょう。

ヘッダー画像作成におすすめなツールを目的別に紹介

最後に、ヘッダー画像作成におすすめなツールを目的別に紹介します。

本項目で紹介するツールを使えばヘッダー画像を作れますので、これからヘッダー画像を用意するという方は、是非参考にして下さい。

上記の順に紹介します。

フリー画像素材

ヘッダー画像で使う画像をどこで手に入れれば良いのかお悩みの方向けに、商用利用可能なフリー画像素材サイトを3つ紹介します。

なお、上記のほかに「【フリー素材】おすすめな画像サイト11選【商用利用OK】」という記事で無料画像素材サイトを紹介していますので、他の素材サイトも見てみたいという方は、是非参考にして下さい。

デザインツール

画像にテキストを入れたり、加工・編集したいという方は、下記ツールがおすすめです。

デザインテンプレートが豊富に用意されており、直感的な操作で編集できます。これだけ高機能なのに無料で利用できます。

なお、ツールの使い方は下記記事をどうぞ。

サイズ変更ツール

画像の大きさを変更したい方や、画像のデータサイズを変更したい方は、下記フリーツールがおすすめです。

PhotoScapeの使い方は「【無料】画像編集ソフトPhotoScapeならリサイズ・文字入れも簡単」という記事で解説していますので、是非どうぞ。

まとめ

以上、Lightningテーマのトップページのヘッダー画像を設定する方法を解説しました。

ちなみに、画像ではなく動画を表示させたいという方は、「ヘッダーに動画を表示できるWordPressテーマ＆プラグイン17選」という記事で動画を表示できるテーマやプラグインを紹介していますので、是非どうぞ。

人気記事【厳選】ブログ初心者におすすめなレンタルサーバー5選【WordPress向け】