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

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

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

 

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

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

スポンサーリンク

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

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

ヘッダー画像はユーザーの目にWebサイトの顔です。

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

ヘッダー画像はWebサイトの顔ですから、ユーザーが最初に目につく画像となります。

訪れたサイトがどういったものなのかを瞬時に理解する部分で、キャッチコピーやリード文とセットで構成されていることが多いです。

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

ヘッダー画像は自分の好きな画像を入れても良いのですが、できれば、Webサイトのコンセプトに合致した画像を使用した方が良いです。

理由は、人は情報の80%以上は視覚から得ており、見た目で色々な事を判断するからです。

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

なので、ヘッダー画像はサイトコンセプトに合致した画像を用意するようにしましょう。

 

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

Lightningテーマでヘッダー画像を設定する方法を解説します。

  • ヘッダー画像の追加、スライド設定方法
  • スライドショーの文字、ボタンの設定
  • テキストの位置、テキストカラーの設定

上記のとおりです。

ヘッダー画像の追加、スライド設定方法

ヘッダー画像の追加方法を解説します。

ダッシュボード>外観>カスタマイズ を選択します。

次に、カスタマイズメニューの下の方にある「Lightningトップページスライドショー」を選択します。

Lightningテーマのヘッダー画像は「Lightningトップページスライドショー」で設定するのですが、設定項目が多いので一ヶ所ずつ解説します。

Lightningトップページスライドショーの解説

Lightningテーマは画像を固定させたり、複数の画像をスライド表示させる事ができます。

画像を1枚だけ設定すると固定表示となり、画像を複数設定(最大5枚設定可能)すると、自動でスライド表示されるようになっています。

①スライド切り替え間隔

スライドを切り替える間隔を設定できます。

初期設定は40000ミリ秒(40秒)に設定してあります。

初期設定の40秒のままだと、なかなかスライドが動かないので、10秒ぐらいに変更するのが丁度よいと思います。

②スライド画像

「画像の変更」をクリックすると、ヘッダー画像を追加・変更できます。

「削除」をクリックすると、追加した画像を削除できます。
画像のサイズはテーマ推奨サイズに合わせましょう

Lightningテーマが推奨しているヘッダー画像のサイズは次の通りです。

  • 1900px(幅)×600px(高さ)

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

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

上記サイズより大きい画像を使用するとファイルサイズが大きくなり、サイトの表示が遅くなるので、極力、推奨サイズに画像を変更するようにしましょう。

③モバイル用スライド画像(任意)

「モバイル用スライド画像」に画像を追加しておくと、スマートフォン等のモバイル端末でアクセスがあった時に、モバイル端末専用の画像を表示させる事ができます。

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

スライド画像にalt属性のテキストを設定できます。

特に使わないと思います。
⑤スライドに被せる色(任意)

スライド画像に色を被せる事ができます。

色はカラーピッカーで自由に選択する事ができます。

この機能は色の濃さとセットで使用します。
⑥スライドに被せる色の濃さ

「⑤スライドに被せる色(任意)」で選択した色の濃さを指定します。

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

パーセンテージを変更することでヘッダー画像に任意の色を被せる事ができるようになります。

100と入力すると何の画像なのか全く分からなくなるので、使用する際は、30ぐらいがちょうど良いと思います。

⑦スライド画像リンク先URL

URLを入力すると、画像をクリックした際に任意のURLにジャンプさせる事ができます

初期設定では「https://lightning.nagoya/」と入っていますので、こちらは必ず削除して下さい。

URL入力欄の下に、「リンク先を別ウィンドウで開く」という項目がありますが、こちらにチェックを入れると、新しいタブで表示させる事ができます。

スライドショーの文字、ボタンの設定

次に、スライドショーの文字やボタンの設定方法を解説します。

スライドタイトル(任意)

「スライドタイトル(任意)」に文字を入力すると、太字でタイトルを表示させる事ができます。

なお、初期設定では改行タグ(<br>)が入力してありますが、改行タグを入力しなくても改行は反映されます。

スライドテキスト(任意)

「スライドテキスト(任意)」に文字を入力すると、通常のテキストサイズで文字を表示させる事ができます。

ボタンの文字(任意)

「ボタンの文字(任意)」は初期設定では「READ MORE」と入力してありますが、任意の文字に変更する事ができます。

URLを入力しないとボタンは表示されません。

テキストの位置、テキストカラーの設定

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

サンプルとして下図の設定方法を解説します。

下記項目のように設定すると、上図のような感じに設定できます。

  • 位置 → 左
  • スライド文字色(任意) → 赤
  • 文字に色を付ける → チェック
  • 文字の影の色(任意) → 黄色

これらの設定が必要無い場合、初期設定の内容を全て削除しましょう。

 

ヘッダー画像の素材を探す時におすすめなサイト3選

ヘッダー画像の素材をお探しの場合、商用利用可能な無料で画像素材を使用できる画像素材サイトを3つ紹介します。

上記のほか、「全て無料で使える!写真&画像素材サイト11選【商用利用OK】」で無料画像素材サイトを紹介していますので、興味のある方は是非どうぞ。

 

画像サイズを変更するおすすめツール2選

画像素材サイトでダウンロードした画像はそのままのサイズでは使えないので、画像のサイズを変更する必要があります。

そこで、画像のサイズを変更するツールをWebブラウザで使用するツールと、パソコンにインストールして使用するツールの2つ紹介します。

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

 

まとめ

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

 

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

 

 

人気記事【無料あり】オンラインプログラミングスクールおすすめ3選【通学不要】

トップへ戻る
タイトルとURLをコピーしました