ブラウザ拡張機能「Stylish」でWordPress管理画面のデザインを変更してみよう
WordPress 管理画面・投稿画面のデザインを変更するには、本体のファイルを直接編集したり functions.php でゴニョゴニョして CSS や Javascript を追加する必要があります。
でも、カスタマイズに慣れていないと、そういったファイルをさわるのはちょっと怖いですよね。
そこで、WordPress には一切さわらず「Stylish」というブラウザ拡張機能でデザインを調整する方法をご紹介します。たとえ編集に失敗してもブログには何の影響もないので、安心してカスタマイズできますよ！
記事内でご紹介している「Stylish」は、閲覧履歴の収集が発覚したため、Chrome・Firefox 版ともに削除されています。
かわりに「Stylus」が使えます。
WordPress投稿画面はCSSで調整できる
WordPress には標準で配色変更機能が備わっており、プロフィール設定画面から調整することができます。
ただし、この配色は「サイドバー」や「ボタンの色」が変わるぐらいで、メイン部分の色はほぼ同じです。
もう少し細かい部分を調整したいな、というときは CSS を編集するしかありません。
でも管理画面の CSS を管理画面から編集することはできないので、別途 CSS ファイルを用意して読み込む必要があります。
この方法は「WordPressの「やべっ！公開ボタン押しちまったよｗｗｗ」を回避する小技」で解説していますので、あわせてご覧ください。
WordPress のカスタマイズが苦手なら、ブラウザ拡張機能を使ってみましょう。
ブラウザ拡張「Stylish」で調整してみよう
「Stylish」というブラウザ拡張機能を使うと、任意のサイト（URL）で自分専用のスタイルシートを反映させることができます。
Stylish がインストール・設定されているブラウザで見るときだけオリジナルの CSS が適用されるので、ほかのブラウザから見るといつもの画面と変わりません。
たとえ編集に失敗して表示が崩れても、Stylish に書いた CSS を消せば元通りになります。「カスタマイズに失敗してログインできなくなった！」という心配もないので安心ですね。
配色だけではなく、「投稿画面のツールバーにボタンがたくさん並んでいてちょっと書きづらいな」というときは、こんな風に高さを調整してスクロール式にすることもできますよ。
AFFINGER4 などボタンが自動的に追加されるテーマを使っていたり、AddQuicktag でボタンを何個も入れているときは重宝すると思います。
AddQuicktagによく使うタグを登録して記事作成の効率を上げよう
Stylishの使い方
Stylish は Chrome 用と Firefox 用がありますので、お使いのブラウザに合わせてインストールしてください。
かわりに「Stylus」が使えます。
インストール後、編集したい画面でボタンをクリックしてコードを書いていきます。
以下、Chrome で解説していきますが、Firefox も操作方法は同じです。
CSS編集方法
WordPress 投稿画面をカスタマイズしたいときは、投稿画面に入った状態で Stylish ボタンをクリックします。
まだ何も CSS を書いていないので、「スタイルを作る」をクリック。
あとはコードを書いて、わかりやすい名前をつけて保存するだけです。
一度設定したものは「スタイルを管理する」から編集・無効化できます。最悪、Stylish ごとブラウザから削除しちゃえば元通りになるので、あれこれいじってみてください。
投稿画面のclassやidを調べるには
デザインを変更するためには、投稿画面で使われている class や id と、そこに指定されている CSS を調べておかなければなりません。
ソースを調べるのは大変なので、ブラウザの「開発（デベロッパー）ツール」を使いましょう。
変更したい箇所のコードを調べ、追記・上書きするよう調整していきます。
テーマカスタマイズに慣れているなら、このあたりは余裕だと思います。
慣れていない場合は、いくつかサンプルをご紹介しますので、コードをコピペして調整してみてください。
Stylishを使ったカスタマイズ例（コードサンプル）
それでは、WordPress 投稿画面のカスタマイズ例をいくつかご紹介します。
たぶんビジュアルモードではあまり需要がないと思いますので、おもにテキストモードでのカスタマイズサンプルです。
ボタンが並ぶツールバーの高さを変更する（固定する）
AFFINGER 系テーマや AddQuicktag を使うとエディタのツールバーにボタンがたくさん並んでしまいますが、入力する領域が狭くなってしまうので高さを変更してみましょう。
Stylish に追加するコードはこちらです。height の値はお好みで調整してください。
.quicktags-toolbar {
height: 88px;
overflow-y: scroll;
}
このように高さが固定されて、隠れている部分はスクロールバーで表示できます。
よく使うボタンだけ色を変える
つづいて、任意のボタンの色を変更してみます。
ボタンにはそれぞれ固有の id がふられているので、それを使って指定しましょう。
サンプルの「太字（赤）」には #qt_content_ed_hutoaka という id が設定されていたので、こんな感じで指定すれば OK です。
#qt_content_ed_hutoaka {
color: #fff;
background-color: #c03;
border: none;
box-shadow: none;
}
もしあまり使わないボタンがあったら、非表示にしておくのもよいと思います。
#qt_content_ed_hutoaka {
display: none;
}
任意の箇所にテキストを表示させる
::before や ::after を使って、簡単なメモを入れておくこともできます。
CSS はこのような感じになります。
#titlediv::before {
content: "公開前にタイトルをもう一度確認！";
color: #c03;
}
確認を忘れてしまいがちな箇所に使ってみてください。
エディタ（本文入力部分）の背景色を黒くする
ビジュアルモードなら editor-style.css を使ってエディタ部分のスタイルをカスタマイズできますが、テキストモードには反映されません。
でも、Stylish である程度デザインを変更することはできます。
さすがにビジュアルモード並にカラフルにすることはできませんが、黒い背景が好みなら試してみてください。
.wp-editor-area {
background: #000;
color: #fff;
}
もちろん、font-size を指定すれば文字の大きさも変えられます。
管理画面全体を一発でダークカラーにする
実は、Stylish の公式サイトには、いろいろなサイトで使える CSS サンプルが載せられています。
WordPress 用のコードはこちらです。
Stylish がインストールされているブラウザで各ページを開いて、「+ Install width Stylish」ボタンを押せば、コードがインポートされます。
ためしに「WordPress – dark administration interface」を使ってみましょう。
Stylish 管理画面を見ると、ちゃんと追加されていますね。正規表現で、すべての WordPress 管理画面に適用されるようになっています。
この状態で WordPress を見てみると・・・
あれ、一部白抜きになっていますね。
どうやら 5 行目の半角カンマが抜けているようです。カンマを入れて保存しましょう。
これでバッチリですね！
ちなみにログイン画面もダークカラーになります。
白っぽい背景だと目が疲れてしまう、というなら試してみる価値ありです。
自分で設定した CSS とも併用できますよ。
まとめ
以上、Stylish を使った WordPress 管理画面カスタマイズ方法でした。
CSS で調整できる範囲でしか変更できませんが、アイデア次第でいろいろできると思います。
ちょっと行き詰ったとき、気分転換に配色を変えれば記事ネタが思い浮かぶかもしれません。モチベーションが下がってしまったときなど、ぜひ試してみてください。
それでは、また。