ログイン画面の背景を変更する方法

WordPressのログイン画面の背景をカスタマイズすると、サイト全体のブランドイメージを統一できます。ここでは functions.php を使った方法と、テーマ別CSS例をご紹介します。

実装のポイント

• ログイン画面は wp-login.php で表示されます。
• 背景画像や色を変更する場合は login_enqueue_scripts フックを使用します。
• テーマごとのスタイル調整も可能です（Lightning / Cocoon）。

functions.php にコードを追加

// ログイン画面の背景をカスタマイズ
function custom_login_background() {
    echo '<style type="text/css">
        body.login {
            background: #f0f8ff url(' . get_stylesheet_directory_uri() . '/images/login-bg.jpg) no-repeat center center;
            background-size: cover;
        }
        body.login #login h1 a {
            background-image: url(' . get_stylesheet_directory_uri() . '/images/logo.png);
            width: 200px;
            height: 100px;
            background-size: contain;
        }
    </style>';
}
add_action('login_enqueue_scripts', 'custom_login_background');

汎用CSS

/* 汎用ログイン画面背景 */
body.login {
    background: #f0f8ff url('images/login-bg.jpg') no-repeat center center;
    background-size: cover;
}
body.login #login h1 a {
    background-image: url('images/logo.png');
    width: 200px;
    height: 100px;
    background-size: contain;
}

子テーマのディレクトリ構造

代用プラグイン

もしPHPでのカスタマイズが難しい場合は、以下のプラグインを利用すると簡単に背景やロゴを変更できます。

• Custom Login Page Customizer
• LoginPress – Custom Login Page Customizer

まとめ

functions.php にコードを追加することで、ログイン画面の背景やロゴを簡単にカスタマイズできます。テーマやプラグインを併用すれば、より細かいデザイン調整も可能です。