WordPress 3分間フッキング：ログイン画面を自分好みにカスタマイズする方法

こんにちは！今回も「WordPress 3分間フッキング」シリーズの新記事をお届けします。

「WordPress 3分間フッキング」は、WordPressのフック（アクション・フィルター）を活用して、プラグインをインストールせずに簡単にサイトをカスタマイズする方法をわかりやすく解説するシリーズです。あの料理番組「3分間クッキング」のように、短時間で実用的なテクニックをマスターしていきましょう！

ログイン画面をブランディングする意義

WordPressの管理画面にログインする際に表示されるデフォルトのログイン画面。このページは多くのサイト運営者が毎日目にする画面ですが、WordPressロゴが表示されているだけの味気ないデザインになっています。

このログイン画面をカスタマイズすることで、以下のようなメリットがあります：

自社やクライアントのブランディングを強化できる
WordPressサイトであることを隠せるため、セキュリティ面でも有利
ユーザー体験の向上やプロフェッショナルな印象を与えられる

今回は、プラグインを使わずにWordPressのログイン画面をカスタマイズする方法を紹介します。ロゴの変更からスタイルシートの適用まで、ブランディングを強化する簡単な方法をマスターしましょう！

WordPressログイン画面のカスタマイズ前と後の比較

ログインロゴを自社ロゴに変更する

まずは、WordPressのデフォルトロゴを自社や顧客のロゴに変更する方法を紹介します。これには login_head アクションフックを使用します。

コードの実装

以下のコードを functions.php に追加します：

// ログイン画面のロゴを変更
function wp3min_custom_login_logo() {
    ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/custom-login-logo.png);
            width: 320px;
            height: 120px;
            background-size: contain;
            background-repeat: no-repeat;
            padding-bottom: 10px;
        }
    </style>
    <?php
}
add_action('login_head', 'wp3min_custom_login_logo');

// ログイン画面のロゴを変更

function wp3min_custom_login_logo() {

#login h1 a, .login h1 a {

background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/custom-login-logo.png);

width: 320px;

height: 120px;

background-size: contain;

background-repeat: no-repeat;

padding-bottom: 10px;

}

</style>

<?php

}

add_action('login_head', 'wp3min_custom_login_logo');

コードの解説

1. wp3min_custom_login_logo 関数を定義し、login_head アクションフックに登録しています。

2. このフックはログイン画面のhead部分に実行されるため、CSSを追加するのに最適です。

3. get_stylesheet_directory_uri() 関数を使って、現在有効なテーマ（子テーマがある場合は子テーマ）のディレクトリURIを取得しています。

4. /images/custom-login-logo.png は、あなたのテーマフォルダ内に配置したカスタムロゴの場所です。この画像ファイルを実際に作成してテーマフォルダにアップロードする必要があります。

5. width、height、background-size などのCSSプロパティで、ロゴの表示サイズや配置を調整しています。

このコードでは、スタイルを直接出力していますが、より良い方法として後ほど紹介する login_enqueue_scripts フックを使う方法もあります。スタイルシートを適切に読み込むことで、コードの整理がしやすくなります。

ロゴのリンク先とタイトルを変更する

デフォルトでは、ログイン画面のロゴをクリックすると wordpress.org に移動します。これを自分のサイトのURLに変更しましょう。また、ロゴにマウスを乗せたときに表示されるタイトルも変更できます。

// ログインロゴのリンク先を変更
function wp3min_login_logo_url() {
    return home_url();
}
add_filter('login_headerurl', 'wp3min_login_logo_url');

// ログインロゴのタイトルテキストを変更
function wp3min_login_logo_url_title() {
    return get_bloginfo('name');
}
add_filter('login_headertext', 'wp3min_login_logo_url_title');

// ログインロゴのリンク先を変更

function wp3min_login_logo_url() {

return home_url();

}

add_filter('login_headerurl', 'wp3min_login_logo_url');

// ログインロゴのタイトルテキストを変更

function wp3min_login_logo_url_title() {

return get_bloginfo('name');

}

add_filter('login_headertext', 'wp3min_login_logo_url_title');

コードの解説

1. login_headerurl フィルターを使って、ロゴのリンク先をサイトのホームURLに変更しています。

2. login_headertext フィルター（WordPress 5.2以降）を使って、ロゴにマウスを乗せたときに表示されるタイトルテキストをサイト名に変更しています。

3. WordPress 5.2より前のバージョンでは、login_headertitle フィルターを使用していましたが、現在は非推奨です。

