WordPressのログイン画面は、ロゴの変更といった簡単なカスタマイズをはじめ、ゼロから独自の画面を作成することができます。
この記事では、既存のWordPressログイン画面をカスタマイズする方法をご紹介します。
目次
ログイン画面のビフォー・アフター
通常のログイン画面
通常のログイン画面は、グレーの背景にWordPressのロゴとログインフォームが表示されています。
カスタマイズ後のログイン画面
背景をブルーにして、独自のロゴ画像に変更しました。
フォームのデザインも柔らかい雰囲気にしています。
ログイン画面のカスタマイズ方法
既存のWordPressログイン画面をカスタマイズするには、テーマファイルの編集が必要です。
テーマファイルを編集する際は子テーマを作成してそちらで作業します。
コードの全体像
今回のカスタマイズに必要なコードをご紹介します。
次の処理を子テーマのfunctions.phpに追加しています。
function my_custom_login_logo()
{
?>
<style type="text/css">
body.login {
background-color: #f1f5f7;
}
#login h1 a {
background-image: url('<?php echo home_url(); ?>/wp-content/uploads/2025/11/sample-logo-scaled.png') !important;
width: 100%;
background-size: 100%;
}
#login form#loginform {
border: none;
border-radius: 10px;
box-shadow: 0px 0px 80px -30px rgba(102, 141, 186, .5);
}
#login form#loginform p label[for="user_login"],
#login form#loginform div.user-pass-wrap label[for="user_pass"] {
font-weight: bold;
color: #33475b;
}
#login form#loginform input#user_login,
#login form#loginform input#user_pass {
border: 1px solid #e0e0e0;
border-radius: 5px;
}
#loginform p.forgetmenot input#rememberme {
border: 1px solid #e0e0e0;
}
#login form#loginform p.submit input#wp-submit {
border: none;
border-radius: 5px;
background-color: #48d14c;
transition: all 0.3s;
padding-top: 10px;
padding-bottom: 10px;
}
#login form#loginform p.submit input#wp-submit:hover {
filter: saturate(50%);
}
</style>
<?php
}
add_action('login_head', 'my_custom_login_logo');
function my_login_logo_url() {
return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );コードの詳細
次の部分ではログインページの<head>内にCSSを追加しています。
function my_custom_login_logo()
{
?>
<style type="text/css">
・・・
</style>
<?php
}
add_action('login_head', 'my_custom_login_logo');次が実際に追加するCSSです。
/* ログイン画面全体 */
body.login {
background-color: #f1f5f7;
}
/* あらかじめメディアライブラリにアップロードしている画像をロゴ画像に設定 */
#login h1 a {
background-image: url('<?php echo home_url(); ?>/wp-content/uploads/2025/11/sample-logo-scaled.png') !important;
width: 100%;
background-size: 100%;
}
/* ログインフォーム（白背景部分）の見た目 */
#login form#loginform {
border: none;
border-radius: 10px;
box-shadow: 0px 0px 80px -30px rgba(102, 141, 186, .5);
}
/* ログインフォームのユーザー名・パスワード入力見出し */
#login form#loginform p label[for="user_login"],
#login form#loginform div.user-pass-wrap label[for="user_pass"] {
font-weight: bold;
color: #33475b;
}
/* ログインフォームのユーザー名・パスワード入力欄 */
#login form#loginform input#user_login,
#login form#loginform input#user_pass {
border: 1px solid #e0e0e0;
border-radius: 5px;
}
/* ログインフォームのログイン状態保持チェックボックス */
#loginform p.forgetmenot input#rememberme {
border: 1px solid #e0e0e0;
}
/* ログインフォームのログインボタン */
#login form#loginform p.submit input#wp-submit {
border: none;
border-radius: 5px;
background-color: #48d14c;
transition: all 0.3s;
padding-top: 10px;
padding-bottom: 10px;
}
/* ログインフォームのログインボタンをマウスホバーしたとき */
#login form#loginform p.submit input#wp-submit:hover {
filter: saturate(50%);
}最後の部分では、ロゴ画像をクリックしたときのリンク先をWordPressのサービスサイトからそのWordPressサイトのトップページへ変更しています。
function my_login_logo_url() {
return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );まとめ
WordPressの子テーマを編集して、既存のWordPressログイン画面をカスタマイズする方法をご紹介しました。
クライアントワークでは、企業ロゴへの変更やコーポレートカラーへの配色統一を行うことで、お客様によりご満足いただける仕上がりになるかもしれません。
弊社ではWEBサイトの制作や保守を行っています。WordPressサイトも対応しているのでお気軽ご相談ください。
