WordPressのロゴを高解像度ディスプレイ（Retina）でもぼやけずに表示するには、「表示したいサイズの2倍の大きさで画像を用意し、CSSで表示サイズを指定する」のが基本です。テーマ側では add_theme_support( 'custom-logo' ) でロゴ機能を有効にし、the_custom_logo() で出力すれば、WordPressが srcset 付きの img タグを作ってくれます。この記事では、テーマへのロゴ機能の追加、2倍サイズの考え方と推奨寸法の決め方、表示サイズの指定とレイアウトのずれ対策、sizes 属性の調整、SVGロゴやブロックテーマのサイトロゴブロックでの扱いまでを説明します。
ロゴがぼやける理由
Retinaなどの高解像度ディスプレイは、CSS上の1ピクセルを、実際には縦横2つ（またはそれ以上）の画素で描きます。そのため、幅200ピクセルで表示するロゴに幅200ピクセルの画像を使うと、画素が足りずに引き伸ばされ、輪郭がにじんで見えます。
対策は単純で、幅200ピクセルで表示したいなら幅400ピクセル以上の画像を用意し、表示サイズはCSSで200ピクセルに指定します。高解像度の画面では画像の細部まで使われて鮮明になり、通常の画面では縮小して表示されるだけなので問題ありません。
テーマでカスタムロゴを有効にする
テーマが対応していれば、「外観」→「カスタマイズ」の「サイト基本情報」などからロゴを設定できます（ブロックテーマの場合は後述）。自作テーマや、ロゴの寸法設定を変えたい場合は、子テーマの functions.php でロゴ機能を宣言します。
add_action( 'after_setup_theme', function () {
add_theme_support( 'custom-logo', array(
'width' => 400,
'height' => 100,
'flex-width' => true,
'flex-height' => true,
'unlink-homepage-logo' => true,
) );
}, 11 );各項目の意味は次のとおりです。
- **
width/height**：ロゴをアップロードしたときの推奨サイズで、切り抜き画面の基準になります。ここに「表示サイズの2倍」を指定するのがRetina対応のポイントです。この例は、幅200×高さ50ピクセルで表示する想定です。 - **
flex-width/flex-height**：有効にすると、推奨サイズと違う比率の画像でも、切り抜かずに使えるようになります。 - **
unlink-homepage-logo**：トップページではロゴをリンクにしない設定です。同じページへのリンクを避けられます。
親テーマがすでにロゴ機能を宣言している場合、子テーマで寸法を変えるには、親テーマより後に実行されるよう優先度を11などにして宣言し直します。上の例の第3引数がそれに当たります。
ヘッダーにロゴを出力する（クラシックテーマ）
子テーマの header.php で、ロゴがあればロゴを、なければサイト名を表示します。
<?php if ( has_custom_logo() ) : ?>
<?php the_custom_logo(); ?>
<?php else : ?>
<a class="site-title" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<?php echo esc_html( get_bloginfo( 'name' ) ); ?>
</a>
<?php endif; ?>the_custom_logo() は、ロゴを custom-logo-link というクラスのリンクで囲み、画像に custom-logo クラスを付けて出力します。HTMLを文字列として受け取りたい場合は get_custom_logo() を使います。ロゴ画像には、メディアライブラリで設定した代替テキストが使われます。代替テキストが空の場合の扱いはバージョンによって異なるため、メディアライブラリでロゴ画像の代替テキストにサイト名を入れておくと安心です。
2倍サイズの画像を用意してアップロードする
ロゴ画像は、次の手順で用意します。
- 表示サイズを決める（例：幅200×高さ50ピクセル）
- その2倍（幅400×高さ100ピクセル）以上で書き出す
- カスタマイザーでロゴを選び、切り抜き画面が出たら、必要に応じて範囲を調整する（
flex-widthとflex-heightが有効なら切り抜きを省略できます）
ロゴは文字や線が中心なので、PNGで書き出すと輪郭がきれいに出ます。写真のようなロゴならJPEGやWebPも選択肢になります。3倍の画面まで考えるなら3倍で用意してもかまいませんが、ファイルサイズが増えるため、2倍で十分なことが多いです。
CSSで表示サイズを指定する
2倍の画像をそのまま出すと、倍の大きさで表示されてしまいます。CSSで表示サイズを決めます。
.custom-logo-link img.custom-logo {
width: 200px;
height: auto;
max-width: 100%;
}
@media (max-width: 600px) {
.custom-logo-link img.custom-logo {
width: 150px;
}
}height: auto にしておくと、縦横比を保ったまま縮小されます。the_custom_logo() が出力する img には元画像の width と height の属性が付くため、ブラウザは画像の読み込み前に縦横比を知ることができ、読み込み後にヘッダーの高さが変わる「レイアウトのずれ（CLS）」が起きにくくなります。CSSで width だけを指定し、高さは auto にするのが、比率を崩さず属性の利点を生かす書き方です。
CSSは子テーマの style.css に書くか、wp_enqueue_style() で読み込んだファイルに書きます。
srcset と sizes を調整する
the_custom_logo() は内部で wp_get_attachment_image() を使って画像タグを作るため、WordPressが生成した縮小版のうち縦横比が同じものがあれば、srcset に候補として並びます。ブラウザは画面の解像度と sizes 属性を見て、その中から適切な画像を選びます。
ただし、標準の sizes は元画像の幅を基準に作られるため、幅200ピクセルで表示するロゴに対して「400ピクセルで表示される」とブラウザに伝わってしまい、通常の画面でも必要以上に大きな画像が選ばれることがあります。get_custom_logo_image_attributes フィルターで、実際の表示幅を伝えます。
add_filter( 'get_custom_logo_image_attributes', function ( $attr ) {
$attr['sizes'] = '(max-width: 600px) 150px, 200px';
return $attr;
} );これで、通常の画面では200ピクセルに近い縮小版、高解像度の画面では400ピクセルの元画像が選ばれやすくなります。縮小版が作られるかどうかは、メディア設定の画像サイズとロゴの寸法によって変わるため、srcset に候補が1つしかない場合もあります。その場合も、2倍の元画像が使われるので鮮明さは保たれます。
SVGロゴを使う場合
ロゴがベクター形式で用意できるなら、SVGはどの解像度でも鮮明に表示され、Retina対応を考える必要がありません。ただし、WordPressは初期状態ではSVGのアップロードを許可していません。SVGはスクリプトを含められる形式のため、安易に許可するとセキュリティ上の問題になります。
使う場合は、アップロード時にSVGの中身を無害化（サニタイズ）する Safe SVG のような、メンテナンスされているプラグインを使い、アップロードできる権限を管理者などに限定するのが現実的です（2026年10月現在）。SVGはピクセル寸法を持たないことがあるため、CSSで width を指定して表示サイズを決めます。テーマによっては、SVGだと切り抜き画面でエラーになることがあるので、flex-width と flex-height を有効にしておきます。
ブロックテーマのサイトロゴブロック
ブロックテーマでは、ヘッダーのテンプレートパーツに置いた「サイトロゴ」ブロックでロゴを設定・表示します。ブロックの設定でロゴの表示幅を指定でき、出力される画像には srcset が付きます。考え方はクラシックテーマと同じで、表示幅の2倍以上の画像をアップロードし、ブロックの幅設定で表示サイズを決めます。
サイトロゴブロックで選んだ画像は、カスタムロゴと同じサイト全体のロゴ設定として扱われます。ブロックの細かな設定項目の名前はバージョンによって変わることがあります。
表示がおかしいときの確認ポイント
- ぼやける：開発者ツールで画像の実際の寸法（元画像のサイズ）と表示サイズを比べます。元画像が表示サイズの2倍未満なら、大きな画像で入れ直します。
- 大きく表示される：CSSで
widthを指定しているか、テーマのCSSに上書きされていないかを確認します。 - ロゴの欄が出ない：テーマが
custom-logoを宣言していない可能性があります。前述の方法で宣言します。 - 変更が反映されない：ページキャッシュやCDNを使っている場合はパージします。
functions.php やテンプレートを編集する前にはバックアップを取り、ステージング環境で確認してから本番に反映してください。
まとめ
- Retina対応の基本は、表示サイズの2倍以上の画像を用意し、CSSで表示サイズを指定することです。
add_theme_support( 'custom-logo' )のwidthとheightには2倍のサイズを指定し、flex-widthとflex-heightで比率の自由度を確保します。the_custom_logo()が出力するwidth・height属性とheight: autoの組み合わせで、レイアウトのずれを防ぎます。get_custom_logo_image_attributesフィルターでsizesを実際の表示幅に合わせると、無駄に大きな画像の読み込みを減らせます。- SVGロゴはサニタイズするプラグインを使い、アップロード権限を絞って扱います。