絞れば、出てくる、アイディア。

ワードプレスのログイン画面をカスタマイズする方法

ワードプレスのログイン画面をカスタマイズする方法【プラグインで簡単!】

ワードプレスのログイン画面をプラグイン「Custom Login Page Customizer」で無料で簡単にカスタマイズする方法を紹介します!

レイアウトのテンプレートも3つの種類が用意されていて、ロゴや背景画像(壁紙)も変えることができるので、ぜひ自分好みにカスタマイズして、テンション爆上げで作業できること間違いなしです😆

ワードプレスのログイン画面をカスタマイズできます

↑こんな感じでワードプレスのログイン画面をカスタマイズできます!

1. プラグインのインストール

今回は、無料プラグイン「Custom Login Page Customizer - Login Designer」を使用して、ワードプレスのログインページをカスタマイズしていきます。

↑今回は、無料プラグイン「Custom Login Page Customizer – Login Designer」を使用して、ワードプレスのログインページをカスタマイズしていきます。

「Custom Login Page Customizer – Login Designer」公式サイト

 

ワードプレスのメニューから、「プラグイン」をクリックし、画面上部の「新規プラグインを追加」をクリックします。

↑まず初めに、ワードプレスのメニューから、「プラグイン」をクリックし、画面上部の「新規プラグインを追加」をクリックします。

検索欄に「Login Designer」と入力すると、「Custom Login Page Customizer - Login Designer」が表示されるので、「今すぐインストール」をクリックします。

↑検索欄に「Login Designer」と入力すると、「Custom Login Page Customizer – Login Designer」が表示されるので、「今すぐインストール」をクリックします。

インストールが完了すると、「有効化」というボタンが表示されるので、クリックしてプラグインを有効化します。

「Login Designer」に登録するかの表示が出てきますが、特に登録しなくても使えるので「スキップ」をクリックします。

↑「Login Designer」に登録するかの表示が出てきますが、特に登録しなくても使えるので「スキップ」をクリックします。

2. ログインページのカスタマイズ:ロゴの変更

プラグインの有効化が完了すると、自動的に上のようなカスタマイズ画面に切り替わります。

↑プラグインの有効化が完了すると、自動的に上のようなカスタマイズ画面に切り替わります。

自動的にカスタマイズ画面に切り替わらない場合、ワードプレスのメニューの「外観」にマウスをかざし、「Login Designer」をクリックすると、カスタマイズ画面に切り替わります。

↑自動的にカスタマイズ画面に切り替わらない場合、ワードプレスのメニューの「外観」にマウスをかざし、「Login Designer」をクリックすると、カスタマイズ画面に切り替わります。

ワードプレスの「W」のロゴを自分のサイトのロゴに変更する場合は、ロゴの横の「鉛筆マーク」をクリックします。画面左側の「ファイルを選択」をクリックして、ロゴ画像など任意の画像を選択します。

↑ワードプレスの「W」のロゴを自分のサイトのロゴに変更する場合は、ロゴの横の「鉛筆マーク」をクリックします。

画面左側の「ファイルを選択」をクリックして、ロゴ画像など任意の画像を選択します。

ロゴが変更されました!更新する時は必ず左上の「公開」ボタンをクリックします。

3. ログインページのカスタマイズ:テンプレートの変更

ロゴがカスタムされただけでも、見た目の雰囲気が変わりましたが、背景の画像やログインフォームの位置なども変更できます。

「Templates」を選択します。

↑画面左側のメニューから「Templates」をクリックします。

3種類のテンプレートが用意されているので、好きなテンプレートを選びます。 今回は、右側に画像がくるタイプのテンプレートを使ってログイン画面をカスタマイズしていきます。

3種類のテンプレートが用意されているので、好きなテンプレートを選びます。
今回は、右側に画像がくるタイプのテンプレートを使ってログイン画面をカスタマイズしていきます。

テンプレートの画像を変更するには、画像の左上にある「筆マーク」をクリックします。 左側メニューの「画像を選択」をクリックして、好きな画像を設定できます。

↑テンプレートの画像を変更するには、画像の左上にある「筆マーク」をクリックします。
左側メニューの「画像を選択」をクリックして、好きな画像を設定できます。

↑画像のサイズ繰り返し(画像のサイズが小さい場合に画像を繰り返して表示させるかどうか)も、設定できます。

ロゴとログインフォームがある場所の背景色も変更できます。 「鉛筆マーク」をクリックして、画面左側の「Background」から色を選択して変更します。

↑ロゴとログインフォームがある場所の背景色も変更できます。
「鉛筆マーク」をクリックして、画面左側の「Background」から色を選択して変更します。

「Username or Email Adress」や「Password」などの文字も変更できます。 フォント、サイズ、文字の色もカスタマイズ可能です。

「Username or Email Adress」「Password」などの文字も変更できます。
フォントサイズ文字の色もカスタマイズ可能です。

↑最後に「公開」ボタンをクリックして、設定を保存します。

まとめ🍊

今回は、プラグイン「Custom Login Page Customizer」を使って、ワードプレスのログイン画面をカスタマイズする方法を紹介しました。

サイトの本体には関係の無いカスタマイズですが、ログイン画面を自分好みにして、モチベーションを上げてワードプレスを楽しんでいきましょう👍

ぜひ今回の記事を参考にしてみてください!

2024-10-16
Wednesday

weblemonの筆者

YUKINKO

20代後半のWEBマーケター&WEBデザイナー
新卒で商社に入社しWEBマーケターとして勤務後、
カナダに渡航し現地企業のWEB制作と
マーケティング支援を行う。
現在は帰国し某企業でWEBマーケターをしています。

 自分がWEBマーケター・WEBデザイナーとして
仕事をしているときに気になった事を
調べた経緯を残しておきたいなという思いと、
それを誰かのお悩み解決に
役立てることができたらいいなと思っています。

“ネコとレモンのWEBマーケ&デザインブログ”
みたいな感じで覚えてもらえたら嬉しいです😺🍋

POPULAR POST

LATEST POST