ログイン画面全体のスタイルをカスタマイズする

次に、login_enqueue_scripts アクションフックを使って、ログイン画面全体のスタイルをカスタマイズする方法を紹介します。このフックを使うと、外部CSSファイルを適切に読み込むことができます。

// ログイン画面用のカスタムCSSを読み込む
function wp3min_enqueue_login_style() {
    wp_enqueue_style('custom-login', get_stylesheet_directory_uri() . '/css/custom-login.css', array(), '1.0.0');
}
add_action('login_enqueue_scripts', 'wp3min_enqueue_login_style');

// ログイン画面用のカスタムCSSを読み込む

function wp3min_enqueue_login_style() {

wp_enqueue_style('custom-login', get_stylesheet_directory_uri() . '/css/custom-login.css', array(), '1.0.0');

}

add_action('login_enqueue_scripts', 'wp3min_enqueue_login_style');

次に、テーマのフォルダ内に /css/custom-login.css ファイルを作成し、以下のようなスタイルを追加します。これはあくまで一例なので、ブランドカラーや好みに合わせてカスタマイズしてください：

/* ログイン画面の背景 */
body.login {
    background-color: #f5f5f5;
    background-image: url('../images/login-background.jpg');
    background-size: cover;
    background-position: center;
}

/* ログインフォームのスタイル */
#loginform {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* ログインボタン */
#wp-submit {
    background-color: #0073aa; /* ブランドカラーに変更 */
    border-color: #0073aa;
    border-radius: 4px;
    text-shadow: none;
    box-shadow: none;
    transition: background-color 0.2s ease;
}

#wp-submit:hover {
    background-color: #005d8c;
}

/* リンクカラー */
.login #nav a, .login #backtoblog a {
    color: #0073aa;
}

.login #nav a:hover, .login #backtoblog a:hover {
    color: #005d8c;
}

/* エラーメッセージ */
.login .message, .login .success {
    border-left: 4px solid #0073aa;
}

.login #login_error {
    border-left: 4px solid #d54e21;
}

/* ログイン画面の背景 */

body.login {

background-color: #f5f5f5;

background-image: url('../images/login-background.jpg');

background-size: cover;

background-position: center;

}

/* ログインフォームのスタイル */

#loginform {

background-color: rgba(255, 255, 255, 0.9);

border-radius: 8px;

border: none;

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}

/* ログインボタン */

#wp-submit {

background-color: #0073aa; /* ブランドカラーに変更 */

border-color: #0073aa;

border-radius: 4px;

text-shadow: none;

box-shadow: none;

transition: background-color 0.2s ease;

}

#wp-submit:hover {

background-color: #005d8c;

}

/* リンクカラー */

.login #nav a, .login #backtoblog a {

color: #0073aa;

}

.login #nav a:hover, .login #backtoblog a:hover {

color: #005d8c;

}

/* エラーメッセージ */

.login .message, .login .success {

border-left: 4px solid #0073aa;

}

.login #login_error {

border-left: 4px solid #d54e21;

}

コードの解説

1. login_enqueue_scripts アクションフックを使用して、ログイン画面で読み込むCSSファイルを登録しています。

2. wp_enqueue_style 関数はWordPressの標準的なスタイル読み込み方法で、依存関係やバージョン管理も適切に扱えます。

3. CSSファイルでは、ログイン画面の背景、フォーム、ボタン、リンクなどの要素をカスタマイズしています。

4. background-image を使って、ログイン画面に背景画像を設定することもできます。

外部CSSファイルを使用する方法は、コードの管理がしやすく、キャッシュの恩恵も受けられるため、インラインスタイルよりも推奨されます。特に複雑なスタイリングを行う場合に役立ちます。

ログインフォームのその他のカスタマイズ

さらにログイン画面をカスタマイズするために、以下のような追加機能も実装できます：

1. ログインフォームの下にカスタムテキストを追加する

// ログインフォームの下にカスタムテキストを追加
function wp3min_login_footer_text() {
    echo '<div class="login-footer-text" style="text-align: center; margin-top: 20px; color: #555;">';
    echo 'サポートが必要な場合は <a href="mailto:support@example.com">support@example.com</a> にお問い合わせください。';
    echo '</div>';
}
add_action('login_footer', 'wp3min_login_footer_text');

// ログインフォームの下にカスタムテキストを追加

