ヘッダー画像・ロゴ画像・ヘッダー背景画像の表示方法

フォーラムでご要望をいただき、「ヘッダー背景画像」を表示できるようにしました。

今回はこの説明がメインですが、既存の「ヘッダー画像」と「ロゴ画像」についての説明もしていなかったので、それぞれの機能についてご紹介します。

ヘッダー画像の表示方法

ヘッダー画像はテーマカスタマイザー(外観→カスタマイズ)で設定(アップロード)します。

 

すでにアップロードしている画像を使うこともできますし、新しい画像をアップロードすることもできます。

この画像の上の赤いバナーみたいなものがヘッダー画像です。

サイズについて

横幅と高さについての記載がありますが、アップロードする画像のサイズは何でもOKです。

アップロード後にヘッダー画像にしたい部分だけ切り取ることもできますし、アップロードした画像サイズそのままで使うこともできます。(切り取りなし)

アップロードした画像サイズのまま使う場合は、画像選択後に右下の「選択して切り抜く」ボタンをクリックし…

 

「切り抜かない」をクリックします。

ロゴ画像の表示方法

ロゴ画像はヘッダー画像と違い「サイトタイトルの画像版」として機能します。

つまり、本来タイトルがある場所に表示されるので、固定ヘッダーが使えたり、アイコンメニューを隣に表示することができます。

設定は同じくテーマカスタマイザーの画面です。

 

こちらがロゴを設定した時のデザインです。

 

注意点としては、ヘッダー画像と違いロゴ画像はサイズが決まっているので、比率が近い画像をアップロードする必要があります。

(完全に同じじゃなくても大丈夫です)

もちろん、比率が全然違う画像をアップロードすることもできますが、本来の画像とは違う見た目になりますのでおすすめはしません。

また、ヘッダー画像を設定している場合はロゴ画像ではなくヘッダー画像が使われるので、ロゴ画像を使いたい場合はヘッダー画像を非表示にしてください。

ヘッダー背景画像の表示方法

ヘッダー画像と名前は似ていますが、ヘッダー背景画像は文字通り「背景」に画像を表示します。

設定場所は同じくテーマカスタマイザーでやり方も同じです。

 

性質上、「組み合わせる」のが基本的な使い方になり、例として「幾何学模様の画像」を設定した時のデザインがこちらになります。

(ヘッダー画像とロゴ画像は先程と同じです)

ヘッダー画像(透過)、背景画像、背景色(赤)

ロゴ画像(透過)、背景画像、背景色(赤)

設定項目

自由度の高いカスタマイズを可能にするために「背景画像」とほぼ同じ設定項目を用意しています。

 

大きい背景画像の中にヘッダー画像やロゴ画像を表示する場合は、画像のサイズを「フルスクリーン」にして、画像を繰り返さない設定にすれば綺麗に表示されます。

また、テクスチャなどの素材を背景画像にする場合は、画像のサイズを「元の大きさ」にして、画像を繰り返す設定にすれば綺麗に表示されます。

色々と試してみてください。

タグについて

最後にテクニカルな話になりますが「タグ」について触れておきます。

ヘッダー画像とロゴ画像を設定するとサイトタイトル(文字)がなくなりますが、画像のalt属性に同じ文字を自動でセットするのでSEO的な心配は不要です。

トップページではh1タグ、それ以外のページではpタグで囲んでいます。

例えば、ヘッダー画像を表示しているデモサイトの情報をSEOチェキで見てみると以下のようになります。

 

その他、何かわからないことやご質問があればフォーラムでご質問いただければと思います。

カテゴリー 4536マニュアル

この記事が良かったらいいね!最新情報が届きます!

Pickup