プラグインで簡単！「BM Custom Login」でWordPressのログイン画面をカスタマイズする方法

2013 11/06

2013.11.06 2014.09.30

ども、Qtaro（＠Daisuke_9taro）です。

WordPressでサイトを作成した際、管理画面やカスタマーからは見えないところのデザインとか作り込みって、個人ブログなんかだと結構後回しになりがちかなーと思います。でも、せっかくのオリジナルのサイトだからそういう細かい所まで作り込んでおきたいですよね。

そんな訳で、「まずはログイン画面でもいじってみようかな〜。。」と思っていたところ

「プラグインでさくっとできちゃったぜ〜♪」

という素敵な記事を見つけちゃいました。

WordPressのユーザーログイン画面をカスタマイズするプラグイン「BM Custom Login」 | OZPAの表4

function.phpを弄くり回してなんとかしてやるかな〜とか考えていたんですが、今回はこのプラグインでさくっとカスタマイズしてみることにしましたので、サクッと導入の覚書残しておきます。
（OZPAさん素敵な記事ありがとうございます〜♪）

まずは「BM Custom Login」をインストール

まずはプラグインの新規追加で「BM Custom Login」をインストールし、プラグインを有効化します。
ちなみにプラグイン有効化直後のログイン画面を見てみると。。

のっぺらぼー♪　わーい（笑）

で、設定します

その後、「管理画面＞設定＞Custom Login」で設定します。
以下このサイトのログイン画面の設定です。参考にしてみてください。

あとはCSSでちょいとアレンジ

あとは自分の場合、ちょいとプラグインのCSS（bm-custom-login.css）をいじってます。
↓こんな感じに変更。

#login {
  -webkit-border-radius:15px;
  -khtml-border-radius:15px;
  -moz-border-radius:15px;
  border-radius:15px;
  padding:0 0 20px 0;
  margin:7em auto 0 auto;
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.65);
  border:2px solid rgba(255, 255, 255, 0.75);
}

#loginform,
#lostpasswordform,
#registerform {
  -khtml-box-shadow:none;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
  -webkit-border-radius:0;
  -khtml-border-radius:0;
  -moz-border-radius:0;
  border-radius:0px;
  border:1px solid #999999;
  background:none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
  margin:0;
}

#login h1 a {
  background-image: none;
  border-radius: 3px 3px 3px 3px;
  font-size: 60px;
  height: 70px;
  line-height: 50px;
  margin-bottom: 10px;
  margin-left: 7px;
  margin-top: 15px;
  padding: 20px 0 0;
  text-align: center;
  text-decoration: none;
  text-indent: 0;
  text-shadow: 2px 2px 3px #777;
  width: 312px;
  font-family:verdana;
  letter-spacing:-1px;
}

で、最終的にこんな感じになりました。大分印象違いますね♪