32 Shares

StylishでWordPress管理画面のデザインを変更してみよう

StylishでWordPress管理画面のデザインを変更

WordPress 管理画面・投稿画面のデザインを変更するには、本体のファイルを直接編集したり functions.php でゴニョゴニョして CSS や Javascript を追加する必要があります。

でも、カスタマイズに慣れていないと、そういったファイルをさわるのはちょっと怖いですよね。

そこで、WordPress には一切さわらず「Stylish」というブラウザ拡張機能でデザインを調整する方法をご紹介します。たとえ編集に失敗してもブログには何の影響もないので、安心してカスタマイズできますよ!

WordPress投稿画面はCSSで調整できる

WordPress には標準で配色変更機能が備わっており、プロフィール設定画面から調整することができます。

WordPress管理画面の配色

ただし、この配色は「サイドバー」や「ボタンの色」が変わるぐらいで、メイン部分の色はほぼ同じです。

WordPress投稿画面

管理画面の配色を変更してもメイン部分はほぼ変わらず

もう少し細かい部分を調整したいな、というときは CSS を編集するしかありません。

でも管理画面の CSS を管理画面から編集することはできないので、別途 CSS ファイルを用意して読み込む必要があります。

この方法は「WordPressの「やべっ!公開ボタン押しちまったよwww」を回避する小技」で解説していますので、あわせてご覧ください。

WordPress のカスタマイズが苦手なら、ブラウザ拡張機能を使ってみましょう。

ブラウザ拡張「Stylish」で調整してみよう

「Stylish」というブラウザ拡張機能を使うと、任意のサイト(URL)で自分専用のスタイルシートを反映させることができます。

Stylish がインストール・設定されているブラウザで見るときだけオリジナルの CSS が適用されるので、ほかのブラウザから見るといつもの画面と変わりません。

StylishがインストールされているブラウザでのみCSSが反映される

たとえ編集に失敗して表示が崩れても、Stylish に書いた CSS を消せば元通りになります。「カスタマイズに失敗してログインできなくなった!」という心配もないので安心ですね。

配色だけではなく、「投稿画面のツールバーにボタンがたくさん並んでいてちょっと書きづらいな」というときは、こんな風に高さを調整してスクロール式にすることもできますよ。

WordPress投稿ツールバーをカスタマイズ

ボタンが多くてもエディタ領域を確保できる

AFFINGER4 などボタンが自動的に追加されるテーマを使っていたり、AddQuicktag でボタンを何個も入れているときは重宝すると思います。

 AddQuicktagによく使うタグを登録して記事作成の効率を上げよう

Stylishの使い方

Stylish(Chrome拡張機能)

Stylish は Chrome 用と Firefox 用がありますので、お使いのブラウザに合わせてインストールしてください。

インストール後、編集したい画面でボタンをクリックしてコードを書いていきます。

以下、Chrome で解説していきますが、Firefox も操作方法は同じです。

CSS編集方法

WordPress 投稿画面をカスタマイズしたいときは、投稿画面に入った状態で Stylish ボタンをクリックします。

Stylishボタンをクリック

まだ何も CSS を書いていないので、「スタイルを作る」をクリック。

Stylishでスタイルを作る

あとはコードを書いて、わかりやすい名前をつけて保存するだけです。

StylishにCSSを書いていく

一度設定したものは「スタイルを管理する」から編集・無効化できます。最悪、Stylish ごとブラウザから削除しちゃえば元通りになるので、あれこれいじってみてください。

Stylish管理画面

投稿画面のclassやidを調べるには

デザインを変更するためには、投稿画面で使われている class や id と、そこに指定されている CSS を調べておかなければなりません。

ソースを調べるのは大変なので、ブラウザの「開発(デベロッパー)ツール」を使いましょう。

 ブログカスタマイズで重宝するブラウザ開発ツールの使い方

変更したい箇所のコードを調べ、追記・上書きするよう調整していきます。

