【SWELL】ヘッダーロゴ画像のおすすめサイズと設定方法

完成例の紹介

ヘッダーをテキストからロゴ画像に変更しました。

ロゴ画像を中央にすることもできます。

ヘッダーロゴ画像のおすすめサイズ

当サイトはSWELL公式デモサイトのロゴ画像のアスペクト比を維持しつつ小さくした「580 × 90」で作成しています。

小さくしている理由は、画像が大きいと読み込みに時間がかかりサイトの表示速度が落ちるためです。

SWELL公式サイト

SWELL公式のデモサイト

当サイト

画像サイズの微調整

ロゴ画像の設定後、画像サイズ（縦幅）を調整できます。

以下はデフォルトの画像サイズ（縦幅）を表示しています。

画像サイズ（PC）

画像サイズ（PC追従ヘッダー内）

画像サイズ（sp）

ヘッダーロゴ画像の準備

手順①：Canvaでロゴ画像を作成

≫ Canva

※ ダウンロード時の拡張子はpngにします。（背景を透過できます）

手順②：remove.bgで背景を透過

≫ remove.bg

手順③：TinyPNGで圧縮

≫ TinyPNG

ヘッダーロゴの設定

管理画面メニューから、「外観」＞「カスタマイズ」を選択します。

サイドバーから、「ヘッダー」を選択します。

ロゴ画像の設定から、画像を選択して挿入します。

ロゴ画像が挿入されました。

ヘッダーロゴの表示位置を設定

ヘッダーのレイアウトから、PCとSP時のロゴ画像の位置を設定できます。

左寄り

中央