WordPressのログイン画面をカスタマイズ!Custom Login Page Customizerの設定と使い方

この記事を書いた人
りん
りんメディアディレクター

㈱Wooのメディアディレクター。BLOGUSを専任しています。 元副業ライター、現副業ディレクターです。 BLOGUSでは主にビジネス・恋愛・ブログに使える行動心理学について発信しています。本業は児童館の先生です。

WordPressのログイン画面はIDとパスワード(以下PW)の2つを入力する仕様。

ログイン画面をカスタマイズすると、次のメリットがあります。

WordPressのログイン画面をカスタマイズするメリット

  • [区別できる] 他サイトの運営に使っているID/PWを間違えて入力しにくい
  • [機能性] サイトのログイン画面が自分好みにアレンジされていて使いやすい
  • [やる気UP] 好みの画像やデザインにしてモチベーションアップ

やるだけの価値はありそう。

今回は、WordPressのログイン画面をカスタマイズできるプラグイン、Custom Login Page Customizerについて見ていきます。

りん
実際の方法と手順を、私りんが紹介しますね。

この記事の監修者
ドム(工藤逸世)SEOコンサル&WPテーマ開発

㈱Woo代表。WordPressを魔改造してSEO戦争する人です。 WordPressプラグイン・テーマ「unify」開発者。 中央大学卒。元WEB系エンジニアでCMSやECサイト開発等をしてました。 2018年10月頃にブログ運営を開始。2020年独立し、2021年法人化。

WPのログイン画面をカスタマイズするには

WordPressログイン画面は何もしない状態だと、以下の様になっています。

WordPressのログイン画面(デフォルト)

例えば以下2つのサイトを運営しているとします。

  1. 旅館についての紹介記事を運営する特化ブログ
  2. ホテルについてひたすら特集する特化ブログ

①②が同じログイン画面だとややこしいので区別したい時。

りん
ログイン画面に旅館やホテルの画像を入れるとわかりやすそう。

そのために、以下2つの方法があります。

  • プラグインを使用する(難易度:低)
  • CSS編集を用いる(難易度:高)
りん
順に見ていきましょう。

プラグインを使用する

Custom Login Page Customizerは、ログイン画面を簡単にカスタマイズできるプラグイン。

プログラミングなどの知識が無くても使えるため、難易度としても易しめ。

インストール数が8万を超えていて評価も5つ星に近いので、信頼できますね。

CSS編集を用いる

CSSとは、WordPressで作られたページのデザインなどを編集する際に使うプログラム。

WordPressのメニュー画面から「外観」→「テーマファイルエディター」を選択すると、右側に文字列が出てきます。

CSS編集

CSS編集は、上の画像にもあるようなコードの編集のこと。

りん
ただし上級者向けの方法であるため、この記事では最後に説明しますね。

Custom Login Page Customizerの設定

ここからは、上級者でなくても使用できるCustom Login Page Customizerがメイン。

こちらを使い、実際にログイン画面をカスタマイズしてみましょう。

インストール・有効化

まずはインストールから。

他のプラグインをインストールする時と同様、以下の手順でインストール、次いで有効化してください。

Custom Login Page Customizerのインストール

有効化の際、下の様に更新通知や診断トラッキングを許可するかどうか選択する画面が出ます。

これは「許可して続ける」、「スキップ」どちらでもOK。

プラグイン一覧の画面で、後から許可しないに変えられます。

Custom Login Page Customizeの通知

日本語化する方法

有効化したら、ログイン画面をカスタマイズする準備はOK。

ただ、作成者が外国人名からも察しがつくように、表記は英語のみ。

WordPressメニュー画面より「外観」→「Login Customizer」に行くと、設定画面が英語で現れます。

Login Customizerの設定画面

これでは編集しにくい、という方。

日本語用の言語パックをWordPress.orgがリリースしてくれている事があります。

具体的な手順の要約は、以下の通りです。

  1. GlotPress < |ロケールWordPress.org」に行き、「ロケールを検索」に「japanese」と入力
  2. 検索結果に日本語翻訳のロケールが出てくるので、「Contribute Translation」を選択
  3. 「Stats(統計)」→「Plugins」を選択
  4. Ctrl + Fキー で検索機能を用いて、日本語パックがあるか確認

難しそう…と感じた方も、動画が載っているのでご安心を。

WordPress プラグイン翻訳の手順 (日本語) / Plugin Translation Instruction in Japanese | Learn WordPress

りん
ここまでできたら、各項目を設定していきましょう。

Custom Login Page Customizerの使い方

では、実際にログイン画面をカスタマイズする方法を紹介しますね。