Chromeデベロッパーツールで要素を調べる

Chromeデベロッパーツールで要素を調べる

テーマカスタマイズに慣れているなら、このあたりは余裕だと思います。

慣れていない場合は、いくつかサンプルをご紹介しますので、コードをコピペして調整してみてください。

Stylishを使ったカスタマイズ例(コードサンプル)

それでは、WordPress 投稿画面のカスタマイズ例をいくつかご紹介します。

たぶんビジュアルモードではあまり需要がないと思いますので、おもにテキストモードでのカスタマイズサンプルです。

ボタンが並ぶツールバーの高さを変更する(固定する)

AFFINGER 系テーマや AddQuicktag を使うとエディタのツールバーにボタンがたくさん並んでしまいますが、入力する領域が狭くなってしまうので高さを変更してみましょう。

エディタのボタン群

ツールバーにボタンがたくさん並んでいるので使いにくい

Stylish に追加するコードはこちらです。height の値はお好みで調整してください。

このように高さが固定されて、隠れている部分はスクロールバーで表示できます。

WordPress投稿画面のツールバーボタンをスクロール表示

ツールバーの高さが固定されるので入力エリアが見やすくなる

よく使うボタンだけ色を変える

つづいて、任意のボタンの色を変更してみます。

ボタンの色を変更する

ボタンにはそれぞれ固有の id がふられているので、それを使って指定しましょう。

サンプルの「太字(赤)」には #qt_content_ed_hutoaka という id が設定されていたので、こんな感じで指定すれば OK です。

もしあまり使わないボタンがあったら、非表示にしておくのもよいと思います。

任意の箇所にテキストを表示させる

::before::after を使って、簡単なメモを入れておくこともできます。

タイトル前にメモを表示する

CSS はこのような感じになります。

確認を忘れてしまいがちな箇所に使ってみてください。

エディタ(本文入力部分)の背景色を黒くする

ビジュアルモードなら editor-style.css を使ってエディタ部分のスタイルをカスタマイズできますが、テキストモードには反映されません。

でも、Stylish である程度デザインを変更することはできます。

WordPress投稿画面エディタの配色を変更する

さすがにビジュアルモード並にカラフルにすることはできませんが、黒い背景が好みなら試してみてください。

もちろん、font-size を指定すれば文字の大きさも変えられます。

管理画面全体を一発でダークカラーにする

実は、Stylish の公式サイトには、いろいろなサイトで使える CSS サンプルが載せられています。

WordPress 用のコードはこちらです。

Stylish がインストールされているブラウザで各ページを開いて、「+ Install width Stylish」ボタンを押せば、コードがインポートされます。

ためしに「WordPress – dark administration interface」を使ってみましょう。

Wordpress - dark administration interface

Stylish 管理画面を見ると、ちゃんと追加されていますね。正規表現で、すべての WordPress 管理画面に適用されるようになっています。

Stylish管理画面にインストールされた状態

この状態で WordPress を見てみると・・・

WordPress管理画面をダークカラーにする

あれ、一部白抜きになっていますね。

どうやら 5 行目の半角カンマが抜けているようです。カンマを入れて保存しましょう。

Stylishのコードを編集

これでバッチリですね!

WordPress管理画面がダークカラーになった

ちなみにログイン画面もダークカラーになります。

ダークカラーのWordPressログイン画面

白っぽい背景だと目が疲れてしまう、というなら試してみる価値ありです。

自分で設定した CSS とも併用できますよ。

まとめ

以上、Stylish を使った WordPress 管理画面カスタマイズ方法でした。

CSS で調整できる範囲でしか変更できませんが、アイデア次第でいろいろできると思います。

ちょっと行き詰ったとき、気分転換に配色を変えれば記事ネタが思い浮かぶかもしれません。モチベーションが下がってしまったときなど、ぜひ試してみてください。

それでは、また。