《JIN》ヘッダー画像設定の使い方　for初心者

ヘッダー設定に引き続いて、ヘッダー画像の設定を行います。

この項目では、ヘッダーに画像を設定し、その画像上に文字や説明を載せたり、画像自体にリンクを貼ったりと細かい設定ができます。

ヘッダー画像を効果的に使うと、文字だけのサイトより個性を出しやすく親しみやすい印象になるので、サイトの目的に合わせて上手に使いたいです。

ヘッダー画像

画像を選択から、ヘッダー画像に載せたいデータを選択します。

このサイトで使用している下記のサイズは2400×600です。キャッチフレーズ（後で設定の項目）などを載せられるように、左右や上下の余白を調整して画像の大きさ、絵の位置を決めました。

ヘッダー画像のリンク先URL

上記で設定したヘッダー画像をクリックすると、ここで入力した任意のURLへ飛べるように設定できます。

当サイトでは、トップページに飛ぶように設定しています。

ヘッダー画像のキャッチフレーズ/カラー

ヘッダー画像の中に、任意の文字を埋め込むことができます。赤字で「example」となっている部分が表示例です。

ヘッダーの画像をかえても、表示したいフレーズは変更にならないので便利ですね。

キャッチフレーズの文字加工

上記項目で設定したキャッチフレーズのスタイルを3種類から選択できます。それぞれの表示例です。

影はわかりにくいですが、文字の後ろにぼやっと設定色が暗くなった色でかすみがかかっている感じになりました。

ヘッダー画像のサブテキスト/カラー/文字加工

キャッチフレーズの下に、少し小さい字でサイトの説明や、追加のキャッチフレーズなどのサブテキストを設定することができます。

こちらもキャッチフレーズと同様に、色と3種類の中からスタイルを設定します。

「文系主婦ドラマチコの～」部分がサブテキスト表示部分になります。

ヘッダー画像のボタンカラー/リンク先/テキスト

ヘッダー画像の中に、任意のページに移動できるリンクボタンを設定することができます。

下記見本の黄色の部分がボタンになります。

ボタンテキストに文字を入力すると、ボタンが表示され、テキストの長さでボタンの長さが決まります。文字の大きさは変更できません。

ヘッダー画像のテキスト位置調整

こちらに数字を入力すると、ヘッダー画像上に設定したキャッチフレーズ、サブテキスト、ボタンの位置を調整することができます。

数字が大きいほど、文字は上にあがります。

PC表示とスマホ表示では、画面の幅が違うので、テキストの表示位置が異なります。なので、それぞれ数字を実際に入れて試しながら、ベストの位置を探るのがよいでしょう。

ヘッダー画像の下層ページ表示選択

これまで設定してきたヘッダー画像をトップページだけでなく、記事やカテゴリーページに移動したときにも表示させるかどうかを設定する項目です。

【スマホ用】ヘッダー画像

スマホ用のヘッダー画像を設定する項目です。

上部の項目で設定するPC用の画像は2400px以上推奨ですが、スマホは画面サイズが異なるので、少し小さめで1500px以上推奨です。

PC用とスマホ用が同じ画像だと、どちらかの表示バランスが悪くなる可能性が高いので、それぞれに合った画像を設定するのが良いと思います。

JINではそのあたりの設定も細かくできるようになっているのでありがたいです。

当サイトの『ヘッダー画像設定』

シンプルなヘッダー画像に、テキストやボタンを設定して周遊率を高めたり、オリジナル画像をヘッダー画像に設定して、サイトの個性を高めたり。

ヘッダー画像を設定する場合は、よりユーザーにとって使い易いサイトになるように、こちらの項目を活用していきたいですね。