function wp3min_login_footer_text() {

echo '<div class="login-footer-text" style="text-align: center; margin-top: 20px; color: #555;">';

echo 'サポートが必要な場合は <a href="mailto:support@example.com">support@example.com</a> にお問い合わせください。';

echo '</div>';

}

add_action('login_footer', 'wp3min_login_footer_text');

2. ログインフォームのラベルを変更する

// ログインフォームのラベルを変更
function wp3min_change_login_form_labels($translated_text, $text, $domain) {
    // ドメインが 'default' でテキストが一致する場合のみ変更
    if ($domain === 'default') {
        switch ($translated_text) {
            case 'ユーザー名またはメールアドレス':
                return 'メールアドレス';
            case 'パスワード':
                return '会員パスワード';
            case 'ログイン状態を保存する':
                return 'ログイン情報を記憶する';
        }
    }
    return $translated_text;
}
add_filter('gettext', 'wp3min_change_login_form_labels', 20, 3);

// ログインフォームのラベルを変更

function wp3min_change_login_form_labels($translated_text, $text, $domain) {

// ドメインが 'default' でテキストが一致する場合のみ変更

if ($domain === 'default') {

switch ($translated_text) {

case 'ユーザー名またはメールアドレス':

return 'メールアドレス';

case 'パスワード':

return '会員パスワード';

case 'ログイン状態を保存する':

return 'ログイン情報を記憶する';

}

return $translated_text;

}

add_filter('gettext', 'wp3min_change_login_form_labels', 20, 3);

3. カスタムJavaScriptを追加する

// ログイン画面にカスタムJavaScriptを追加
function wp3min_enqueue_login_script() {
    wp_enqueue_script('custom-login', get_stylesheet_directory_uri() . '/js/custom-login.js', array('jquery'), '1.0.0', true);
}
add_action('login_enqueue_scripts', 'wp3min_enqueue_login_script');

// ログイン画面にカスタムJavaScriptを追加

function wp3min_enqueue_login_script() {

wp_enqueue_script('custom-login', get_stylesheet_directory_uri() . '/js/custom-login.js', array('jquery'), '1.0.0', true);

}

add_action('login_enqueue_scripts', 'wp3min_enqueue_login_script');

そして、/js/custom-login.js ファイルを作成して以下のようなスクリプトを追加できます：

jQuery(document).ready(function($) {
    // ユーザー名フィールドにプレースホルダーを追加
    $('#user_login').attr('placeholder', 'メールアドレスを入力');
    
    // パスワードフィールドにプレースホルダーを追加
    $('#user_pass').attr('placeholder', 'パスワードを入力');
    
    // アニメーションを追加
    $('#login').hide().fadeIn(1000);
});

jQuery(document).ready(function($) {

// ユーザー名フィールドにプレースホルダーを追加

$('#user_login').attr('placeholder', 'メールアドレスを入力');

// パスワードフィールドにプレースホルダーを追加

$('#user_pass').attr('placeholder', 'パスワードを入力');

// アニメーションを追加

$('#login').hide().fadeIn(1000);

});

カスタマイズ対象	使用するフック	カスタマイズ内容
ログインロゴ	login_head または login_enqueue_scripts	ロゴ画像、サイズ、位置の変更
ロゴのリンク先	login_headerurl	クリック時の遷移先URLの変更
ロゴのタイトル	login_headertext	ホバー時に表示されるテキストの変更
全体のスタイル	login_enqueue_scripts	背景、フォーム、ボタン、色などの変更
追加テキスト	login_footer	フォーム下部にテキストやリンクを追加
ラベル変更	gettext	フォーム内のラベルテキストの変更
動作変更	login_enqueue_scripts (JS用)	プレースホルダーの追加やアニメーション

ログイン画面をカスタマイズする際は、過度な変更によってユーザビリティを損なわないよう注意が必要です。また、スタイルやスクリプトはWordPressのバージョンアップで互換性が失われる可能性もあるため、定期的に確認するようにしましょう。

完全なカスタマイズ例

ここでは、上記で紹介したカスタマイズを組み合わせた完全な実装例を紹介します。以下のコードをテーマの functions.php に追加します：

/**
 * WordPress ログイン画面のカスタマイズ
 */

// ログイン画面用のスタイルとスクリプトを登録
function wp3min_login_assets() {
    // カスタムCSSを読み込み
    wp_enqueue_style('custom-login', get_stylesheet_directory_uri() . '/css/custom-login.css', array(), '1.0.0');
    
    // カスタムJavaScriptを読み込み
    wp_enqueue_script('custom-login', get_stylesheet_directory_uri() . '/js/custom-login.js', array('jquery'), '1.0.0', true);
}
add_action('login_enqueue_scripts', 'wp3min_login_assets');

// ログインロゴのリンク先を変更
function wp3min_login_logo_url() {
    return home_url();
}
add_filter('login_headerurl', 'wp3min_login_logo_url');

// ログインロゴのタイトルテキストを変更
function wp3min_login_logo_url_title() {
    return get_bloginfo('name');
}
add_filter('login_headertext', 'wp3min_login_logo_url_title');

// ログインフォームのラベルを変更
function wp3min_change_login_form_labels($translated_text, $text, $domain) {
    if ($domain === 'default') {
        switch ($translated_text) {
            case 'ユーザー名またはメールアドレス':
                return 'メールアドレス';
            case 'パスワード':
                return 'パスワード';
        }
    }
    return $translated_text;
}
add_filter('gettext', 'wp3min_change_login_form_labels', 20, 3);

/**

* WordPress ログイン画面のカスタマイズ

// ログイン画面用のスタイルとスクリプトを登録

function wp3min_login_assets() {

// カスタムCSSを読み込み

wp_enqueue_style('custom-login', get_stylesheet_directory_uri() . '/css/custom-login.css', array(), '1.0.0');

// カスタムJavaScriptを読み込み

wp_enqueue_script('custom-login', get_stylesheet_directory_uri() . '/js/custom-login.js', array('jquery'), '1.0.0', true);

}

add_action('login_enqueue_scripts', 'wp3min_login_assets');

// ログインロゴのリンク先を変更

function wp3min_login_logo_url() {

return home_url();

}

add_filter('login_headerurl', 'wp3min_login_logo_url');

// ログインロゴのタイトルテキストを変更

function wp3min_login_logo_url_title() {

return get_bloginfo('name');

}

add_filter('login_headertext', 'wp3min_login_logo_url_title');

// ログインフォームのラベルを変更

function wp3min_change_login_form_labels($translated_text, $text, $domain) {

if ($domain === 'default') {

switch ($translated_text) {

case 'ユーザー名またはメールアドレス':

return 'メールアドレス';

case 'パスワード':

return 'パスワード';

}

return $translated_text;

}

add_filter('gettext', 'wp3min_change_login_form_labels', 20, 3);

さらに、冒頭でもご紹介したこちらのデザインのようにレイアウトを整えるためには、/css/custom-login.css ファイルを作成して以下のコードを追加します：

/**
 * カスタムログイン画面のスタイル
 */

/* ロゴの設定 */
body.login {
    /* ======================================== */
    /* ▼ 背景画像を指定してください ▼ */
    /* 例: background-image: url('https://example.com/your-background-image.jpg'); */
    /* ======================================== */
    background-image: url('https://edel-hearts.com/wp-content/uploads/20250514-U8A4J6.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 100vh; /* 画面全体の高さ */
    display: flex; /* ログインエリアを中央寄せ */
    align-items: center;
    justify-content: center;
    padding: 20px; /* 小画面時に端に寄らないように */
    box-sizing: border-box;
    flex-wrap: wrap;
}

/* --- ログインエリア全体のコンテナ --- */
#login {
    width: 100%; /* モバイルで幅を確保 */
    max-width: 380px; /* フォームの最大幅を少し広げる (任意) */
    padding: 0; /* body側でpaddingするのでリセット */
    margin: 0 auto;
}

/* --- ロゴとサイトタイトルの表示 --- */
#login h1 {
    margin-bottom: 30px; /* ロゴエリアとフォームの間の余白 */
    text-align: center; /* 中身を中央揃え */
}