項目は少々多いですが、以下の順に載せていきます。

  1. テンプレートを使う(Tempelates)
  2. 背景の設定(Background)
  3. ロゴ画像の設定(Logo)
  4. ログインフォームの設定(Form)
  5. チェックボックスの設定(Fields)
  6. ボタンの設定(Button)
  7. その他の設定(Other)
  8. CSSとJavaScriptの設定

こちらの設定は、WordPressの「外観」→「Login Customizer」で行ってください。

テンプレートを使う(Tempelates)

「Template」を選択すると、3種類のテンプレート(白・黒・青)が表示されます。

好みのものを選んでクリック。

Tempelatesの設定

背景の設定(Background)

テンプレートの色以外で背景の色や画像を選びたい時に設定します。

背景色を変える場合

以下の順で設定してください。

背景色を変える場合

  1. 「Background」を選択
  2. 「Select Color」を選択
  3. 色を選ぶ
Backgroundの設定1

グラデーションバーを変える以外にも、バーの左横にある箇所から色を選択できます。

背景画像を変える場合

りん
こちらの方が、手順としては簡単。

背景画像を変える場合

  1. 「Background」を選択
  2. 「画像を選択」をクリック
  3. メディアから画像を選択 or 自分のPCからアップロードする
Backgroundの設定2

ただしデフォルト設定だと、アップロードした画像が小さい場合は複数枚の重ね合わせで表示されます。

りん
そんな時は、「Background Size」からモードを選びましょう。

Backgroundの設定3

余白を残してそのまま画像を使いたい時は「Background Repeat」を選択。

「Repeat」から「No Repeat」に変更すると、繰り返しで画像を充てる設定が解除されます。

Backgroundの設定4

また、画像の配置位置については「Background Position」から選択可能です。

例えば「→」を選択すれば右詰めの配置に。

ID/PWを打ち込む枠と被らないようにしたい、という方は設定を変更してみてください。

ロゴ画像の設定(Logo)

ロゴ画像は、デフォルトだと「W」マークのこと。

WordPressのWマーク

ロゴ画像を入れるには、以下の手順で設定します。

  1. 「Logo」を選択
  2. 「画像を選択」をクリック
  3. メディアから画像を選択 or 自分のPCからアップロードする
Logoの設定1
りん
この手順でおにぎりの画像を設定すると、下みたいな感じ。

Logoの設定2

設定したロゴ画像の大きさや、ID/PW記入欄の位置は動かせます。

下の3モードがあるので、編集したい場合は設定を変えてみてください。

  • Logo Width…ロゴの横を伸縮させる
  • Logo Height…ロゴの縦を伸縮させる
  • Padding Bottom…ID/PW入力欄(ログインフォーム)を上下させる
Logoの設定3

ログインフォームの設定(Form)

ログインフォームは、ID/PWを入力する枠のこと。

ここに背景色を設定したり、画像を入れたりすることもできます。

フォームの背景色を変える場合

以下の手順で設定OK。

  1. 「Form」を選択
  2. 「Select Color」を選択
  3. 色を選ぶ
Formの設定1

フォームの背景画像を変える場合

手順は背景画像やロゴ設定の時と同じ。

Formの設定2

この手順でタッパーの画像を設定すると、下みたいな感じ。

Formの設定3

入れた画像は、「Width」や「Height」で横幅・縦幅を調整できます。

他にも「Radius」、「Shadow Spread」があるので、ログインフォームを工夫したい方は調整してみてください。

  • Radius…ログインフォームの丸みを設定
  • Shadow Spread…ログインフォームの影を設定(色や濃さ)
Formの設定4

チェックボックスの設定(Fields)

「ログイン状態を保持する」チェックボックスを設けられます。

不要な場合は「Fields」を選択し、「Disable Remember Me」をオフにすればOK。

Fieldsの設定

他に、ID/PW入力欄の枠線や色の調整、枠の大きさの調整ができます。

ボタンの設定(Button)

ログインボタンの色や枠線、影の付け方を編集できます。

「Button」を選択し、詳細を設定してみてください。

主な項目は以下の通り。

  • Background…ボタンの色を設定
  • Border…ボタンの枠線色を設定
  • Shadow Spread…ボタンにつける影の広がり具合を設定
  • Box Shadow…ボタンにつける影の色を設定

その他の設定(Other)

ログイン画面に出てくる項目の表示・非表示設定が変えられます。

主に、下の画像の赤枠で囲った、「Back to 自分のウェブサイト」、「Privacy Policy」の2項目。

テキストの色も変えられるので、編集したい方は設定してみてください。

Otherの設定

CSSとJavaScriptの設定

CSS、JavaScriptの設定を編集できます。

