WordPressでログイン画面や管理画面のデザインを自由に変更できるプラグイン「Admin Customizer」 | Knowledge Base

WordPressでログイン画面や管理画面のデザインを自由に変更できるプラグイン「Admin Customizer」

Wordpressでサイト作りをしていて、管理画面やログイン画面が素っ気ないなぁと思ったことありませんか?まあ、スーパーなどのバックヤードと同じで訪問者(お客)に見せるわけではないのでまあいいか・・・と割り切っている方が多いと思います。

でも実際の生活や職場で倉庫が汚なかったり雑然としていたりすると何となくやる気がなくなりますよね?長くWordpressでサイト作りをしていると同じようなことが感じられるときがあります。ちょっと色を変えるだけ、いつも四角い入力まどの角がちょっと丸くなっているだけで何だか創作意欲が湧いて、いつもより筆が乗るなんてこともあります。

管理画面やログイン画面を装飾するプラグインはたくさん配布されています。「admin logon custom color」など「管理」や「ログイン」の「カスタム」「色」などで検索すると実にたくさんありますね。でもこれらのプラグインはログイン画面や管理画面の特定の場所のデザインを変更するものであって、自由に変更できるものでないことが多く、また、管理画面とログイン画面で別々のプラグインとなっていることが多いですから統一感という部分ではちょっと不満が残ります。

できることなら、思うようにカスタマイズしたい!!そんな希望を叶えるために管理画面のデザインをカスタマイズする方法としてたくさん紹介されているのは、今回紹介する【Admin Customizer】ではなく「Add Admin CSS」というプラグインを使う方法。この2つのプラグインがどう違うのかを簡単に説明すると・・・

WordPressでは通常のテーマで制御できない管理画面側のCSSがあります。そしてそのCSSはログイン関係の画面とログイン後の管理画面で別々のCSSファイルを使用しています(実はこの手の管理画面カスタマイズ系のプラグインを探していて初めて知りました)。一見すると今回紹介する【Admin Customizer】と「Add Admin CSS」は同様の動作をするプラグインですが、「Add Admin CSS」でできるのは管理画面の部分のみです。

もちろん「Add Admin CSS」でもファイルを指定することでどちらのCSSも操作できるようですが、コードを記述する窓が1つなので非常に煩雑になってしまうこと、共通するDIV要素やClass要素に対して同じCSSが割り当てられてしまう可能性があります。

【Admin Customizer】は最初からログイン画面にまつわるCSSに対するコードとログイン後の管理画面のCSSに対するコードを入力する窓が別々になっているので管理がしやすいという利点があります。

ここまで読むと、前述した管理画面とログイン画面でなぜプラグインが別々になっていることが多いのかも理解できますね。

・・・と書いて来ましたが、何もこのプラグインでカスタマイズすると有用なのは作者自身のモチベーションのためだけではありません。複数のユーザーがバックエンド(管理画面側)で投稿するようなサイトを作ったときに、フロントエンドと似たようなデザインにすることで違和感なくコンテンツ作りをしてもらえる効果もあります。

前置きが長くなってしまってすみません。ここからAdmin Customizerの特徴や設定方法などを紹介していきます。

スポンサーリンク

【Admin Customizer】プラグインの基本的な機能・できること

  1. ログイン画面にカスタムCSSを追加・追記できる
  2. 管理画面にカスタムCSSを追加・追記できる
  3. 管理画面やログイン画面に使われているロゴや画像を変更できる
  4. 管理画面に標準で表示される様々な項目の表示/非表示が設定できる
  5. 管理画面上にオリジナルのウィジェットを追加できる

1~4を行うことにそれぞれ特化したプラグインがありますが、Admin CustomizerはカスタムCSSの追加・追記だけでなく、ついでの機能も充実したいいとこ取りのプラグインだと思います。

この記事の内容について
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
  1. すべての環境で動作するとは限りません
  2. できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
  3. 有料版と無料版がある場合、テストは原則無料版のみで実施しています
  4. テスト環境については文末に記載しています
  5. 使用方法で紹介しているショートコードをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。

【Admin Customizer】プラグインの設定画面や表示の日本語化と翻訳

当サイトで私が翻訳した【Admin Customizer】プラグインの日本語化ファイルを配布しています。

翻訳ファイルは

Wordpressプラグイン【Admin Customizer】の日本語翻訳ファイルのダウンロードページです。

からダウンロードできます(ダウンロードの方法や日本語の適用方法なども解説しています)

翻訳することで設定が容易になり、重要な項目の設定漏れも少なくなりますから日本語化をお勧めします。

【Admin Customizer】プラグインのインストールと設定

インストールと設定方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

Wordpressと言えばさまざまな追加機能を使って思い通りの表現や動作ができるのがブログやHTMLで作ったサイトと違って楽しいところですね。ここでは基本的なプラグインの導入の仕方とトラブルが発生した場合の対処方法について解説します。
を参照ください

【Admin Customizer】プラグインの基本的な使い方

※日本語化した前提で紹介します。設定はダッシュボードから「設定」→「Admin Customizer」から行います。

