WordPressでタイトルロゴが表示されない場合の解決策

WordPressでタイトルロゴが表示されないときは、最初に「Site Logo（ヘッダーのロゴ）」「Site Title（文字のサイト名）」「Site Icon（ブラウザータブやアプリアイコン）」を区別します。次にアクティブテーマがクラシックかブロックかを確認し、管理画面の設定、テンプレートへの配置、生成HTML、CSS、画像リクエスト、キャッシュの順に切り分けます。ロゴ画像を再アップロードし続けるだけでは、テンプレートが出力していない問題やCSS非表示は直りません。

3種類を混同しない

Site Logo／Custom Logo：サイトのヘッダーなどに表示するブランド画像。テーマやSite Logoブロックが出力する。
Site Title：設定→一般のサイトタイトルに由来する文字列。ロゴ画像とは別に表示・非表示を選べるテーマがある。
Site Icon：favicon、ブラウザータブ、アプリ用の正方形アイコン。ヘッダーロゴを置き換える設定ではない。
Header Image：クラシックテーマで背景や大きなヘッダー画像として使う別機能。custom logoとは別。

「サイトアイコンは見えるのにロゴがない」は矛盾ではありません。それぞれ保存先と出力関数が違います。表示したい場所と役割を言葉で確認します。

クラシックテーマかブロックテーマか

クラシックテーマでは、外観→カスタマイズ→サイト基本情報などからロゴを選び、テーマがcustom-logoサポートを登録してthe_custom_logo()などをテンプレートで呼び出します。ブロックテーマでは、外観→エディターでヘッダーのTemplate Partを開き、Site Logoブロックを配置・設定します。Customizerが非表示でも、ブロックテーマでは正常です。古い記事の「外観→カスタマイズ」だけを探さないでください。

管理画面で現在のロゴを確認する

クラシックテーマならCustomizerのSite Identity、ブロックテーマならSite EditorのHeader Template Partを開きます。画像のサムネイルが表示され、公開／保存済みかを確認します。プレビューだけ変更して公開していない、別のテンプレートパーツを編集した、言語・ページ・端末別ヘッダーが別設定というケースがあります。設定を変更する前に現在値と画面を記録し、データベースとwp-contentのバックアップを確認します。

ブロックテーマではSite Logoブロックを配置する

外観→エディター→デザイン→パターン／テンプレートパーツから、実際に使われているヘッダーを開きます。Site Logoブロックがなければ追加し、メディアライブラリから画像を選びます。幅、リンク、ホームページ上のリンク解除、切り抜きなど利用できる設定を確認して保存します。似た名前のヘッダーが複数ある場合、対象テンプレートが参照するパーツを特定します。

変更がフロントへ出ない場合、投稿・固定ページ・アーカイブ・404で別テンプレートが使われていないか確認します。Site Editorのユーザー変更はデータベースへ保存されるため、テーマファイルを直しただけでは、保存済みテンプレートが優先されることがあります。リビジョンや「クリア／リセット」は影響範囲を確認してから使います。

クラシックテーマはcustom-logo対応を確認する

テーマ開発者はafter_setup_themeでadd_theme_support( 'custom-logo' );を登録し、ヘッダーテンプレートでthe_custom_logo()またはget_custom_logo()を使います。管理画面にロゴ設定があっても、カスタムheader.phpが出力関数を削除していれば表示されません。親テーマを直接編集せず、子テーマまたはサイト専用プラグインで修正し、テーマ更新後も検証します。

<?php
if ( function_exists( 'the_custom_logo' ) && has_custom_logo() ) {
    the_custom_logo();
} else {
    printf( '<a href="%s">%s</a>', esc_url( home_url( '/' ) ), esc_html( get_bloginfo( 'name' ) ) );
}
?>

これは開発者向けの概念例です。実際のテーマでは既存マークアップ、フック、翻訳、アクセシビリティ、ホームページ上のリンク、構造化データを守ります。コードを管理画面の本文やCustom HTMLブロックへ貼ってもPHPは実行されません。サーバーのファイルエディターで本番を直接変更せず、バージョン管理とステージングを使います。

画像がメディアライブラリに存在するか

ロゴとして保存されている添付ファイルIDが、削除済み画像や別サイト移行前のIDを指すと表示できません。メディアライブラリで画像を開き、ファイルURL、MIMEタイプ、寸法、ファイルサイズ、代替テキストを確認します。マルチサイトやステージング複製ではuploadsのURLと実ファイルが一致しないことがあります。データベースURLを一括置換する前に、シリアライズデータ対応の正式な移行手順とバックアップを使います。

Networkで画像リクエストを見る

ブラウザーDevToolsのNetworkを開いてページを再読み込みし、ロゴ画像のリクエストがあるか確認します。リクエストがなければ、テンプレート非出力またはCSS背景画像の条件を調べます。404ならファイル欠落やURL、403なら権限・WAF・Hotlink保護、mixed contentならHTTPS移行、200なのに見えなければCSSや透明画像を疑います。CDNが古い404や旧画像をキャッシュしている場合もあります。

HTTP状態、最終URL、Content-Type、転送サイズ、キャッシュ元。
src、srcset、sizesのどの候補が選ばれたか。
httpからhttpsへの不要なリダイレクトやmixed content。
CSP、CORS、Cookie、署名付きURL期限、CDN変換エラー。
画像が実際に透明、白一色、破損、極端に大きい／小さいファイルでないか。

HTMLにロゴがあるか確認する

