フロントページとヘッダーで異なるロゴ画像を設定する方法

はじめに

表1の設定をするとメインビジュアルとヘッダーに同じロゴ画像が表示されます。

しかし、縦長のロゴをそのままヘッダーに配置すると、高さに合わせ縮小されてしまい、意図したデザインにならないことがあります（図1参照）。

この記事では、メインビジュアルとヘッダーで別々のロゴ画像を設定する方法を紹介します。
例えば、メインビジュアルには縦長のロゴを、ヘッダーには横長のロゴを表示できます。

表示例

手順

表2にメインビジュアルの設定をします。

• 「ヘッダーロゴ」には、フロントページ以外で表示する横長のロゴ画像を設定します。
• 「タイトルテキスト」に<img>タグを入力し、メインビジュアルに表示する縦長ロゴ画像 を設定します。

さいごに

今回紹介した方法を使えば、メインビジュアルとヘッダーで異なるロゴを表示できます。
これにより、サイト全体のデザインに統一感とバリエーションを持たせ、ブランドの魅力をより強調できます。