#login h1 a {
    display: inline-block; /* 幅と高さを持ちつつ中央揃えしやすくする */
    text-decoration: none;
    /* サイトタイトル (ロゴの下の文字) のスタイル */
    color: #f0f0f0; /* 文字色 (背景に合わせて調整) */
    font-size: 15px; /* 文字サイズ */
    font-weight: normal;
    line-height: 1.5;
}

/* ロゴ画像を表示するための領域 (::before擬似要素を使用) */
#login h1 a::before {
    content: '';
    display: block;
    background-size: contain; /* 画像をエリア内に収める */
    background-position: center center;
    background-repeat: no-repeat;
    width: 200px; /* ロゴの幅 (ユーザー指定) */
    height: 80px; /* ロゴの高さ (実際のロゴの縦横比に合わせて調整してください) */
    margin: 0 auto 10px auto; /* ロゴ画像の下に余白 (サイトタイトルとの間) */
}

/* --- ログインフォーム本体のスタイル --- */
#loginform {
    background-color: rgba(255, 255, 255, 0.15); /* 半透明の白背景 */
    backdrop-filter: blur(10px); /* 背景のブラー効果 */
    -webkit-backdrop-filter: blur(10px); /* Safari用 */
    border-radius: 15px; /* 角を丸くする */
    padding: 35px 30px; /* 内側の余白 */
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25); /* 少し調整した影 */
    border: 1px solid rgba(255, 255, 255, 0.18); /* わずかな境界線 */
    box-sizing: border-box;
}

