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

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

1 実装のポイント

• ログイン画面は wp-login.php で表示されます。
• 背景画像や色を変更する場合は login_enqueue_scripts フックを使用します。

2 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');

3 汎用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;                 /* 画像を縦横比を維持してボックス内に収める */
}

3.1 ディレクトリ構造

4 代用プラグイン

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

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

5 まとめ

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