WordPressでサイト作りをしていて、管理画面やログイン画面が素っ気ないなぁと思ったことありませんか？まあ、スーパーなどのバックヤードと同じで訪問者（お客）に見せるわけではないのでまあいいか・・・と割り切っている方が多いと思います。
でも実際の生活や職場で倉庫が汚なかったり雑然としていたりすると何となくやる気がなくなりますよね？長くWordPressでサイト作りをしていると同じようなことが感じられるときがあります。ちょっと色を変えるだけ、いつも四角い入力まどの角がちょっと丸くなっているだけで何だか創作意欲が湧いて、いつもより筆が乗るなんてこともあります。
管理画面やログイン画面を装飾するプラグインはたくさん配布されています。「admin logon custom color」など「管理」や「ログイン」の「カスタム」「色」などで検索すると実にたくさんありますね。でもこれらのプラグインはログイン画面や管理画面の特定の場所のデザインを変更するものであって、自由に変更できるものでないことが多く、また、管理画面とログイン画面で別々のプラグインとなっていることが多いですから統一感という部分ではちょっと不満が残ります。
できることなら、思うようにカスタマイズしたい！！そんな希望を叶えるために管理画面のデザインをカスタマイズする方法としてたくさん紹介されているのは、今回紹介する【Admin Customizer】ではなく「Add Admin CSS」というプラグインを使う方法。この２つのプラグインがどう違うのかを簡単に説明すると・・・
WordPressでは通常のテーマで制御できない管理画面側のCSSがあります。そしてそのCSSはログイン関係の画面とログイン後の管理画面で別々のCSSファイルを使用しています（実はこの手の管理画面カスタマイズ系のプラグインを探していて初めて知りました）。一見すると今回紹介する【Admin Customizer】と「Add Admin CSS」は同様の動作をするプラグインですが、「Add Admin CSS」でできるのは管理画面の部分のみです。
もちろん「Add Admin CSS」でもファイルを指定することでどちらのCSSも操作できるようですが、コードを記述する窓が１つなので非常に煩雑になってしまうこと、共通するDIV要素やClass要素に対して同じCSSが割り当てられてしまう可能性があります。
【Admin Customizer】は最初からログイン画面にまつわるCSSに対するコードとログイン後の管理画面のCSSに対するコードを入力する窓が別々になっているので管理がしやすいという利点があります。
ここまで読むと、前述した管理画面とログイン画面でなぜプラグインが別々になっていることが多いのかも理解できますね。
・・・と書いて来ましたが、何もこのプラグインでカスタマイズすると有用なのは作者自身のモチベーションのためだけではありません。複数のユーザーがバックエンド（管理画面側）で投稿するようなサイトを作ったときに、フロントエンドと似たようなデザインにすることで違和感なくコンテンツ作りをしてもらえる効果もあります。
前置きが長くなってしまってすみません。ここからAdmin Customizerの特徴や設定方法などを紹介していきます。
【Admin Customizer】プラグインの基本的な機能・できること
- ログイン画面にカスタムCSSを追加・追記できる
- 管理画面にカスタムCSSを追加・追記できる
- 管理画面やログイン画面に使われているロゴや画像を変更できる
- 管理画面に標準で表示される様々な項目の表示／非表示が設定できる
- 管理画面上にオリジナルのウィジェットを追加できる
１～４を行うことにそれぞれ特化したプラグインがありますが、Admin CustomizerはカスタムCSSの追加・追記だけでなく、ついでの機能も充実したいいとこ取りのプラグインだと思います。
本記事を参考にWordPressサイトへプラグインの導入を検討される方へ
WordPressは古くから無料で配布されているサイト作成ツール（CMS）で、随時改良が加えられており、さまざまなバージョンが存在します。
さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。
そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。
本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。
- テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。 - プラグインに無料版と有料版（Pro版）がある場合、特に記載がなければ無料版の情報のみを紹介しています
- このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
- プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください（ここでは質問にお答えすることはできません）
【Admin Customizer】プラグインの設定画面や表示の日本語化と翻訳
当サイトで私が翻訳した【Admin Customizer】プラグインの日本語化ファイルを提供しています。
翻訳ファイルは
からダウンロードできます（ダウンロードの方法や日本語の適用方法なども解説しています）
翻訳することで設定が容易になり、重要な項目の設定漏れも少なくなりますから日本語化をお勧めします。
【Admin Customizer】プラグインのインストールと設定
インストール方法
インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください（プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください）。
WordPressを使い始めて間もない方（初心者の方）は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール＆追加方法とエラー対処の方法も併せてご覧ください。
【Admin Customizer】プラグインの基本的な使い方
※日本語化した前提で紹介します。設定はダッシュボードから「設定」→「Admin Customizer」から行います。
おおまかな手順は
- 非表示にする項目がデフォルトでオン（非表示）なので必要なものを表示するようにしていく
- ログイン画面のデザインをカスタマイズする場合には「カスタム」テーマにしてCSSを追記
- 管理画面のデザインをカスタマイズする場合には「カスタム」テーマにしてCSSを追記
という感じになります。順番に説明しますね。
非表示になっている項目の再表示
このプラグインが不特定多数のユーザーがバックエンドにログインするであろう（そのためにデザインを変更したいのだろう）という前提で作られているようなので、有効化すると、デザイン上、管理上表示しない方がいい項目は非表示になるようになっています。
【管理バータブの中の項目】
- 管理バー左上のWordPressロゴを非表示にする
- 管理バーのコメントの吹き出しを非表示にする
- 管理バーの更新メニューを非表示にする
- 管理者権限のユーザー以外で管理バーを非表示にする
- 「ヘルプ」タブを非表示にする
- 管理バーの更新通知を非表示にする
- 管理バーのユーザー名をマウスオーバーした際の情報表示をなくし、ログアウトボタンだけにする
- ログアウト時に確認画面を表示する
【フッタータブの中の項目】
- フッターテキストを非表示にする
- フッターのバージョン情報
といった項目が非表示になっていますから、表示したいものはチェックを外して再表示しましょう
ログイン画面のカスタマイズ
【ログイン画面】タブの中で大まかな設定ができます
- ログインロゴ（ユーザー名などを入力する窓の上にある「W」マーク）
- 背景画像や背景色
その他細かいCSSを追記するには【テーマとCSS】タブの中の「ログイン画面のカスタムCSS」に記述します
※その際「ログイン画面のテーマ」を「カスタム」にしないとカスタマイズした内容が適用されません
管理画面のカスタマイズ
【管理画面】タブの中で設定ができます。表示する文言やマークなどは上の【管理バータブの中の項目】で表示・非表示にしたり代替文字列を設定したりします。
その他細かいCSSを追記するには【テーマとCSS】タブの中の「管理画面のカスタムCSS」に記述します
※その際「管理画面のテーマ」を「カスタム」にしないとカスタマイズした内容が適用されません
設定を元に戻したいときは
いろいろやったけど一旦元に戻したい・・・そんなときもありますよね？でもせっかく設定した内容をすべて戻すのは面倒ですし、何より書き加えたCSSを破棄したらもったいないですから、戻したくなったら以下のようにしましょう。
- カスタムCSSだけを記述する前の状態に戻すには「カスタム」にしたテーマを「標準」に戻すだけです
- プラグインを停止すればこのプラグインで設定した内容は保存したままデフォルト（標準）の管理画面デザインに戻ります
【Admin Customizer】プラグインの便利な使い方・カスタマイズ方法など
より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、WordPressのプラグイン公式配布ページには書かれていない事柄などを紹介します。
おまけ１ 最初に追加すべき管理画面のCSS
これを使って管理画面のCSSを編集していて「ん？？」と思うのが、CSSを書く画面の狭さ。特に範囲指定してコピーしようとすると窓の小ささからババーーーっとスクロールされてしまって使いにくさこの上ない感じです。
まずは下のコードを「管理画面のカスタムCSS」へコピペして、ここのスペースを広げてカスタマイズしやすくすることをおすすめします。
textarea.large-text{
height:500px;
}このコードはテキストエリア（large-text）セレクタのある部分がすべて高さ500ピクセルになってしまいます。他の画面でも高さが変わって使いにくいという場合はIDを調べて記述すると解決します。
おまけ２ どこにどんなCSSが適用されているかを簡単に調べる方法
デザインは変更したいけどどうやったらいいのかさっぱり分からない！！という方向けのおまけ情報です。Google Chromeを使ってカスタマイズする方法を紹介します（他のブラウザでも似た感じでできます）。
- タブを２つ開き、それぞれログインした画面を表示します
- １つは「Add Admin CSS」の設定画面を開いておきます（画面①とします）
- もう１つはキーボードの「F12」を押して、右側のコード画面上部にある「Elements」をクリックします（画面②とします）
- 画面②の左画面の変更したい場所で右クリックして「検証」をクリックします
- 画面②の右下画面に該当するCSSのセレクタと内容が表示されます（.〇〇 {×××}と記述された部分）
- これをコピーして①の「管理画面のカスタムCSS」へコピペして変更や追記をします
- ①を保存したら②を再読み込みします
この手順を繰り返すことで簡単にデザイン変更ができます。
※ちゃんとやってるはずなのにデザインが変わらないときは、②の画面でリロード（再読み込み）ボタンを右クリックして「キャッシュを消去してハード再読み込み」をクリックしてしばらく待つと、一時保存されていたデザインがクリアされて変更された画面が表示されます
※「.〇〇 {×××}」はclassセレクタと呼ばれていて、このセレクタが使われている全部の部分にデザインが適用されます。セレクタにはもう１つDIVなどの要素に対するセレクタがありIDセレクタと呼ばれ「#〇〇」と表現されます。特定画面の特定Classにのみ変更を加えたい場合は②の画面右上のソース上で「div id=”△△”」というのを見つけてください。
このdiv IDとClassを組み合わせて「#△△ .〇〇」とすることで、「この場所のこの部分」という指定ができ、より細かくデザインを設定することができます。
おまけ３ ログイン画面のデザイン変更を便利にやるには
気づきそうで気づかない・・・そんなテクニックです。普通ログイン画面のデザイン変更を行うには
- デザインを記述する（編集する）→保存する
- 一度ログアウトして実際の画面を確認する
- 再度ログインしてデザインを編集する→保存する
- ・・・・・
という作業を延々と繰り返さなければなりませんよね？でも、この方法を使えばログアウトなしで編集が可能になります。その方法とは・・・ズバリ「複数のウェブブラウザを使う」ことなのです。
例えばChromeで編集しているならIEやEdgeなどの標準ブラウザでログイン画面を開いて確認するといった感じです。こうすると編集するChrome側はログインしたままで作業でき、もう一つのブラウザはログインしない（ログイン画面）状態でリロードすれば設定が反映されるという風になるのですぐに確認ができます。
ログイン画面についてはそれほどブラウザによって表現の変わってしまうような動作はありませんから、どのブラウザで確認してもほぼ同じデザインになるわけですからこの方法が一番です。
ポチップ
ポチップ
