MAGAZINEWordPressのログイン画面をカスタマイズする方法!プラグイン、CSS編集で自由にカスタマイズしようWordPressのログイン画面はプラグインやCSS編集をすることでオリジナルのデザインにカスタマイズすることができます。見た目のデザインだけでなく、挙動をカスタマイズすることもできたりと便利なカスタマイズ方法がたくさんあります。今回はプラグインを用いた簡単なカスタマイズとより高度にカスタマイズできるCSS編集の2つの方法を紹介していきます。背景をカスタマイズするロゴをカスタマイズするロゴのリンク先をカスタマイズするロゴのtitle属性を変更をする「ログイン状態を保存する」をデフォルトでチェックを入れるログインエラー時のシェイクを止めるログインエラー時のエラー文を変更するログインエラー時のエラー文を非表示にする入力欄のラベルを非表示にして、任意のラベルを設定する「パスワードをお忘れですか?」と「←◯◯◯へ戻る」を非表示にする「パスワードをお忘れですか?」と「←◯◯◯へ戻る」を任意の文言に変更するまとめデフォルトのログイン画面これがインストールされた時のデフォルトのログイン画面です。グレーの背景にWordPressのロゴが入ったシンプルなデザインです。ログイン画面をカスタマイズする方法ログイン画面をカスタマイズする方法はプラグインを使用する方法とCSSを編集する方法の2種類あります。簡単なカスタマイズならプラグインがオススメです。Login」ならログインページの背景色やボタンの色など、見た目のデザインを簡単にカスタマイズすることができます。CSSを編集より高度にカスタマイズしたい方はCSSを編集しましょう。背景色やロゴの変更はもちろん、ロゴのリンク先を変更したり、入力欄にプレースホルダーを設定したりすることができます。Login”と検索してください。Loginをインストールし、そのまま有効化します。Login」で設定を行います。Loginでは、以下の項目を設定することができます。「パスワードをお忘れですか?」や「Webサイトへ戻る」のリンクの有無カスタムCSSを使って、これ以外のカスタマイズをすることもできます。ログイン画面をCSS編集でカスタマイズする直接WordPressのCSSファイルを編集することで、ログイン画面をカスタマイズすることもできます。CSSの読み込み方法CSSを読み込む方法はhead内に記述する方法と、外部ファイルとして作成し、それを読み込む方法の2種類あります。ファイルに以下のように記述します。);外部ファイルを読み込む外部ファイルとして作成したCSSやJavascriptファイルを読み込みには、同じくfunctions.phpに以下のように記述します。ボリュームのあるソースを作成する場合は、外部ファイルとして作成し、それを読み込む形にするのがベターです。);ログイン画面で使用されているclass,id一覧WordPress公式ドキュメントにWordPressのログイン画面で使用されているセレクタの一覧が掲載されています。こちらを参照してください。foxのFirebugを使用して、ログイン画面でどのようなクラスやセレクタが適用されているのか確認することもできます。背景をカスタマイズするログイン画面の背景をカスタマイズするには、.loginセレクタを編集しfunctions.phpに書き込みます。aセレクタを編集しfunctions.phpに書き込みます。);ロゴのリンク先をカスタマイズするログイン画面のロゴのリンク先をカスタマイズするには、functions.phpに以下のように書き込みます。リンク先に設定されています。WordPress」が設定されています。このtitle属性をカスタマイズするには、functions.phpに以下のように書き込みます。);「ログイン状態を保存する」をデフォルトでチェックを入れるログイン画面の「ログイン状態を保存する」のチェックボックスは、初期設定ではチェックが入っていない状態です。これをデフォルトでチェックが入っている状態するには以下のようにfuncitons.phpを編集します。ソースにもあるように、このカスタマイズにはjQueryを読み込んでおく必要があります。);ログインエラー時のシェイクを止める<p>ログインに失敗した際にエラーメッセージが表示されますが、初期設定ではメッセージが振動します。この振動をなくすカスタマイズには、functions.phpに以下のように記述します。);ログインエラー時のエラー文を変更するログインに失敗した際のエラーメッセージをカスタマイズすることもできます。functions.phpに以下のように記述します。ログインできませんでした”の部分を任意のメッセージにすることでカスタマイズすることができます。);ログインエラー時のエラー文を非表示にする先ほどの構文の任意のメッセージの部分を”null”にすることで、ログインに失敗した際のエラーメッセージを非表示にすることもできます。functions.phpに以下のように記述します。);入力欄のラベルを非表示にして、任意のラベルを設定する入力欄にデフォルトのラベルを非表示にし、任意のラベルに変更にカスタマイズすることもできます。functions.phpに以下のように記述します。ソースにもあるように、このカスタマイズにはJQueryを読み込んでおく必要があります。);「パスワードをお忘れですか?」と「←◯◯◯へ戻る」を非表示にするログイン画面の「パスワードをお忘れですか?」と「←◯○○へ戻る」を非表示にすることもできます。#backtoblogを編集しfunctions.phpに書き込みます。);「パスワードをお忘れですか?」と「←◯◯◯へ戻る」を任意の文言に変更するログイン画面の「パスワードをお忘れですか?」と「←◯○○へ戻る」を任意のメッセージにすることもできます。#backtoblogを編集しfunctions.phpに書き込みます。ソースにもあるように、このカスタマイズにはJQueryを読み込んでおく必要があります。);まとめいかがでしたでしょうか。ログイン画面のカスタマイズは直接WEBサイトの機能を拡張したりするものではありませんが、ちょっと他の人とは違うWordPressにすることができます。自分のWEBサイトに愛着をもつためにも、ぜひチャレンジしてみては。MAGAZINEの運営者TOMATOではWeb制作をはじめ、ランディングページの制作やSEO対策などWebに関する事業を包括的に展開しております。ご意見・ご相談、料金のお見積もりなど、お気軽にお問合わせください。お問合せ内容の確認後、こちらからご連絡させていただきます。Webのことなら何でもご相談下さいホームページ制作はもちろんLP制作、SEO対策に関するご相談も承ります。お気軽にご相談ください。最低契約期間3ヶ月その他サイト不具合等のご。