/* フォーム内のラベル */
#loginform label {
    color: #f0f0f0; /* 明るい色のラベルテキスト */
    font-weight: 500;
    font-size: 13px;
}

/* フォームの入力フィールド (ユーザー名・パスワード) */
#loginform input[type='text'],
#loginform input[type='password'] {
    background-color: rgba(255, 255, 255, 0.2); /* 少し透明な背景 */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: #fff; /* 入力文字の色 */
    margin-top: 5px; /* ラベルとの間隔 */
    margin-bottom: 20px; /* フィールド間のマージン */
    padding: 12px 15px;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: none;
}
#loginform input[type='text']:focus,
#loginform input[type='password']:focus {
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.25);
    outline: none;
}

/* 「私を記憶する」チェックボックスとラベル */
#loginform .forgetmenot {
    margin-top: -10px; /* 上のフィールドとの間隔調整 */
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}
#loginform .forgetmenot label {
    color: #e0e0e0;
    font-size: 12px;
    padding-left: 6px;
}
#loginform .forgetmenot input[type='checkbox'] {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}
#loginform .forgetmenot input[type='checkbox']:checked:before {
    color: #007cba;
}

/* ログインボタン */
#loginform input[type='submit'] {
    background-color: #007cba;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: bold;
    padding: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease;
    width: 100%;
    cursor: pointer;
    font-size: 14px;
    margin-top: 10px;
}
#loginform input[type='submit']:hover {
    background-color: #006ba1;
    transform: translateY(-1px);
}
#loginform input[type='submit']:active {
    transform: translateY(0px);
}

/* --- ナビゲーションリンク（パスワード忘れなど）と「サイトへ戻る」リンク --- */
#nav,
#backtoblog {
    margin-top: 20px;
    padding: 0;
    text-align: center;
}
#nav a,
#backtoblog a {
    color: #f0f0f0;
    text-decoration: none;
    font-size: 12px;
    transition: color 0.2s ease-in-out;
    margin: 0 5px; /* リンク間のスペース */
}
#nav a:hover,
#backtoblog a:hover {
    color: #fff;
}

/* 「サイトへ戻る」リンクに文字の影を追加 */
#backtoblog a {
    /* color: #fff !important; /* 必要であれば!importantも使用 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* --- エラーメッセージや通知メッセージのスタイル --- */
#login_error,
.login .message {
    border-radius: 8px;
    border-left-width: 5px;
    margin: 20px auto; /* フォームの上または下に表示される場合のマージン */
    padding: 15px 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    width: 100%;
    max-width: 380px; /* #login の幅と合わせる */
    box-sizing: border-box;
}
#login_error {
    border-left-color: #dc3232;
}
.login .message {
    border-left-color: #00a0d2;
}

/* --- プレースホルダーの文字色（任意） --- */
#loginform input[type='text']::placeholder,
#loginform input[type='password']::placeholder {
    color: rgba(255, 255, 255, 0.5);
    opacity: 1;
}
#loginform input[type='text']::-webkit-input-placeholder,
#loginform input[type='password']::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.5);
}
#loginform input[type='text']:-ms-input-placeholder,
#loginform input[type='password']:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.5);
}
#loginform input[type='text']::-ms-input-placeholder,
#loginform input[type='password']::-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.5);
}

#loginform .wp-hide-pw {
    margin-top: 10px !important;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

/**

* カスタムログイン画面のスタイル

/* ロゴの設定 */

