Amazon新生活セールFINALでお得に買い物する方法まとめ
PR
WordPress

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

 

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

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

  • ヘッダー画像の変更方法
  • スライドの切り替え間隔・スライド効果の変更方法
  • スライド画像に色を被せる方法
  • テキスト・ボタンの設定

上記のとおりです。

ヘッダー画像の変更方法

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

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

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

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

「モバイル用スライド画像(任意)」に画像を追加すると、モバイル端末でアクセスがあった時に専用の画像を表示できます。

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

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

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

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

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

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

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

  • 1900px ✖ 600px

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

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

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

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

下にスクロールすると、スライド [2]、スライド [3]という項目が出現します。

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

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

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

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

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

スライド画像リンク先URL

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

 

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

URLを削除しないと画像をクリックした際、Lightningテーマ開発元のサイトが表示されますので、必ず削除しましょう。

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

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

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

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

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

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

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

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

上記の順に解説します。

スライドの切り替え間隔

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

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

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

スライド効果の変更方法

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

  • slide→ヘッダー画像が横にスライドして切り替わる
  • fade→ヘッダー画像がフェードアウトで切り替わる

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

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

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

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

テキスト・ボタンの設定

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

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

  • ①スライドタイトル(任意):タイトルを編集できます。なお、初期設定では改行タグ(<br>)が入力してありますが、改行タグを入力しなくても改行は反映されます。
  • ②スライドテキスト(任意):タイトル下のテキストを入力します
  • ③ボタンのテキスト(任意):任意のテキストに変更できます(URLを入力しないとボタンは表示されません)
  • ④位置(任意):スライドタイトルやテキスト・ボタンの表示位置を変更できます。

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

テキストカラーの設定

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

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

  • ①スライド上の文字色(任意):テキストカラーを変更できます。
  • 文字に色を付ける:チェックを入れるとテキストに影がつきます。
  • ③文字の影の色(任意):影の色を変更できます。

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

 

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

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

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

  • フリー画像素材
  • デザインツール
  • サイズ変更ツール

上記の順に紹介します。

フリー画像素材

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

  • Pixabay:海外の素材サイト。画像・イラスト素材・ベクター画像・動画素材をダウンロードできます。
  • Unsplash:海外の素材サイト。風景・人物の画像をダウンロードできます。
  • 写真AC:ユーザー投稿型の写真素材サイト。国内企業が運営。

 

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

デザインツール

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

  • Canva(キャンバ):豊富なテンプレートで初心者でもおしゃれなヘッダー画像が作れます。
  • Fotor:フォトショ並みの機能を直感的な操作で編集できます。

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

 

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

サイズ変更ツール

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

 

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

 

まとめ

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

 

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

 

 

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

タイトルとURLをコピーしました