「Custom CSS & JavaScrip」を選択すると編集できるので、もっと高度な編集がしたい方はぜひ。

Custom CSS & JavaScript

Custom Login Page Customizerの代替プラグイン

Custom Login Page Customizerはログイン画面の編集ができる便利なプラグイン。

ただ、他のプラグインでも同様の機能を持つものがあります。

りん
そちら3つも併せて紹介しますね。

  • LoginPress
  • Admin Custom Login
  • MS Custom Login

LoginPress

Custom Login Page Customizerと同じように、プレビューを見ながらログインページの編集ができます。

Admin Custom Login

ログイン画面の編集に加えて、TwitterやInstagramなどのSNSリンクをログインページに載せることもできます。

MS Custom Login

Custom Login Page Customizerの機能がある、国産のプラグインです。

ログイン画面をCSSでカスタマイズ【上級者向け】

CSS編集でログイン画面を編集する際は、主に2つの方法があります。

どちらの方法でもバックアップを必ず取っておきましょう。

  1. 自分でCSSコードを追加して編集
  2. CSSを外部のファイルで読み込む

②にフォーカスすると、具体的な手順は下の通り。

  1. ログイン画面に使うCSSシートを新しく作る
  2. ログイン画面に使う画像をWordPressに読み込ませる
  3. 作ったシートにコードを書く

ログイン画面に使うシートを新しく作る

名前は特に指定ありませんが、ここでは「Log-in.css」としましょう。

CSSシートの作成はWordPressのカスタマイザーを使用するか、プラグインを使用します。

CSSを編集できるプラグインは以下の4つ。

CSSを編集できるプラグイン

  • Simple CSS(中級)
  • Simple Custom CSS(初級)
  • SiteOrigin CSS(初級)
  • Code Snippets(上級)

CSS編集用のプラグインを使いCSSシートの作成・編集を行うと、WordPressテーマを変更しても設定は引き継がれます。

りん
そのため、カスタマイザーよりはプラグインを使った編集がおススメ。

ログイン画面に使う画像をWordPressに読み込ませる

ログイン画面に画像を使うときは、WordPressへ画像のアップロードが必要です。

アップしたら、「メディア」から対象の画像をクリック。

すると、下のようにファイル名やリンク先が表示されますね。

画像のURL

「ファイルのURL」の右に表記されているのが、画像のリンク先です。

あとは「URLをクリップボードにコピー」を押して、リンク先のコピーは完了。

作ったシートにコードを書く

画像が一通り揃ったら、コードを書いていきましょう。

コードを書いていく際、以下の関数一覧表が便利です。

スタイルシート[CSS]/CSSプロパティ一覧 – TAG index

まとめ

この記事のまとめ

  • WordPressログイン画面をカスタマイズできるプラグインに、Custom Login Page Customizerがある
  • プラグインなしにログイン画面を編集する場合には、CSS編集を用いる(上級者向け)
  • Custom Login Page Customizerと同様の機能を持つプラグインは「LoginPress」、「Admin Custom Login」、「MS Custom Login」の3つ

今回紹介したプラグインは、WordPressで複数サイトを運営される方にメリットが大きいもの。

ログイン画面で個性を出すと、間違えて他サイトで使っているID/PWを入力しちゃう、といった事が減らせますね。

他にも、ログイン画面を自分好みにアレンジしてモチベーションアップ、という方にもオススメ。

りん
ぜひ取り入れて、使いこなしてみましょう。

キーワード管理の作業時間を30%削減

 unifyキーワード

unifyキーワードは、WordPress上でキーワードを管理するプラグイン。

単純にキーワードを管理するだけでなく、Googleサーチコンソールとの連携によって、サイトの管理画面や投稿画面で順位を追えるのが魅力です。


キーワードの管理シートやGoogleサーチコンソールを、わざわざ別タブで開いて作業する必要は一切なし。

WordPress上で全て確認・編集ができるため、作業効率が上がり、よりブログ運営を快適にすることが可能です。

実際に弊社サイトで1年以上運用し、キーワード周りの作業時間を30%削減したプラグインに機能を追加して公開しました。


また、サイト設計強化や検索意図発見の機会が生まれるため、記事品質の向上のきっかけも生み出せます。


100%GPLライセンスを採用しているので、WordPressで作成されたサイトであれば、誰でもunifyキーワードを使用可能。


沢山の方に使っていただきたいので、無料でかなり多くの機能を解放しています。


ドム
リンク先から無料ダウンロードして、是非一度試してみてください!

キーワード周りの作業時間を30%削減する。

unifyキーワードは、ブログ運営の無駄を無くすために作られたWordPressプラグインです。

Wordpressプラグイン