body.login {

/* ======================================== */

/* ▼ 背景画像を指定してください ▼ */

/* 例: background-image: url('https://example.com/your-background-image.jpg'); */

/* ======================================== */

background-image: url('https://edel-hearts.com/wp-content/uploads/20250514-U8A4J6.webp');

background-size: cover;

background-position: center center;

background-repeat: no-repeat;

min-height: 100vh; /* 画面全体の高さ */

display: flex; /* ログインエリアを中央寄せ */

align-items: center;

justify-content: center;

padding: 20px; /* 小画面時に端に寄らないように */

box-sizing: border-box;

flex-wrap: wrap;

}

/* --- ログインエリア全体のコンテナ --- */

#login {

width: 100%; /* モバイルで幅を確保 */

max-width: 380px; /* フォームの最大幅を少し広げる (任意) */

padding: 0; /* body側でpaddingするのでリセット */

margin: 0 auto;

}

/* --- ロゴとサイトタイトルの表示 --- */

#login h1 {

margin-bottom: 30px; /* ロゴエリアとフォームの間の余白 */

text-align: center; /* 中身を中央揃え */

}

#login h1 a {

display: inline-block; /* 幅と高さを持ちつつ中央揃えしやすくする */

text-decoration: none;

/* サイトタイトル (ロゴの下の文字) のスタイル */

color: #f0f0f0; /* 文字色 (背景に合わせて調整) */

font-size: 15px; /* 文字サイズ */

font-weight: normal;

line-height: 1.5;

}

/* ロゴ画像を表示するための領域 (::before擬似要素を使用) */

#login h1 a::before {

content: '';

display: block;

background-size: contain; /* 画像をエリア内に収める */

background-position: center center;

background-repeat: no-repeat;

width: 200px; /* ロゴの幅 (ユーザー指定) */

height: 80px; /* ロゴの高さ (実際のロゴの縦横比に合わせて調整してください) */

margin: 0 auto 10px auto; /* ロゴ画像の下に余白 (サイトタイトルとの間) */

}

/* --- ログインフォーム本体のスタイル --- */

#loginform {

background-color: rgba(255, 255, 255, 0.15); /* 半透明の白背景 */

backdrop-filter: blur(10px); /* 背景のブラー効果 */

-webkit-backdrop-filter: blur(10px); /* Safari用 */

border-radius: 15px; /* 角を丸くする */

padding: 35px 30px; /* 内側の余白 */

box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25); /* 少し調整した影 */

border: 1px solid rgba(255, 255, 255, 0.18); /* わずかな境界線 */

box-sizing: border-box;

}

/* フォーム内のラベル */

#loginform label {

color: #f0f0f0; /* 明るい色のラベルテキスト */

font-weight: 500;

font-size: 13px;

}

/* フォームの入力フィールド (ユーザー名・パスワード) */

#loginform input[type='text'],

#loginform input[type='password'] {

background-color: rgba(255, 255, 255, 0.2); /* 少し透明な背景 */

border: 1px solid rgba(255, 255, 255, 0.3);

border-radius: 8px;

color: #fff; /* 入力文字の色 */

margin-top: 5px; /* ラベルとの間隔 */

margin-bottom: 20px; /* フィールド間のマージン */

padding: 12px 15px;

font-size: 16px;

width: 100%;

box-sizing: border-box;

box-shadow: none;

}

#loginform input[type='text']:focus,

#loginform input[type='password']:focus {

border-color: rgba(255, 255, 255, 0.7);

box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);

background-color: rgba(255, 255, 255, 0.25);

outline: none;

}

/* 「私を記憶する」チェックボックスとラベル */

#loginform .forgetmenot {

margin-top: -10px; /* 上のフィールドとの間隔調整 */

margin-bottom: 20px;

display: flex;

align-items: center;

}

#loginform .forgetmenot label {

color: #e0e0e0;

font-size: 12px;

padding-left: 6px;

}

#loginform .forgetmenot input[type='checkbox'] {

background: rgba(255, 255, 255, 0.2);

border: 1px solid rgba(255, 255, 255, 0.3);

border-radius: 4px;

}

#loginform .forgetmenot input[type='checkbox']:checked:before {

color: #007cba;

}

/* ログインボタン */

#loginform input[type='submit'] {

background-color: #007cba;

border: none;

border-radius: 8px;

color: #fff;

font-weight: bold;

padding: 12px;

text-transform: uppercase;

letter-spacing: 0.5px;

transition: background-color 0.2s ease-in-out, transform 0.1s ease;

width: 100%;

cursor: pointer;

font-size: 14px;

margin-top: 10px;

}