Elementsでcustom-logo-link、custom-logo、wp-block-site-logoなど実際の要素を探します。HTML自体がなければ管理設定・テーマサポート・テンプレートの問題です。HTMLがあるならComputedでdisplay、visibility、opacity、width、height、max-width、overflow、position、z-index、transformを確認します。クラス名はテーマや版で変わるため、記事のセレクターを決め打ちせず実際のDOMを基準にします。

CSSで消えていないか

モバイル用media query、スクロール時のsticky header、ダークモード、トップページだけの透明ヘッダーなどがロゴを隠すことがあります。白いロゴを白背景へ置いて「消えた」ように見える例もあります。DevToolsで問題のCSS宣言を一時的に外し、原因を特定します。恒久修正は追加CSSを大量の!importantで上書きするのではなく、テーマの公式設定または子テーマの適切な詳細度で行います。

.site-branding .custom-logo {
  display: block;
  max-width: 100%;
  height: auto;
}

このCSSは万能な修正ではありません。実サイトの親要素、テーマ設計、ロゴ想定幅を確認します。親に高さ0やoverflow hiddenがあれば画像側だけ直しても見えません。

ロゴ寸法と切り抜き

テーマはcustom logo supportで推奨幅・高さ、flex-width、flex-height、切り抜きを指定できます。極端に縦長、巨大、余白が多い画像は、CSS内で小さく見えたりヘッダーを押し広げたりします。ロゴの実デザイン領域、透明余白、DPRを考え、表示サイズの2倍程度など適切なピクセル寸法を用意します。PNG、SVG、WebPの対応はテーマ・WordPress・セキュリティ設定で異なります。SVGは既定でアップロード不可の構成があり、無検証に許可しません。

代替テキストとサイト名

ロゴ画像の代替テキストは、画像がリンクでサイトホームへ戻る場合の名前として機能します。画像内文字を冗長に繰り返すか、隣に同じSite Titleがあるかを考えます。ロゴが表示できないときの文字フォールバックも用意します。Site TitleをCSSで消し、ロゴのaltも空にすると、支援技術でホームリンクの目的が分からなくなる可能性があります。テーマのアクセシビリティ設計を壊さないでください。

子テーマとテーマ切り替え

custom logoはテーマ変更設定（theme_mod）として保存されるのが一般的で、アクティブテーマのstylesheet識別子と関連します。親テーマから子テーマへ切り替えると、画像はメディアライブラリに残っていても、子テーマ側のロゴ設定が未設定に見えることがあります。管理画面から子テーマでロゴを選び直すのが安全な基本です。データベースのoption名を推測して直接コピーせず、移行が多数サイトに必要なら公式APIとステージング検証を使います。

キャッシュを一層ずつ切り分ける

ロゴ変更後も旧画像が出る場合、ブラウザーキャッシュ、WordPressページキャッシュ、最適化プラグイン、CDN、画像最適化CDN、Service Workerを順に確認します。ファイル名が同じまま内容だけ変わると長いキャッシュ期限で残りやすいため、WordPressのメディア添付と生成URLを使い、適切なキャッシュ無効化を行います。本番CDNの全消去は負荷を生むので、対象URLまたは範囲を限定します。

プラグイン競合を調べる

画像最適化、遅延読み込み、ヘッダー作成、ページビルダー、多言語、キャッシュ、セキュリティプラグインがロゴURLやマークアップを変更する場合があります。本番で一括無効化せず、ステージングとバックアップで、最近の更新履歴、Console／Network、Health Check系のトラブルシューティングモードなどを使って影響を切り分けます。プラグインを止めるとCookie同意やセキュリティ機能も止まる可能性があります。

確認するページと端末

トップ、投稿、固定ページ、アーカイブ、検索、404、ログイン前後。
デスクトップ、狭いウィンドウ、スマホ縦横、タブレット、DPR 1／2／3。
通常ヘッダー、sticky状態、メニュー展開、ダークモード、スクロール後。
Chrome、Safari、Firefox、Android WebViewなど対象ブラウザー。
キーボードフォーカス、読み上げ名、200%ズーム、画像非表示時のフォールバック。
キャッシュ済み再訪と初回、CDN有無、管理者と未ログイン利用者。

安全な復旧順序

現在のテーマ、子テーマ、WordPress版、ロゴ設定、対象テンプレートを記録する。
データベースとuploads、テーマ変更を含むバックアップと復元方法を確認する。
ステージングで管理画面の再選択、テンプレート配置、CSS、プラグインを順に検証する。
原因を一つに絞り、最小変更をバージョン管理または管理画面の正式機能で適用する。
全ページ・端末・アクセシビリティ・Network・キャッシュを確認する。
本番反映後に限定的なキャッシュ更新を行い、戻し手順と変更記録を残す。

ロゴ問題は、設定→テンプレート→HTML→画像通信→CSS→キャッシュの順に見ると早く切り分けられます。クラシックテーマはcustom logo API、ブロックテーマはSite Logoブロックが基準です。Site IconやSite Titleと混同せず、文字フォールバックとアクセシビリティも含めて修正してください。

公式情報・参考資料

この記事を書いた人

佐藤健司

実務の現場で詰まりがちなポイントを地図にするITブログ「IT trip」を運営。Windows／Office（Teams・Excel）からSQL、サーバ運用、ガジェットまで、再現性のある手順と“なぜそうなるか”を丁寧に解説します。読んだらすぐ試せること、そして迷った人の次の一歩が見えることを大切にしています。

WordPressでタイトルロゴが表示されない場合の解決策

3種類を混同しない