おおまかな手順は

  1. 非表示にする項目がデフォルトでオン(非表示)なので必要なものを表示するようにしていく
  2. ログイン画面のデザインをカスタマイズする場合には「カスタム」テーマにしてCSSを追記
  3. 管理画面のデザインをカスタマイズする場合には「カスタム」テーマにしてCSSを追記

という感じになります。順番に説明しますね。

非表示になっている項目の再表示

このプラグインが不特定多数のユーザーがバックエンドにログインするであろう(そのためにデザインを変更したいのだろう)という前提で作られているようなので、有効化すると、デザイン上、管理上表示しない方がいい項目は非表示になるようになっています。

【管理バータブの中の項目】

  1. 管理バー左上のWordpressロゴを非表示にする
  2. 管理バーのコメントの吹き出しを非表示にする
  3. 管理バーの更新メニューを非表示にする
  4. 管理者権限のユーザー以外で管理バーを非表示にする
  5. 「ヘルプ」タブを非表示にする
  6. 管理バーの更新通知を非表示にする
  7. 管理バーのユーザー名をマウスオーバーした際の情報表示をなくし、ログアウトボタンだけにする
  8. ログアウト時に確認画面を表示する

【フッタータブの中の項目】

  1. フッターテキストを非表示にする
  2. フッターのバージョン情報

といった項目が非表示になっていますから、表示したいものはチェックを外して再表示しましょう

ログイン画面のカスタマイズ

【ログイン画面】タブの中で大まかな設定ができます

  1. ログインロゴ(ユーザー名などを入力する窓の上にある「W」マーク)
  2. 背景画像や背景色

その他細かいCSSを追記するには【テーマとCSS】タブの中の「ログイン画面のカスタムCSS」に記述します
※その際「ログイン画面のテーマ」を「カスタム」にしないとカスタマイズした内容が適用されません

管理画面のカスタマイズ

【管理画面】タブの中で設定ができます。表示する文言やマークなどは上の【管理バータブの中の項目】で表示・非表示にしたり代替文字列を設定したりします。

その他細かいCSSを追記するには【テーマとCSS】タブの中の「管理画面のカスタムCSS」に記述します
※その際「管理画面のテーマ」を「カスタム」にしないとカスタマイズした内容が適用されません

設定を元に戻したいときは

いろいろやったけど一旦元に戻したい・・・そんなときもありますよね?でもせっかく設定した内容をすべて戻すのは面倒ですし、何より書き加えたCSSを破棄したらもったいないですから、戻したくなったら以下のようにしましょう。

  1. カスタムCSSだけを記述する前の状態に戻すには「カスタム」にしたテーマを「標準」に戻すだけです
  2. プラグインを停止すればこのプラグインで設定した内容は保存したままデフォルト(標準)の管理画面デザインに戻ります

【Admin Customizer】プラグインの便利な使い方・カスタマイズ方法など

より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、Wordpressのプラグイン公式配布ページには書かれていない事柄などを紹介します。

おまけ1 最初に追加すべき管理画面のCSS

これを使って管理画面のCSSを編集していて「ん??」と思うのが、CSSを書く画面の狭さ。特に範囲指定してコピーしようとすると窓の小ささからババーーーっとスクロールされてしまって使いにくさこの上ない感じです。

まずは下のコードを「管理画面のカスタムCSS」へコピペして、ここのスペースを広げてカスタマイズしやすくすることをおすすめします。

textarea.large-text{
height:500px;
}

このコードはテキストエリア(large-text)セレクタのある部分がすべて高さ500ピクセルになってしまいます。他の画面でも高さが変わって使いにくいという場合はIDを調べて記述すると解決します。

おまけ2 どこにどんなCSSが適用されているかを簡単に調べる方法

デザインは変更したいけどどうやったらいいのかさっぱり分からない!!という方向けのおまけ情報です。Google Chromeを使ってカスタマイズする方法を紹介します(他のブラウザでも似た感じでできます)。

  1. タブを2つ開き、それぞれログインした画面を表示します
  2. 1つは「Add Admin CSS」の設定画面を開いておきます(画面①とします)
  3. もう1つはキーボードの「F12」を押して、右側のコード画面上部にある「Elements」をクリックします(画面②とします)
  4. 画面②の左画面の変更したい場所で右クリックして「検証」をクリックします
  5. 画面②の右下画面に該当するCSSのセレクタと内容が表示されます(.〇〇 {×××}と記述された部分)
  6. これをコピーして①の「管理画面のカスタムCSS」へコピペして変更や追記をします
  7. ①を保存したら②を再読み込みします

この手順を繰り返すことで簡単にデザイン変更ができます。
※ちゃんとやってるはずなのにデザインが変わらないときは、②の画面でリロード(再読み込み)ボタンを右クリックして「キャッシュを消去してハード再読み込み」をクリックしてしばらく待つと、一時保存されていたデザインがクリアされて変更された画面が表示されます