#loginform input[type='submit']:hover {

background-color: #006ba1;

transform: translateY(-1px);

}

#loginform input[type='submit']:active {

transform: translateY(0px);

}

/* --- ナビゲーションリンク（パスワード忘れなど）と「サイトへ戻る」リンク --- */

#nav,

#backtoblog {

margin-top: 20px;

padding: 0;

text-align: center;

}

#nav a,

#backtoblog a {

color: #f0f0f0;

text-decoration: none;

font-size: 12px;

transition: color 0.2s ease-in-out;

margin: 0 5px; /* リンク間のスペース */

}

#nav a:hover,

#backtoblog a:hover {

color: #fff;

}

/* 「サイトへ戻る」リンクに文字の影を追加 */

#backtoblog a {

/* color: #fff !important; /* 必要であれば!importantも使用 */

text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);

}

/* --- エラーメッセージや通知メッセージのスタイル --- */

#login_error,

.login .message {

border-radius: 8px;

border-left-width: 5px;

margin: 20px auto; /* フォームの上または下に表示される場合のマージン */

padding: 15px 20px;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

background-color: rgba(255, 255, 255, 0.9);

backdrop-filter: blur(5px);

-webkit-backdrop-filter: blur(5px);

width: 100%;

max-width: 380px; /* #login の幅と合わせる */

box-sizing: border-box;

}

#login_error {

border-left-color: #dc3232;

}

.login .message {

border-left-color: #00a0d2;

}

/* --- プレースホルダーの文字色（任意） --- */

#loginform input[type='text']::placeholder,

#loginform input[type='password']::placeholder {

color: rgba(255, 255, 255, 0.5);

opacity: 1;

}

#loginform input[type='text']::-webkit-input-placeholder,

#loginform input[type='password']::-webkit-input-placeholder {

color: rgba(255, 255, 255, 0.5);

}

#loginform input[type='text']:-ms-input-placeholder,

#loginform input[type='password']:-ms-input-placeholder {

color: rgba(255, 255, 255, 0.5);

}

#loginform input[type='text']::-ms-input-placeholder,

#loginform input[type='password']::-ms-input-placeholder {

color: rgba(255, 255, 255, 0.5);

}

#loginform .wp-hide-pw {

margin-top: 10px !important;

}

最後に、/js/custom-login.js ファイルを作成して以下のコードを追加します：

/**
 * カスタムログイン画面のJavaScript
 */
jQuery(document).ready(function($) {
    // プレースホルダーを追加
    $('#user_login').attr('placeholder', 'メールアドレスを入力');
    $('#user_pass').attr('placeholder', 'パスワードを入力');
    
    // アニメーション効果
    $('#login').css('opacity', '0').animate({
        opacity: 1
    }, 800);
    
    // 「パスワードを忘れた場合」リンクにクラスを追加
    $('p#nav a').addClass('forgot-password-link');
});

/**

* カスタムログイン画面のJavaScript

jQuery(document).ready(function($) {

// プレースホルダーを追加

$('#user_login').attr('placeholder', 'メールアドレスを入力');

$('#user_pass').attr('placeholder', 'パスワードを入力');

// アニメーション効果

$('#login').css('opacity', '0').animate({

opacity: 1

}, 800);

// 「パスワードを忘れた場合」リンクにクラスを追加

$('p#nav a').addClass('forgot-password-link');

});

実践的なカスタマイズポイント

より実践的なカスタマイズのためのポイントをいくつか紹介します：

1. レスポンシブデザインの対応

モバイルデバイスからのログインも快適にするために、レスポンシブ対応も忘れずに行いましょう：

/* レスポンシブ対応 */
@media (max-width: 768px) {
    /* ログインエリア全体のコンテナ */
    body.login div#login {
        width: 90%; /* 画面幅に対して90%に */
    }
}

/* レスポンシブ対応 */

@media (max-width: 768px) {

/* ログインエリア全体のコンテナ */

body.login div#login {

width: 90%; /* 画面幅に対して90%に */

}

2. セキュリティ強化のためのカスタマイズ

ログイン画面のURLを変更することで、セキュリティを強化することもできます。これには別途プラグインが必要になりますが、カスタマイズと組み合わせると効果的です。

3. エラーメッセージのカスタマイズ

デフォルトのエラーメッセージは具体的すぎる場合があります。これをカスタマイズすることで、セキュリティとユーザー体験を改善できます：

