2026年5月22日

WordPressのログイン画面の背景を変更する方法｜画像・色をコードで指定

ログイン・アクセス

WordPress のログイン画面（wp-login.php）の背景は、初期状態では薄い灰色（#f0f0f1）です。サイトの雰囲気に合わせて画像や色に変えたいときは、ログイン画面専用のフックで CSS を追加します。

この記事のフックと読み込み順は、2026年11月時点の WordPress（7.1 系）の wp-login.php で確認しています。

テーマの style.css や「追加 CSS」では変わらない

ログイン画面に背景の CSS を書くとき、最初につまずくのがこの点です。

テーマの style.css は、テーマが wp_enqueue_scripts などで読み込むものです。ログイン画面ではこのフックが実行されないため、style.css に body.login { … } と書いても反映されません。
「外観」→「カスタマイズ」→「追加 CSS」の内容は、wp_head で出力されます。ログイン画面は wp_head ではなく専用の login_head を使うので、こちらも反映されません。

ログイン画面に CSS を追加するには、login_enqueue_scripts アクションを使います。

コードを置く場所

次のどちらかに書きます。

子テーマの functions.php: テーマを変えると背景も元に戻ります。
wp-content/mu-plugins/ に置いた PHP ファイル: テーマを変えても残ります。フォルダーが無ければ作り、login-background.php のような名前で保存すると自動で読み込まれます。

親テーマの functions.php に書くと、テーマの更新で消えます。

背景を画像にする

画像を子テーマに置く場合

背景にする画像を、子テーマのフォルダーの中の images/login-bg.jpg に FTP などでアップロードします。次のコードは、WordPress 標準のログイン画面用スタイル（login）の後ろに CSS を追加します。

<?php
// ログイン画面の背景を子テーマの画像にする
add_action( 'login_enqueue_scripts', function () {
	$image_url = get_stylesheet_directory_uri() . '/images/login-bg.jpg';

	$css = sprintf(
		'body.login {
			background-color: #1d2327;
			background-image: url("%s");
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}',
		esc_url( $image_url )
	);

	wp_add_inline_style( 'login', $css );
} );

get_stylesheet_directory_uri() は、使用中のテーマ（子テーマを使っていれば子テーマ）のフォルダーの URL を返します。
background-color は、画像の読み込み前や読み込みに失敗したときに表示される色です。画像の色に近いものにしておくと、表示が切り替わるときに目立ちません。
background-size: cover で、画面の大きさに合わせて画像を拡大・縮小し、余白が出ないようにします。端が切れるので、大事な部分が中央に来る画像を選びます。

wp_add_inline_style() は、指定したスタイルが読み込まれるときに、その直後へ CSS を出力する関数です。ログイン画面では login_enqueue_scripts より前に login スタイルが読み込み予定に入っているので、この組み合わせで標準の CSS を上書きできます。

メディアライブラリの画像を使う場合

FTP を使わずに、管理画面の「メディア」からアップロードした画像を使うこともできます。メディアライブラリで画像を開いたときの URL に出る数字（グリッド表示なら item=123、画像の編集画面なら post=123）が添付ファイルの ID です。

<?php
// メディアライブラリの画像（添付ファイルID 123）をログイン画面の背景にする
add_action( 'login_enqueue_scripts', function () {
	$image_url = wp_get_attachment_image_url( 123, 'full' );
	if ( ! $image_url ) {
		return; // 画像が見つからなければ何もしない
	}

	$css = sprintf(
		'body.login { background: #1d2327 url("%s") center / cover no-repeat; }',
		esc_url( $image_url )
	);

	wp_add_inline_style( 'login', $css );
} );

123 は実際の ID に置き換えます。画像をメディアライブラリから削除すると背景も消えるので、削除しないように注意してください。

背景を色やグラデーションにする

画像を使わない場合は、CSS の値を変えるだけです。

<?php
add_action( 'login_enqueue_scripts', function () {
	$css = 'body.login { background: linear-gradient(135deg, #0f2027 0%, #2c5364 100%); }';
	wp_add_inline_style( 'login', $css );
} );

単色にするなら background: #1d2327; のように書きます。

暗い背景で文字を読みやすくする

ログインフォームの枠の中は白い背景のままですが、フォームの下にある「パスワードをお忘れですか ?」（#nav）と「← サイト名へ移動」（#backtoblog）のリンク、プライバシーポリシーへのリンクは、背景の上に直接表示されます。背景を暗くすると読みにくくなるので、色を合わせて変えます。

<?php
add_action( 'login_enqueue_scripts', function () {
	$css = '
		.login #nav a,
		.login #backtoblog a,
		.login .privacy-policy-page-link a {
			color: #ffffff;
		}
		.login #nav a:hover,
		.login #backtoblog a:hover {
			color: #c3c4c7;
		}
	';
	wp_add_inline_style( 'login', $css );
} );

背景画像の模様が細かくて文字が読みにくい場合は、画像の上に半透明の色を重ねる方法もあります。

body.login {
	background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("https://example.com/wp-content/themes/my-child/images/login-bg.jpg");
	background-size: cover;
	background-position: center;
}

この CSS を使うときは、上の PHP の $css に入れて wp_add_inline_style() で出力します。URL は自分の画像のものに置き換えます。

変更を確認する

ログアウトするか、ブラウザのプライベートウィンドウで https://example.com/wp-login.php を開きます（example.com は自分のサイト）。
背景が変わらない場合は、ブラウザのキャッシュを消して再読み込みします。
それでも変わらない場合は、ページのソースで login-inline-css という ID の style 要素が出力されているかを確認します。無ければコードが読み込まれていません（ファイルの場所、子テーマが有効か、PHP の書き間違いを確認）。
style 要素があるのに画像が出ない場合は、CSS の中の画像 URL をブラウザで直接開き、画像が表示されるかを確かめます。

ログイン画面の URL を変えるプラグインを使っている場合は、変更後の URL で確認します。

注意事項

背景画像は、ログイン画面を開くたびに読み込まれます。横幅 1920px 程度で、ファイルサイズを小さくした JPEG や WebP にすると表示が遅くなりにくくなります。
背景を変えても、ログインの安全性は変わりません。不正ログイン対策は、ログイン試行回数の制限や二段階認証で行います。
ログイン画面用のプラグインで背景を設定している場合、この記事のコードと CSS が重なって思った表示にならないことがあります。どちらか一方にしてください。
WordPress の更新でログイン画面の HTML やクラス名が変わることがあります。更新後は表示を確認してください。

まとめ

ログイン画面にはテーマの style.css も「追加 CSS」も読み込まれないので、login_enqueue_scripts で CSS を追加する。
wp_add_inline_style( 'login', $css ) で、標準のスタイルの後ろに body.login の背景を書く。
画像は子テーマに置くか、メディアライブラリの添付ファイル ID から URL を取る。
暗い背景にしたら、#nav と #backtoblog のリンクの色も変える。

ロゴやメッセージなど、背景以外の部分を変える方法は、WordPressのログインページをカスタマイズする方法で説明しています。不正ログイン対策はWordPressのログイン試行回数を制限する方法を参照してください。