※「.〇〇 {×××}」はclassセレクタと呼ばれていて、このセレクタが使われている全部の部分にデザインが適用されます。セレクタにはもう1つDIVなどの要素に対するセレクタがありIDセレクタと呼ばれ「#〇〇」と表現されます。特定画面の特定Classにのみ変更を加えたい場合は②の画面右上のソース上で「div id=”△△”」というのを見つけてください。

このdiv IDとClassを組み合わせて「#△△ .〇〇」とすることで、「この場所のこの部分」という指定ができ、より細かくデザインを設定することができます。

おまけ3 ログイン画面のデザイン変更を便利にやるには

気づきそうで気づかない・・・そんなテクニックです。普通ログイン画面のデザイン変更を行うには

  1. デザインを記述する(編集する)→保存する
  2. 一度ログアウトして実際の画面を確認する
  3. 再度ログインしてデザインを編集する→保存する
  4. ・・・・・

という作業を延々と繰り返さなければなりませんよね?でも、この方法を使えばログアウトなしで編集が可能になります。その方法とは・・・ズバリ「複数のウェブブラウザを使う」ことなのです。

例えばChromeで編集しているならIEやEdgeなどの標準ブラウザでログイン画面を開いて確認するといった感じです。こうすると編集するChrome側はログインしたままで作業でき、もう一つのブラウザはログインしない(ログイン画面)状態でリロードすれば設定が反映されるという風になるのですぐに確認ができます。

ログイン画面についてはそれほどブラウザによって表現の変わってしまうような動作はありませんから、どのブラウザで確認してもほぼ同じデザインになるわけですからこの方法が一番です。

Amazonの人気商品楽天市場の人気商品
いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)

いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)

  • 価   格:¥ 1,706
  • 販 売 者: Amazon.co.jp
  • 評   価:
  • 商品の概要:ASIN: 4295000795
    インプレス

本当によくわかるWordPressの教科書 はじめての人も、挫折した人も、本格サイトが必ず作れる

本当によくわかるWordPressの教科書 はじめての人も、挫折した人も、本格サイトが必ず作れる

  • 価   格:¥ 1,685
  • 販 売 者: Amazon.co.jp
  • 評   価:
  • 商品の概要:ASIN: 4797395168
    SBクリエイティブ

WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

  • 価   格:¥ 3,002
  • 販 売 者: Amazon.co.jp
  • 評   価:
  • 商品の概要:ASIN: 4774173800
    技術評論社

CS Shop
【100円クーポン配布中!】いちばんやさしいWordPressの教本 人気講師が教える本格Webサイトの作り方/石川栄和/大串肇/星野邦敏

【100円クーポン配布中!】いちばんやさしいWordPressの教本 人気講師が教える本格Webサイトの作り方/石川栄和/大串肇/星野邦敏

  • 価   格:1,706 円 (税込)
  • 販 売 者: bookfan 1号店 楽天市場店
  • 評   価:
  • 商品の概要:著者石川栄和(著) 大串肇(著) 星野邦敏(著)出版社インプレス発行年月2017年03月ISBN9784295000792ページ数255P9784295000792内容紹介大きな画面の操作手順で迷わない。人気のテーマで、パソコン&スマホ両対応のWebサイトを作れる!ソーシャルメディアとの連携やSEO対策、バ..
一歩先にいくWordPressのカスタマイズがわかる本【電子書籍】[ 相原知栄子 ]

一歩先にいくWordPressのカスタマイズがわかる本【電子書籍】[ 相原知栄子 ]

  • 価   格:2,894 円 (税込) 送料込
  • 販 売 者: 楽天Kobo電子書籍ストア
  • 評   価:
  • 商品の概要:<p>【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライトや検索、辞書の参照、引用などの機能が使用できません。ご購入前に、無料サンプルにてお手持ちの電子端末での表示状態をご確認の上、商品をお買い求めください】<..
WordPressユーザーのためのPHP入門第2版 [ 水野史土 ]

WordPressユーザーのためのPHP入門第2版 [ 水野史土 ]

  • 価   格:2,592 円 (税込) 送料込
  • 販 売 者: 楽天ブックス
  • 評   価:
  • 商品の概要:水野史土 エムディエヌコーポレーション インプレスワードプレス ユーザー ノ タメノ ピーエイチピー ニュウモン ミズノ,フミト 発行年月:2017年03月 ページ数:256p サイズ:単行本 ISBN:9784844366584 水野史土(ミズノフミト) レスキューワーク株式会社代表。WordPres..
楽天ウェブサービスセンター CS Shop

プラグインに関するお問い合わせ

最後までお読みいただきありがとうございました。 内容の相違、導入後のトラブル、設定方法のお問い合わせなどはこちらのリンクからお願いします。
さまざまな情報をいただくことで、プラグインの紹介記事をより正確でよりわかりやすく、よりいろいろな方のお役に立てる情報にしていきたいと考えておりますので、ぜひともご協力をお願いいたします。
役に立つ情報でしたらぜひSNSやメールでシェアしてください
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

似たようなプラグインをお探しですか?

このプラグインはに分類されています。リンクをクリックすると同じような機能を持つプラグインの紹介記事一覧が表示されますので、プラグイン探しに是非ご活用ください。

メニューを表示できません

ページ先頭へ