// ログインエラーメッセージをカスタマイズ
function wp3min_login_error_message() {
    return 'ログイン情報が正しくありません。もう一度お試しください。';
}
add_filter('login_errors', 'wp3min_login_error_message');

// ログインエラーメッセージをカスタマイズ

function wp3min_login_error_message() {

return 'ログイン情報が正しくありません。もう一度お試しください。';

}

add_filter('login_errors', 'wp3min_login_error_message');

WordPressのログイン画面をカスタマイズすることで、ブランドの一貫性を保ちながら、よりプロフェッショナルな印象を与えることができます。また、顧客向けのサイトでは、顧客のブランドカラーやロゴに合わせたログイン画面を提供することで、細部まで配慮されたサービスを提供していることをアピールできます。

FAQ

Q1. カスタマイズしたログイン画面がWordPressのアップデート後に元に戻ってしまうことはありますか？

A1. テーマの functions.php やCSSファイルにカスタマイズを実装している限り、WordPressのコアアップデートで上書きされることはありません。ただし、テーマ自体をアップデートする場合は注意が必要です。子テーマを使用するか、テーマのアップデート前にカスタマイズコードをバックアップしておくことをおすすめします。

Q2. ログイン画面のカスタマイズがうまく反映されない場合はどうすればよいですか？

A2. 以下のポイントを確認してください：

ブラウザのキャッシュを削除してみる
CSS/JSファイルのパスが正しく、ファイルが実際に存在するか確認
コンソールでエラーが発生していないか確認
WordPress開発者ツールを使ってデバッグモードで確認

Q3. 管理者以外のユーザーにだけ特定のカスタマイズを適用することはできますか？

A3. はい、以下のようなコードで条件分岐を追加できます：

// ユーザーのロールに基づいてCSSを切り替え
function wp3min_role_based_login_style() {
    $user = wp_get_current_user();
    
    // 管理者以外のユーザー向けのスタイル
    if (!in_array('administrator', (array)$user->roles)) {
        wp_enqueue_style('custom-login-editor', get_stylesheet_directory_uri() . '/css/editor-login.css', array(), '1.0.0');
    } else {
        wp_enqueue_style('custom-login-admin', get_stylesheet_directory_uri() . '/css/admin-login.css', array(), '1.0.0');
    }
}

// ユーザーのロールに基づいてCSSを切り替え

function wp3min_role_based_login_style() {

$user = wp_get_current_user();

// 管理者以外のユーザー向けのスタイル

if (!in_array('administrator', (array)$user->roles)) {

wp_enqueue_style('custom-login-editor', get_stylesheet_directory_uri() . '/css/editor-login.css', array(), '1.0.0');

} else {

wp_enqueue_style('custom-login-admin', get_stylesheet_directory_uri() . '/css/admin-login.css', array(), '1.0.0');

}

Q4. モバイルデバイスでログイン画面が崩れる場合はどうすればよいですか？

A4. レスポンシブデザイン対応のCSSを追加することで解決できます。メディアクエリを使って画面サイズに応じたスタイルを定義しましょう。特にロゴのサイズや入力フィールドの幅、パディングなどを調整すると良いでしょう。

まとめ

今回は WordPress のログイン画面をカスタマイズする方法を解説しました。login_enqueue_scripts や login_head、login_headerurl など、さまざまなフックを活用することで、プラグインを使わずにログイン画面を完全にカスタマイズできることがわかりました。

ログイン画面のカスタマイズは、セキュリティ対策としての側面と、ブランディング強化としての側面の両方を持っています。特に顧客向けのサイト制作では、こうした「目に見えない部分」のカスタマイズも丁寧に行うことで、プロフェッショナルな印象を与えられます。

WordPressのフックシステムは非常に柔軟で強力です。プラグインに頼らずとも、簡単なコードで多くのカスタマイズが可能です。ぜひ今回のテクニックを活用して、あなたのWordPressサイトのログイン画面を独自のブランドカラーやロゴで彩ってみてください！

埼玉県川越市でWordPressサイトの制作やカスタマイズを行っています。ブランディングに一貫性を持たせたサイト制作をご希望の方は、WordPressカスタマイズ・プラグイン開発サービスをご検討ください：https://edel-hearts.com/wordpress-customize-and-plugin-development/

また、もっと技術を磨きたい方は、WordPress顧問エンジニアサービスもご利用いただけます：https://edel-hearts.com/wordpress-technical-advisor/

エーデルハーツ

Custom WordPress Support & Development