トップページの顔ともいえるヘッダー部分に画像を追加しよう

ウェブサイトの顔とも言えるヘッダー部分に、ウェブサイトの内容に合致した画像を追加・変更します。

「Lightning」テーマのヘッダー部分は下記の部分です。まさに、ヘッダー画像はウェブサイトの顔ですね。

ヘッダーに自分の好きな画像を自由に追加・変更できるのが、WordPressの便利なところです。

ヘッダー画像はウェブサイトの第一印象を表す大事な部分ですので、見栄えの良い画像を入れると、それだけでユーザーに与える印象が良くなります。それでは、ヘッダー画像の設定方法について、解説していきます。

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

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

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

ウェブサイトのコンセプトに合致した画像を用意する

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

というのも、人は情報の80%以上は視覚から得ていますので、見た目で色々な事を判断します。

例えば、歯医者さんのウェブサイトのヘッダー画像に、歯医者さんと全く無関係の画像がトップページに掲載されていたら、いったい何のサイトなのかユーザーが困惑すると思います。

ですので、ヘッダー画像はサイトコンセプトに合致した画像を用意した方が良いです。

サイズをテーマ推奨サイズに合わせる

「Lightning」テーマが推奨しているヘッダー画像のサイズは1900px(幅)×600px(高さ)です。

上記サイズより小さい画像を使用した場合、自動で画像が拡大され、推奨サイズに収まるようになっています。
高さは、600pxより、小さくても、大きくても、幅が1900pxであれば大丈夫です。

ただ、あまり高さが高すぎると、全画面ヘッダー画像で埋まる感じになるので気を付けて下さい。

スライド表示させるか固定させるか

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

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

 

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

それでは、ヘッダー画像を追加していきます。
ダッシュボード>外観>カスタマイズ を選択します。

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

ここから色々設定していくのですが、色々と細かく設定ができますので、パートに分けて解説致します。

スライドショー

スライド切り替え間隔

スライドを切り替える間隔を設定できます。初期設定は40000ミリ秒(40秒)に設定してあります。

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

 

スライド画像

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

※「削除」をクリックすると、追加した画像を削除できます。

 

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

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

 

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

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

※特に使わないと思います…

 

スライドに被せる色(任意)

スライド画像に色を被せる事ができます。色はカラーピッカーで自由に選択する事ができます。

※この機能は色の濃さとセットで使用します。

 

スライドに被せる色の濃さ

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

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

このように、ヘッダー画像に任意の色を被せる事が出来るようになる機能です。100と入力すると何の画像なのか全く分からなくなるので、使用する際は、30ぐらいがちょうど良いのかな?と思います(あまり使わない機能かもしれませんが…)。

 

スライド画像リンク先URL

URLを入力すると、画像をクリックした際に任意のURLにジャンプさせる事が出来ます。初期設定では「https://lightning.nagoya/」と入っていますので、こちらは必ず削除して下さい。

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

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

スライドショーの文字やボタンを設定する事が出来ます。

「スライドタイトル(任意)」に文字を入力すると、太字でタイトルを表示させる事が出来ます。なお、初期設定で改行タグ(<br>)が入力してありますが、改行タグを入力しなくても改行が反映されます。

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

「ボタンの文字(任意)」については、初期設定では「READ MORE」と入力してありますが、任意の文字に変更する事ができます。※URLを入力しないとボタンは表示されません。

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

スライドショーで表示させるテキストの位置やカラー、影の有無、影の色などの設定が可能です。

上記の例では、下記設定でやってみました。

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

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

 

画像素材を探す時におすすめのサイト

無料で使え、商用利用もできる画像素材サイトをご紹介します。

総合素材サイト|ソザイング

http://sozaing.com

「ソザイング」は写真を提供しているプロ・アマチュアカメラマンの協力と、ソザイングスタッフカメラマン・ソザイングスタッフデザイナーの作品により成り立っている総合素材サイトです。

PAKUTASO/ぱくたそ

https://www.pakutaso.com

「ぱくたそ」は、高品質・高解像度の写真を無料で配布しているフリー素材サイトです。面倒な利用報告や会員登録、ダウンロードの枚数制限はありません。

写真素材 足成

http://www.ashinari.com

「写真素材 足成」は、全国のアマチュアカメラマンが撮影した写真を、写真素材として無料で提供しています。

画像のサイズを変更する際にお勧めのツール

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

そこで、画像のサイズを調整するツールを紹介したいと思います。ブラウザで使用できるウェブツールと、パソコンにインストールするツールの2種類ご紹介します。

Pixlr Editor

https://pixlr.com/editor/

Pixlr Editor(以下・ピクセラエディター)は、オートデスク社が提供する無料の画像処理ソフトです。ウェブ版や アプリ版、無料・有料版などがあり、対応機器もWindowsやMacなど豊富に用意され、世界中で利用されています。

上記リンクをクリックすると、そのまま使用する事が出来ます。

Photoscape(フォトスケープ)

http://www.photoscape.org

「PhotoScape」は、直感的な操作が可能な画像編集ソフトで、画像のリサイズ・トリミング、文字入れ、画像のフィルター加工、モザイク処理(ぼかし)、画像同士の結合、フレームの設置等の加工を簡単に行えるツールです。

無料にもかかわらず、非常に高機能なのでお勧めです。

Follow me!