Hara Daizo 
WordPressのロゴは、使用中のテーマによって設定場所が異なります。クラシックテーマでは「外観→カスタマイズ→サイト基本情報」など、ブロックテーマでは「外観→エディター」でSite Logoブロックを編集するのが基本です。
サイズにもWordPress全体で共通の正解値はありません。テーマの表示幅、ロゴの縦横比、スマートフォン表示、高解像度ディスプレイを確認し、見た目とファイル容量の両方から決める必要があります。この記事では設定方法から、ぼやける・表示されない場合まで整理します。
WordPressのロゴとファビコンは役割が違う
ロゴは、Webサイト上でブランド名や企業名を視覚的に示す画像です。多くのサイトではヘッダーに表示され、トップページへのリンクとして使われます。
一方、ファビコン（サイトアイコン）はブラウザーのタブやブックマークなどに表示される小さな識別画像です。WordPressのSite Logoブロックには同じ画像をサイトアイコンとして使う設定もありますが、ロゴとファビコンを必ず同一画像にする必要はありません。
横長の文字ロゴは、正方形の小さなアイコンにすると文字が読めなくなることがあります。その場合は、ロゴマークだけをファビコン用に切り出す方が実用的です。ファビコン側の詳しい設定はファビコンの設定で分けて確認してください。
クラシックテーマでWordPressロゴを設定する方法
クラシックテーマでカスタマイザーが有効な場合は、次の流れが基本です。
- WordPress管理画面で「外観→カスタマイズ」を開く
- 「サイト基本情報」「Site Identity」などの項目を開く
- 「ロゴを選択」からメディアライブラリを開く
- 既存画像を選ぶか、新しいロゴ画像をアップロードする
- 必要なら切り抜き範囲を調整する
- PC・タブレット・スマートフォンのプレビューを確認する
- 「公開」を押して保存する
テーマによっては「サイト基本情報」ではなく、独自のヘッダー設定画面にロゴ項目があります。また、テーマ自体がCustom Logo機能をサポートしていなければ同じ項目は表示されません。
テーマの説明書に推奨サイズがある場合、その数字はそのテーマのレイアウトに対する推奨値です。他テーマでもそのまま正解になるわけではありません。
ブロックテーマではSite Logoブロックを使う
ブロックテーマではサイトエディターからロゴを編集します。
- 「外観→エディター」を開く
- ロゴがあるヘッダー等のテンプレートパーツを開く
- 既存のSite Logoブロックを選ぶ。なければブロックを追加する
- メディアライブラリからロゴ画像を選択する
- ブロック設定で表示幅、余白、配置などを調整する
- ロゴをトップページへリンクするか確認する
- 保存し、実際のページで表示を確認する
Site Logoブロックへ画像を設定すると、同じサイトロゴを参照するブロックへ変更が反映されます。ページごとに別画像を手作業で差し替える運用ではなく、サイト共通のロゴとして扱う設計です。
Site Logoブロックには「サイトアイコンとして使用」できる設定もあります。ロゴマークが正方形でも判別しやすい場合は便利ですが、横長ロゴをそのまま小さなファビコンへ流用する必要はありません。
WordPressロゴのサイズ・解像度を決める考え方
ロゴ画像は「何pxなら正解」と一律に決めるのではなく、実際に何pxで表示されるかを基準に考えます。
たとえばPCのヘッダーで横幅180px程度に表示するロゴなら、元画像を180pxぴったりに作ると、高解像度ディスプレイで輪郭が甘く見えることがあります。余裕のある解像度で書き出し、WordPressやテーマ側で表示幅を縮める方法が選べます。
ただし、数千pxの巨大なロゴ画像を用意すれば良いわけでもありません。小さなヘッダーに対して必要以上のファイルを読み込むと、転送量が増えます。
確認する項目は次の4つです。
| 確認項目 | 見るポイント |
|---|---|
| 表示幅 | PCヘッダーで実際に何px程度で表示されるか |
| 元画像 | 表示幅に対して十分なピクセルがあるか |
| 縦横比 | ヘッダーの高さを圧迫しない形か |
| ファイル容量 | 必要以上に大きいPNG等を配信していないか |
PNG・WebP・SVGはどう選ぶ？
透明背景が必要なロゴではPNGが使われることが多く、WebPでも透過を扱えます。写真に近いロゴや複雑なグラデーションではWebPで容量を減らせる場合があります。
SVGは拡大しても輪郭が劣化しないためロゴと相性が良い形式ですが、WordPressの標準設定ではアップロード可否やテーマ・セキュリティ対策を確認する必要があります。SVG対応を目的に、出所不明のファイルを無条件で許可する運用は避けてください。
画像形式だけで決めず、テーマが正式に想定している方法を優先します。
スマホ表示では横幅だけでなくヘッダー全体を見る
PCでは問題のない横長ロゴでも、スマートフォンではメニューアイコンと競合して狭くなることがあります。
スマホでは次の点を確認してください。
- ロゴが途中で切れていない
- ロゴが大きすぎてヘッダーが2段になっていない
- メニューボタンと重なっていない
- 小さくなりすぎて文字が判別できない
- 上下の余白が過剰でない
- トップページへのリンクをタップしやすい
ロゴ単体ではなく、ナビゲーションやヘッダー高との組み合わせで判断します。ヘッダー全体の配置や固定表示まで変更する場合は、ヘッダーの編集で詳しく確認してください。
ロゴがぼやけるときの確認ポイント
ロゴがぼやける場合は、CSSを追加する前に画像そのものと表示方法を確認します。
小さい元画像を拡大していないか
実際の表示幅より元画像のピクセル数が小さいと、ブラウザーで拡大されて輪郭が甘くなります。開発者ツールで表示幅と画像の実寸を確認してください。
強い圧縮や不向きな画像形式になっていないか
細い文字・輪郭・単色面が多いロゴを強く非可逆圧縮すると、にじみやノイズが目立つことがあります。元データから書き出し直し、輪郭を確認します。
テーマ側で別の中間サイズを使っていないか
メディアライブラリに高解像度の元画像があっても、テーマが小さな中間画像を出力し、それを拡大表示している場合があります。公開ページで実際に読み込まれている画像URLと寸法を確認します。
ロゴが表示されない・変更が反映されない場合
まず「どこで設定したロゴか」を確認します。クラシックテーマのカスタマイザーと、ブロックテーマのSite Logoブロックでは保存場所が異なります。
| 症状 | 確認内容 |
|---|---|
| ロゴ設定項目がない | テーマがCustom Logoまたはサイトエディターに対応しているか |
| 変更しても古い画像 | ブラウザー・キャッシュプラグイン・CDNのキャッシュ |
| 一部ページだけ違う | 別テンプレート・別ヘッダーパーツを使っていないか |
| スマホだけ消える | テーマのレスポンシブ設定・表示条件 |
| 画像が404になる | メディア削除、URL変更、移行時のパス不整合 |
| ロゴが極端に大きい | ブロック幅、テーマCSS、画像の縦横比 |
ブロックテーマでは、ヘッダーのテンプレートパーツを複数作成していると、ページによって別ヘッダーが使われる場合があります。どのテンプレートが表示されているかまで確認すると原因を絞りやすくなります。
ロゴを作るときに押さえておきたいポイント
Webサイト用ロゴは、デザインの好みだけでなく運用しやすさも大切です。
- 横長版と正方形に近いマーク版を用意する
- 明るい背景・暗い背景の両方で視認性を確認する
- 小さく表示したときに細い文字が潰れないかを見る
- 余白を画像ファイル内に入れすぎない
- 元データを保管し、Web用画像だけを唯一の原本にしない
- ファイル名を用途が分かる形で管理する
サイトリニューアル時にヘッダー高が変わっても、元データがあれば適切なサイズへ再書き出しできます。
よくある質問
全テーマ共通の固定値はありません。実際の表示幅、テーマの推奨寸法、ロゴの縦横比を確認し、高解像度画面でもぼやけにくい元画像を用意します。必要以上に巨大な画像へするのではなく、表示品質と容量を両方確認してください。
同じ画像を使うことはできますが、必須ではありません。横長の企業ロゴは小さな正方形のファビコンでは判別しにくいことがあるため、ファビコン用に記号部分だけを用意する方が見やすい場合があります。
保存先を間違えているほか、テーマ・ブロック・キャッシュ・CDNが古い画像を表示している可能性があります。まず編集したロゴ設定と公開ページの画像URLを確認し、その後に必要なキャッシュだけを削除してください。
まとめ
WordPressロゴの設定場所はテーマの種類で異なります。クラシックテーマではカスタマイザーのサイト基本情報、ブロックテーマではサイトエディターのSite Logoブロックをまず確認してください。
サイズは固定のピクセル値で決めず、実際の表示幅、元画像の解像度、スマートフォンのヘッダー構成、ファイル容量を合わせて判断します。ぼやける場合は小画像の拡大や中間サイズ、表示されない場合はテーマの編集方式とテンプレート、キャッシュを順に確認すると原因を整理できます。